@jini-ai/chat 0.6.6 → 0.6.10

package/dist/react/components/QuestionForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CREDENTIAL_CARD_GUIDANCE, SECRET_REDACTED_NOTICE } from '../../core/user-text-redaction.js';
 import { useUserTextGuard } from '../hooks/useUserTextGuard.js';
 /**
@@ -21,34 +21,46 @@ export const QuestionForm = forwardRef(function QuestionForm({ form: incomingFor
     const t = useT();
     const form = useMemo(() => withoutSecretQuestionDefaults({ form: incomingForm }), [incomingForm]);
     const guard = useUserTextGuard({ ...(redactUserText ? { redactUserText } : {}), ...(onSecretRedacted ? { onSecretRedacted } : {}) });
+    const locked = !interactive || !onSubmit || submittedAnswers !== undefined;
+    const state = useQuestionAnswers({ form, submittedAnswers, draftAnswers, locked }, { onDraftChange, onAnswerChange });
+    const currentAnswers = submittedAnswers ? redactQuestionAnswers({ form, answers: submittedAnswers }).answers : state.answers;
+    const ready = answersReady(form, currentAnswers);
+    function handleSubmit() {
+        if (locked || !onSubmit)
+            return;
+        if (!ready)
+            return;
+        const safe = redactQuestionAnswers({ form, answers: state.answers }, { ...(redactUserText ? { redactUserText } : {}), onSecretRedacted: guard.notifyRedaction });
+        state.setAnswers(safe.answers);
+        const files = collectFileSubmissions(form, state.fileAnswers);
+        if (files.length > 0)
+            onSubmit(formatFormAnswers({ form: form, answers: safe.answers }), safe.answers, files);
+        else
+            onSubmit(formatFormAnswers({ form: form, answers: safe.answers }), safe.answers);
+    }
+    function handleSkipAll() {
+        if (locked || !onSubmit)
+            return;
+        const empty = {};
+        onSubmit(formatFormAnswers({ form: form, answers: empty }), empty);
+    }
+    useImperativeHandle(ref, () => ({ submit: handleSubmit, skipAll: handleSkipAll }));
+    useEffect(() => {
+        onReadyChange?.(!locked && ready);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onReadyChange, locked, ready]);
+    return (_jsxs("div", { className: `question-form${locked ? ' question-form-locked' : ''}`, "data-form-id": form.id, children: [_jsx(QuestionFormHead, { form: form, locked: locked }), _jsx("div", { className: "question-form-body", children: form.questions.map((q) => (_jsx(QuestionField, { q: q, value: currentAnswers[q.id], formId: form.id, locked: locked, t: t, ...state.handlers }, q.id))) }), guard.secretRedacted ? _jsx("div", { role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, hideInternalSubmit ? null : _jsx(QuestionFormFoot, { locked: locked, answered: submittedAnswers !== undefined, ready: ready, submitLabel: form.submitLabel, onSubmit: handleSubmit })] }));
+});
+/** Owns the editable answers plus the picked files; every edit is a no-op once the form is locked. */
+function useQuestionAnswers({ form, submittedAnswers, draftAnswers, locked }, { onDraftChange, onAnswerChange } = {}) {
     const initial = useMemo(() => buildInitialState(form, submittedAnswers, draftAnswers), [form, submittedAnswers, draftAnswers]);
     const [answers, setAnswers] = useState(initial);
     const [fileAnswers, setFileAnswers] = useState({});
-    const locked = !interactive || !onSubmit || submittedAnswers !== undefined;
-    const currentAnswers = submittedAnswers ? redactQuestionAnswers({ form, answers: submittedAnswers }).answers : answers;
     useEffect(() => {
         setFileAnswers({});
     }, [form.id]);
     useEffect(() => {
-        setAnswers((prev) => {
-            let changed = false;
-            const next = { ...prev };
-            for (const q of form.questions) {
-                if (next[q.id] !== undefined)
-                    continue;
-                changed = true;
-                if (submittedAnswers && submittedAnswers[q.id] !== undefined) {
-                    next[q.id] = canonicalizeQuestionValue(q, submittedAnswers[q.id]);
-                }
-                else if (q.defaultValue !== undefined) {
-                    next[q.id] = canonicalizeQuestionValue(q, q.defaultValue);
-                }
-                else {
-                    next[q.id] = emptyQuestionValue(q);
-                }
-            }
-            return changed ? next : prev;
-        });
+        setAnswers((prev) => backfillAnswers(prev, form, submittedAnswers));
     }, [form, submittedAnswers]);
     function update(id, value) {
         if (locked)
@@ -78,60 +90,111 @@ export const QuestionForm = forwardRef(function QuestionForm({ form: incomingFor
         const fixed = current.filter((entry) => questionValueIsKnown(q, entry));
         update(q.id, [...fixed, ...splitCustomEntries(raw)]);
     }
-    function handleSubmit() {
-        if (locked || !onSubmit)
-            return;
-        if (!ready)
-            return;
-        const safe = redactQuestionAnswers({ form, answers }, { ...(redactUserText ? { redactUserText } : {}), onSecretRedacted: guard.notifyRedaction });
-        setAnswers(safe.answers);
-        const files = collectFileSubmissions(form, fileAnswers);
-        if (files.length > 0)
-            onSubmit(formatFormAnswers({ form: form, answers: safe.answers }), safe.answers, files);
-        else
-            onSubmit(formatFormAnswers({ form: form, answers: safe.answers }), safe.answers);
-    }
-    function handleSkipAll() {
-        if (locked || !onSubmit)
-            return;
-        const empty = {};
-        onSubmit(formatFormAnswers({ form: form, answers: empty }), empty);
+    function selectFiles(q, list) {
+        const files = Array.from(list ?? []);
+        const names = files.map((file) => file.name);
+        setFileAnswers((current) => ({ ...current, [q.id]: files }));
+        update(q.id, q.multiple ? names : (names[0] ?? ''));
     }
+    return { answers, setAnswers, fileAnswers, handlers: { update, toggleCheckbox, updateCheckboxCustom, selectFiles } };
+}
+function answersReady(form, answers) {
     const withinSelectionLimits = form.questions.every((q) => {
         if (q.type !== 'checkbox' || q.maxSelections === undefined)
             return true;
-        const v = currentAnswers[q.id];
+        const v = answers[q.id];
         return !Array.isArray(v) || v.length <= q.maxSelections;
     });
     const requiredAnswered = form.questions.every((q) => {
         if (q.required !== true)
             return true;
-        const v = currentAnswers[q.id];
+        const v = answers[q.id];
         if (Array.isArray(v))
             return v.length > 0;
         return typeof v === 'string' && v.trim().length > 0;
     });
-    const ready = withinSelectionLimits && requiredAnswered;
-    useImperativeHandle(ref, () => ({ submit: handleSubmit, skipAll: handleSkipAll }));
-    useEffect(() => {
-        onReadyChange?.(!locked && ready);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onReadyChange, locked, ready]);
-    return (_jsxs("div", { className: `question-form${locked ? ' question-form-locked' : ''}`, "data-form-id": form.id, children: [_jsxs("div", { className: "question-form-head", children: [_jsx("span", { className: "question-form-icon", "aria-hidden": true, children: "?" }), _jsxs("div", { className: "question-form-titles", children: [_jsx("div", { className: "question-form-title", children: form.title }), form.description ? _jsx("div", { className: "question-form-desc", children: form.description }) : null] }), locked ? _jsx("span", { className: "question-form-pill", children: t('Answered') }) : null] }), _jsx("div", { className: "question-form-body", children: form.questions.map((q) => {
-                    const value = currentAnswers[q.id];
-                    return (_jsxs("div", { className: "qf-field", children: [_jsxs("label", { className: "qf-label", children: [_jsx("span", { children: q.label }), q.required ? (_jsx("span", { className: "qf-required", "aria-label": t('required'), children: "*" })) : null] }), q.help ? _jsx("div", { className: "qf-help", children: q.help }) : null, isSecretQuestion({ question: q }) ? _jsx("div", { className: "qf-help", children: t(CREDENTIAL_CARD_GUIDANCE) }) : null, q.type === 'radio' && q.options ? (_jsx("div", { className: "qf-options", children: q.options.map((opt) => (_jsxs("label", { className: `qf-chip${value === opt.value ? ' qf-chip-on' : ''}`, title: opt.description, children: [_jsx("input", { type: "radio", name: `${form.id}-${q.id}`, value: opt.value, checked: value === opt.value, disabled: locked, "aria-label": opt.label, onChange: () => update(q.id, opt.value) }), _jsx(OptionCopy, { option: opt })] }, opt.value))) })) : null, q.type === 'radio' && q.options && shouldRenderCustomChoice(q) ? (_jsx(CustomChoiceInput, { label: q.customLabel ?? t('Something else'), value: customSingleValue(q, value), placeholder: q.customPlaceholder ?? t('Type your own answer'), disabled: locked, onChange: (next) => update(q.id, next) })) : null, q.type === 'checkbox' && q.options ? (_jsx("div", { className: "qf-options", children: q.options.map((opt) => {
-                                    const arr = Array.isArray(value) ? value : [];
-                                    const on = arr.includes(opt.value);
-                                    const maxed = q.maxSelections !== undefined && !on && arr.length >= q.maxSelections;
-                                    return (_jsxs("label", { title: opt.description, className: `qf-chip${on ? ' qf-chip-on' : ''}${maxed ? ' qf-chip-disabled' : ''}`, children: [_jsx("input", { type: "checkbox", value: opt.value, checked: on, disabled: locked || maxed, "aria-label": opt.label, onChange: () => toggleCheckbox(q.id, opt.value, q.maxSelections) }), _jsx(OptionCopy, { option: opt })] }, opt.value));
-                                }) })) : null, q.type === 'checkbox' && q.options && shouldRenderCustomChoice(q) ? (_jsx(CustomChoiceInput, { label: q.customLabel ?? t('Something else'), value: customCheckboxValue(q, value), placeholder: q.customPlaceholder ?? t('Type your own answer'), disabled: locked, onChange: (next) => updateCheckboxCustom(q, next) })) : null, q.type === 'select' && q.options ? (_jsxs("select", { className: "qf-select", value: typeof value === 'string' && questionValueIsKnown(q, value) ? value : '', disabled: locked, onChange: (e) => update(q.id, e.target.value), children: [_jsx("option", { value: "", disabled: true, children: q.placeholder ?? t('Choose one') }), q.options.map((opt) => (_jsx("option", { value: opt.value, title: opt.description, children: opt.label }, opt.value)))] })) : null, q.type === 'select' && q.options && shouldRenderCustomChoice(q) ? (_jsx(CustomChoiceInput, { label: q.customLabel ?? t('Something else'), value: customSingleValue(q, value), placeholder: q.customPlaceholder ?? t('Type your own answer'), disabled: locked, onChange: (next) => update(q.id, next) })) : null, q.type === 'text' ? _jsx("input", { ...questionTextInputProps({ question: q }), className: "qf-input", value: typeof value === 'string' ? value : '', placeholder: q.placeholder, disabled: locked, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'number' ? _jsx("input", { type: "number", className: "qf-input", value: typeof value === 'string' ? value : '', placeholder: q.placeholder, min: q.min, max: q.max, step: q.step, disabled: locked, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'range' ? (_jsxs("div", { className: "qf-range-wrap", children: [_jsx("input", { type: "range", className: "qf-range", value: typeof value === 'string' && value.trim() ? value : String(q.min ?? 0), min: q.min, max: q.max, step: q.step, disabled: locked, onChange: (e) => update(q.id, e.target.value) }), _jsx("output", { className: "qf-range-value", children: typeof value === 'string' && value.trim() ? value : String(q.min ?? 0) })] })) : null, q.type === 'date' || q.type === 'time' || q.type === 'datetime-local' ? _jsx("input", { type: q.type, className: "qf-input", value: typeof value === 'string' ? value : '', placeholder: q.placeholder, disabled: locked, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'color' ? _jsx("input", { type: "color", className: "qf-color", value: normalizeColorInputValue(value), disabled: locked, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'url' || q.type === 'email' || q.type === 'tel' ? _jsx("input", { type: q.type, className: "qf-input", value: typeof value === 'string' ? value : '', placeholder: q.placeholder, disabled: locked, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'file' ? (_jsxs("div", { className: "qf-file-wrap", children: [_jsx("input", { type: "file", className: "qf-file", multiple: q.multiple, accept: q.accept, disabled: locked, onChange: (e) => {
-                                            const files = Array.from(e.target.files ?? []);
-                                            const names = files.map((file) => file.name);
-                                            setFileAnswers((current) => ({ ...current, [q.id]: files }));
-                                            update(q.id, q.multiple ? names : (names[0] ?? ''));
-                                        } }), fileValueLabel(value) ? _jsx("div", { className: "qf-file-summary", children: fileValueLabel(value) }) : null] })) : null, q.type === 'switch' ? (_jsxs("label", { className: "qf-switch", children: [_jsx("input", { type: "checkbox", role: "switch", checked: value === 'true', disabled: locked, onChange: (e) => update(q.id, e.target.checked ? 'true' : 'false') }), _jsx("span", { "aria-hidden": true })] })) : null, q.type === 'textarea' ? _jsx("textarea", { ...questionTextareaProps({ question: q }), className: "qf-textarea", value: typeof value === 'string' ? value : '', placeholder: q.placeholder, disabled: locked, rows: 3, onChange: (e) => update(q.id, e.target.value) }) : null, q.type === 'direction-cards' && q.cards && q.cards.length > 0 ? (_jsx("div", { className: "qf-direction-cards", children: q.cards.map((card) => (_jsx(DirectionCardView, { card: card, formId: form.id, questionId: q.id, selected: value === card.id || value === card.label, disabled: locked, onSelect: () => update(q.id, card.id) }, card.id))) })) : null, q.type === 'direction-cards' && q.cards && q.cards.length > 0 && shouldRenderCustomChoice(q) ? (_jsx(CustomChoiceInput, { label: q.customLabel ?? t('Something else'), value: customSingleValue(q, value), placeholder: q.customPlaceholder ?? t('Type your own answer'), disabled: locked, onChange: (next) => update(q.id, next) })) : null] }, q.id));
-                }) }), guard.secretRedacted ? _jsx("div", { role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, hideInternalSubmit ? null : (_jsxs("div", { className: "question-form-foot", children: [locked ? _jsx("span", { className: "qf-locked-note", children: submittedAnswers ? t('You answered this') : t('A newer message answered this') }) : _jsx("span", { className: "qf-hint", children: t('Answer above, then continue') }), !locked ? (_jsx("button", { type: "button", className: "primary", onClick: handleSubmit, disabled: !ready, title: ready ? t('Submit your answers') : t('Answer the required questions first'), children: form.submitLabel ?? t('Continue') })) : null] }))] }));
-});
+    return withinSelectionLimits && requiredAnswered;
+}
+function QuestionFormHead({ form, locked }) {
+    const t = useT();
+    return (_jsxs("div", { className: "question-form-head", children: [_jsx("span", { className: "question-form-icon", "aria-hidden": true, children: "?" }), _jsxs("div", { className: "question-form-titles", children: [_jsx("div", { className: "question-form-title", children: form.title }), form.description ? _jsx("div", { className: "question-form-desc", children: form.description }) : null] }), locked ? _jsx("span", { className: "question-form-pill", children: t('Answered') }) : null] }));
+}
+function QuestionFormFoot({ locked, answered, ready, submitLabel, onSubmit }) {
+    const t = useT();
+    return (_jsxs("div", { className: "question-form-foot", children: [locked ? _jsx("span", { className: "qf-locked-note", children: answered ? t('You answered this') : t('A newer message answered this') }) : _jsx("span", { className: "qf-hint", children: t('Answer above, then continue') }), !locked ? (_jsx("button", { type: "button", className: "primary", onClick: onSubmit, disabled: !ready, title: ready ? t('Submit your answers') : t('Answer the required questions first'), children: submitLabel ?? t('Continue') })) : null] }));
+}
+function QuestionField(ctx) {
+    const { q, t } = ctx;
+    const renderControl = QUESTION_CONTROLS[q.type];
+    return (_jsxs("div", { className: "qf-field", children: [_jsxs("label", { className: "qf-label", children: [_jsx("span", { children: q.label }), q.required ? (_jsx("span", { className: "qf-required", "aria-label": t('required'), children: "*" })) : null] }), q.help ? _jsx("div", { className: "qf-help", children: q.help }) : null, isSecretQuestion({ question: q }) ? _jsx("div", { className: "qf-help", children: t(CREDENTIAL_CARD_GUIDANCE) }) : null, renderControl ? renderControl(ctx) : null] }));
+}
+function stringValue(value) {
+    return typeof value === 'string' ? value : '';
+}
+/** A range with no usable answer yet (e.g. mid-stream) shows its minimum, matching `emptyQuestionValue`. */
+function rangeValue(q, value) {
+    return typeof value === 'string' && value.trim() ? value : String(q.min ?? 0);
+}
+function customChoice({ q, t, locked }, value, onChange) {
+    if (!shouldRenderCustomChoice(q))
+        return null;
+    return _jsx(CustomChoiceInput, { label: q.customLabel ?? t('Something else'), value: value, placeholder: q.customPlaceholder ?? t('Type your own answer'), disabled: locked, onChange: onChange });
+}
+function singleCustomChoice(ctx) {
+    return customChoice(ctx, customSingleValue(ctx.q, ctx.value), (next) => ctx.update(ctx.q.id, next));
+}
+function RadioControl(ctx) {
+    const { q, value, formId, locked, update } = ctx;
+    if (!q.options)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "qf-options", children: q.options.map((opt) => (_jsxs("label", { className: `qf-chip${value === opt.value ? ' qf-chip-on' : ''}`, title: opt.description, children: [_jsx("input", { type: "radio", name: `${formId}-${q.id}`, value: opt.value, checked: value === opt.value, disabled: locked, "aria-label": opt.label, onChange: () => update(q.id, opt.value) }), _jsx(OptionCopy, { option: opt })] }, opt.value))) }), singleCustomChoice(ctx)] }));
+}
+function CheckboxControl(ctx) {
+    const { q, value, locked, toggleCheckbox, updateCheckboxCustom } = ctx;
+    if (!q.options)
+        return null;
+    const arr = Array.isArray(value) ? value : [];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "qf-options", children: q.options.map((opt) => {
+                    const on = arr.includes(opt.value);
+                    const maxed = q.maxSelections !== undefined && !on && arr.length >= q.maxSelections;
+                    return (_jsxs("label", { title: opt.description, className: `qf-chip${on ? ' qf-chip-on' : ''}${maxed ? ' qf-chip-disabled' : ''}`, children: [_jsx("input", { type: "checkbox", value: opt.value, checked: on, disabled: locked || maxed, "aria-label": opt.label, onChange: () => toggleCheckbox(q.id, opt.value, q.maxSelections) }), _jsx(OptionCopy, { option: opt })] }, opt.value));
+                }) }), customChoice(ctx, customCheckboxValue(q, value), (next) => updateCheckboxCustom(q, next))] }));
+}
+function SelectControl(ctx) {
+    const { q, value, locked, t, update } = ctx;
+    if (!q.options)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("select", { className: "qf-select", value: typeof value === 'string' && questionValueIsKnown(q, value) ? value : '', disabled: locked, onChange: (e) => update(q.id, e.target.value), children: [_jsx("option", { value: "", disabled: true, children: q.placeholder ?? t('Choose one') }), q.options.map((opt) => (_jsx("option", { value: opt.value, title: opt.description, children: opt.label }, opt.value)))] }), singleCustomChoice(ctx)] }));
+}
+function DirectionCardsControl(ctx) {
+    const { q, value, formId, locked, update } = ctx;
+    if (!q.cards || q.cards.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "qf-direction-cards", children: q.cards.map((card) => (_jsx(DirectionCardView, { card: card, formId: formId, questionId: q.id, selected: value === card.id || value === card.label, disabled: locked, onSelect: () => update(q.id, card.id) }, card.id))) }), singleCustomChoice(ctx)] }));
+}
+/** date/time/datetime-local and url/email/tel share one plain input whose `type` is the question type. */
+function TypedInputControl({ q, value, locked, update }) {
+    return _jsx("input", { type: q.type, className: "qf-input", value: stringValue(value), placeholder: q.placeholder, disabled: locked, onChange: (e) => update(q.id, e.target.value) });
+}
+const QUESTION_CONTROLS = {
+    radio: RadioControl,
+    checkbox: CheckboxControl,
+    select: SelectControl,
+    'direction-cards': DirectionCardsControl,
+    text: ({ q, value, locked, update }) => _jsx("input", { ...questionTextInputProps({ question: q }), className: "qf-input", value: stringValue(value), placeholder: q.placeholder, disabled: locked, onChange: (e) => update(q.id, e.target.value) }),
+    number: ({ q, value, locked, update }) => _jsx("input", { type: "number", className: "qf-input", value: stringValue(value), placeholder: q.placeholder, min: q.min, max: q.max, step: q.step, disabled: locked, onChange: (e) => update(q.id, e.target.value) }),
+    range: ({ q, value, locked, update }) => (_jsxs("div", { className: "qf-range-wrap", children: [_jsx("input", { type: "range", className: "qf-range", value: rangeValue(q, value), min: q.min, max: q.max, step: q.step, disabled: locked, onChange: (e) => update(q.id, e.target.value) }), _jsx("output", { className: "qf-range-value", children: rangeValue(q, value) })] })),
+    date: TypedInputControl,
+    time: TypedInputControl,
+    'datetime-local': TypedInputControl,
+    url: TypedInputControl,
+    email: TypedInputControl,
+    tel: TypedInputControl,
+    color: ({ q, value, locked, update }) => _jsx("input", { type: "color", className: "qf-color", value: normalizeColorInputValue(value), disabled: locked, onChange: (e) => update(q.id, e.target.value) }),
+    file: ({ q, value, locked, selectFiles }) => (_jsxs("div", { className: "qf-file-wrap", children: [_jsx("input", { type: "file", className: "qf-file", multiple: q.multiple, accept: q.accept, disabled: locked, onChange: (e) => selectFiles(q, e.target.files) }), fileValueLabel(value) ? _jsx("div", { className: "qf-file-summary", children: fileValueLabel(value) }) : null] })),
+    switch: ({ q, value, locked, update }) => (_jsxs("label", { className: "qf-switch", children: [_jsx("input", { type: "checkbox", role: "switch", checked: value === 'true', disabled: locked, onChange: (e) => update(q.id, e.target.checked ? 'true' : 'false') }), _jsx("span", { "aria-hidden": true })] })),
+    textarea: ({ q, value, locked, update }) => _jsx("textarea", { ...questionTextareaProps({ question: q }), className: "qf-textarea", value: stringValue(value), placeholder: q.placeholder, disabled: locked, rows: 3, onChange: (e) => update(q.id, e.target.value) }),
+};
 function OptionCopy({ option }) {
     return (_jsxs("span", { className: "qf-chip-copy", children: [_jsx("span", { children: option.label }), option.description ? _jsx("span", { className: "qf-chip-desc", children: option.description }) : null] }));
 }
@@ -145,22 +208,31 @@ function DirectionCardView({ card, formId, questionId, selected, disabled, onSel
 }
 function buildInitialState(form, submitted, draft) {
     const out = {};
+    for (const q of form.questions)
+        out[q.id] = initialQuestionValue(q, submitted, draft);
+    return out;
+}
+/** Submitted beats draft beats default beats empty; file drafts are never restored (the File objects are gone). */
+function initialQuestionValue(q, submitted, draft) {
+    if (submitted?.[q.id] !== undefined)
+        return canonicalizeQuestionValue(q, submitted[q.id]);
+    if (draft?.[q.id] !== undefined && q.type !== 'file')
+        return canonicalizeQuestionValue(q, draft[q.id]);
+    if (q.defaultValue !== undefined)
+        return canonicalizeQuestionValue(q, q.defaultValue);
+    return emptyQuestionValue(q);
+}
+/** Questions that stream in after mount get their initial value; answers already set are kept. */
+function backfillAnswers(prev, form, submitted) {
+    let changed = false;
+    const next = { ...prev };
     for (const q of form.questions) {
-        if (submitted && submitted[q.id] !== undefined) {
-            out[q.id] = canonicalizeQuestionValue(q, submitted[q.id]);
-            continue;
-        }
-        if (draft && draft[q.id] !== undefined && q.type !== 'file') {
-            out[q.id] = canonicalizeQuestionValue(q, draft[q.id]);
+        if (next[q.id] !== undefined)
             continue;
-        }
-        if (q.defaultValue !== undefined) {
-            out[q.id] = canonicalizeQuestionValue(q, q.defaultValue);
-            continue;
-        }
-        out[q.id] = emptyQuestionValue(q);
+        changed = true;
+        next[q.id] = initialQuestionValue(q, submitted, undefined);
     }
-    return out;
+    return changed ? next : prev;
 }
 function draftSafeAnswers(form, answers) {
     const fileQuestionIds = new Set(form.questions.filter((q) => q.type === 'file').map((q) => q.id));

package/dist/react/components/QuestionsPanel.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { useT } from '../hooks/context.js';
 import { QuestionForm } from './QuestionForm.js';
-export function QuestionsPanel({ form, interactive, submitDisabled = false, submittedAnswers, generating = false, onSubmit, redactUserText, onSecretRedacted }) {
+export function QuestionsPanel({ form, interactive, submitDisabled, submittedAnswers, generating = false, onSubmit, redactUserText, onSecretRedacted }) {
     const t = useT();
     const formRef = useRef(null);
     const [ready, setReady] = useState(false);

package/dist/react/components/TodoCard.js

@@ -12,18 +12,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useT } from '../hooks/context.js';
 import { Icon } from './Icon.js';
-export function TodoCard({ todos, runStreaming = false, onDismiss }) {
+export function TodoCard({ todos, runStreaming, onDismiss }) {
     const t = useT();
-    const hasInProgress = todos.some((todo) => todo.status === 'in_progress');
-    const hasPending = todos.some((todo) => todo.status === 'pending' || todo.status === 'in_progress');
-    const defaultExpanded = todos.length > 0 && (hasInProgress || hasPending || runStreaming);
+    const { defaultExpanded, inProgressTodo, done, allComplete } = todoProgress({ todos }, { runStreaming });
     const [overrideExpanded, setOverrideExpanded] = useState(null);
     const expanded = overrideExpanded ?? defaultExpanded;
+    const showDismiss = Boolean(onDismiss) && allComplete;
+    return (_jsxs("div", { className: `op-card op-todo${expanded ? '' : ' op-todo-collapsed'}`, children: [_jsxs("div", { className: "op-card-head op-todo-head", children: [_jsxs("button", { type: "button", className: "op-todo-toggle", "aria-expanded": expanded, onClick: () => setOverrideExpanded(!expanded), title: expanded ? t('Collapse todos') : t('Expand todos'), children: [_jsx("span", { className: "op-icon", "aria-hidden": true, children: "\u2610" }), _jsx("span", { className: "op-title", children: t('Todos') }), _jsxs("span", { className: "op-meta", children: [done, "/", todos.length] }), !expanded && inProgressTodo ? _jsx("span", { className: "op-todo-current", children: todoLabel({ todo: inProgressTodo }) }) : null, _jsx("span", { className: "op-todo-chev", "aria-hidden": true, children: expanded ? _jsx(Icon, { name: "chevron-down", size: 11 }) : _jsx(Icon, { name: "chevron-right", size: 11 }) })] }), showDismiss ? (_jsx("button", { type: "button", className: "op-todo-done", onClick: () => onDismiss?.(), title: t('Dismiss'), children: t('Done') })) : null] }), _jsx("div", { className: `accordion-collapsible${expanded ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("ul", { className: "todo-list", children: todos.map((todo, i) => (_jsxs("li", { className: `todo-item todo-${todo.status}`, children: [_jsx("span", { className: "todo-check", "aria-hidden": true, children: todo.status === 'completed' ? '✓' : todo.status === 'in_progress' ? '◐' : todo.status === 'stopped' ? '!' : '○' }), _jsx("span", { className: "todo-text", children: todoLabel({ todo }) })] }, i))) }) }) })] }));
+}
+function todoProgress({ todos }, { runStreaming = false } = {}) {
+    const hasPending = todos.some((todo) => todo.status === 'pending' || todo.status === 'in_progress');
+    const defaultExpanded = todos.length > 0 && (hasPending || runStreaming);
     const inProgressTodo = todos.find((todo) => todo.status === 'in_progress');
     const completed = todos.filter((todo) => todo.status === 'completed').length;
     const done = todos.filter((todo) => todo.status === 'completed' || todo.status === 'in_progress').length;
     const allComplete = todos.length > 0 && completed === todos.length;
-    const showDismiss = Boolean(onDismiss) && allComplete;
-    return (_jsxs("div", { className: `op-card op-todo${expanded ? '' : ' op-todo-collapsed'}`, children: [_jsxs("div", { className: "op-card-head op-todo-head", children: [_jsxs("button", { type: "button", className: "op-todo-toggle", "aria-expanded": expanded, onClick: () => setOverrideExpanded(!expanded), title: expanded ? t('Collapse todos') : t('Expand todos'), children: [_jsx("span", { className: "op-icon", "aria-hidden": true, children: "\u2610" }), _jsx("span", { className: "op-title", children: t('Todos') }), _jsxs("span", { className: "op-meta", children: [done, "/", todos.length] }), !expanded && inProgressTodo ? _jsx("span", { className: "op-todo-current", children: inProgressTodo.activeForm || inProgressTodo.content }) : null, _jsx("span", { className: "op-todo-chev", "aria-hidden": true, children: expanded ? _jsx(Icon, { name: "chevron-down", size: 11 }) : _jsx(Icon, { name: "chevron-right", size: 11 }) })] }), showDismiss ? (_jsx("button", { type: "button", className: "op-todo-done", onClick: () => onDismiss?.(), title: t('Dismiss'), children: t('Done') })) : null] }), _jsx("div", { className: `accordion-collapsible${expanded ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("ul", { className: "todo-list", children: todos.map((todo, i) => (_jsxs("li", { className: `todo-item todo-${todo.status}`, children: [_jsx("span", { className: "todo-check", "aria-hidden": true, children: todo.status === 'completed' ? '✓' : todo.status === 'in_progress' ? '◐' : todo.status === 'stopped' ? '!' : '○' }), _jsx("span", { className: "todo-text", children: todo.status === 'in_progress' && todo.activeForm ? todo.activeForm : todo.content })] }, i))) }) }) })] }));
+    return { defaultExpanded, inProgressTodo, done, allComplete };
+}
+function todoLabel({ todo }, _options = {}) {
+    return todo.status === 'in_progress' && todo.activeForm ? todo.activeForm : todo.content;
 }
 //# sourceMappingURL=TodoCard.js.map

package/dist/react/components/ToolCallGroup.d.ts

@@ -2,11 +2,12 @@ import type { ReactNode } from 'react';
 import type { ToolDisplayRow } from '../tool-call-display.js';
 /**
  * One turn's tool cards folded into a single line ("Used 3 tools ▸") that opens on click — the
- * `toolCallDisplay: 'collapsed'` layout. Props in, JSX out; state and copy are in
- * `useToolCallGroup`.
+ * `toolCallDisplay: 'collapsed'` layout, or the compact failure notice in 'hidden'. The disclosure
+ * state lives in `useToolCallGroup`; copy uses the host's translator.
  */
-export declare function ToolCallGroup<Row extends ToolDisplayRow>({ rows, renderRow }: {
+export declare function ToolCallGroup<Row extends ToolDisplayRow>({ rows, renderRow, failureOnly }: {
     rows: readonly Row[];
+    failureOnly?: boolean;
     renderRow: (row: Row) => ReactNode;
 }): import("react").JSX.Element;
 //# sourceMappingURL=ToolCallGroup.d.ts.map

package/dist/react/components/ToolCallGroup.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useToolCallGroup } from './ToolCallGroup.hooks.js';
+import { useT } from '../hooks/context.js';
 import { Icon } from './Icon.js';
 /**
  * One turn's tool cards folded into a single line ("Used 3 tools ▸") that opens on click — the
- * `toolCallDisplay: 'collapsed'` layout. Props in, JSX out; state and copy are in
- * `useToolCallGroup`.
+ * `toolCallDisplay: 'collapsed'` layout, or the compact failure notice in 'hidden'. The disclosure
+ * state lives in `useToolCallGroup`; copy uses the host's translator.
  */
-export function ToolCallGroup({ rows, renderRow }) {
+export function ToolCallGroup({ rows, renderRow, failureOnly = false }) {
     const group = useToolCallGroup({ rows });
-    return (_jsxs("div", { className: "jini-tool-group", "data-failed": group.failed ? 'true' : undefined, children: [_jsxs("button", { type: "button", className: "jini-tool-group__toggle", "aria-expanded": group.open, onClick: group.toggle, children: [_jsx("span", { className: `jini-tool-group__label${group.running ? ' shimmer-text' : ''}`, children: group.label }), _jsx(Icon, { name: group.open ? 'chevron-down' : 'chevron-right', size: 12 })] }), group.open ? _jsx("div", { className: "jini-message-tools", children: rows.map(renderRow) }) : null] }));
+    const t = useT();
+    return (_jsxs("div", { className: "jini-tool-group", "data-failed": group.failed ? 'true' : undefined, children: [failureOnly ? _jsxs("span", { className: "jini-tool-group__label", children: [t('A step failed'), " "] }) : null, _jsxs("button", { type: "button", className: "jini-tool-group__toggle", "aria-expanded": group.open, onClick: group.toggle, children: [_jsx("span", { className: `jini-tool-group__label${group.running ? ' shimmer-text' : ''}`, children: failureOnly ? t('Show') : group.label }), _jsx(Icon, { name: group.open ? 'chevron-down' : 'chevron-right', size: 12 })] }), group.open ? _jsx("div", { className: "jini-message-tools", children: rows.map(renderRow) }) : null] }));
 }
 //# sourceMappingURL=ToolCallGroup.js.map

package/dist/react/components/ToolCard.js

@@ -27,14 +27,11 @@ import { Icon } from './Icon.js';
 import { TodoCard } from './TodoCard.js';
 /** A Jini registry tool id: dotted, lowercase, snake_case segments — `page.fill`, `daemon.db.vacuum`, `chat.send_message`. Never matches an agent-vendor tool name (`Bash`, `Write`, `mcp__jini__execute_delegated_tool`), which is the point — this is how a canonical delegated-tool event is told apart from everything else. */
 const JINI_TOOL_ID_PATTERN = /^[a-z][a-z_]*(\.[a-z][a-z_]*)+$/;
-const SEARCH_TOOLS_NAMES = new Set(['search_tools', 'mcp__jini__search_tools']);
-const DESCRIBE_TOOL_NAMES = new Set(['describe_tool', 'mcp__jini__describe_tool']);
 export function ToolCard({ use, result, runStreaming, runSucceeded, projectFileNames, onRequestOpenFile }) {
     const registry = useToolRendererRegistry();
     const name = use.name;
-    const isStreaming = runStreaming ?? false;
-    const isSucceeded = runSucceeded ?? false;
-    const content = renderToolCardBody(name, use, result, isStreaming, isSucceeded, { projectFileNames, onRequestOpenFile }, registry);
+    const card = { input: use.input, result: result, runStreaming: runStreaming ?? false, runSucceeded: runSucceeded ?? false };
+    const content = renderToolCardBody({ use, card, fileCtx: { projectFileNames, onRequestOpenFile }, registry });
     if (content === null)
         return null;
     // Tagged once here, at the single dispatch point every branch below funnels through, rather than
@@ -44,18 +41,42 @@ export function ToolCard({ use, result, runStreaming, runSucceeded, projectFileN
     // ambiguous the way a repeated literal handle would be.
     return (_jsx("div", { "data-agent-element": `tool-call-${use.id}`, "data-agent-role": "region", "data-agent-label": `A ${humanizeToolId(name)} tool call the AI made`, children: content }));
 }
-function renderToolCardBody(name, use, result, isStreaming, isSucceeded, fileCtx, registry) {
-    const custom = registry.get({ name });
-    if (custom) {
-        try {
-            const node = custom(toRenderProps({ use: use, result: result, runStreaming: isStreaming }, { runSucceeded: isSucceeded }));
-            if (node !== undefined && node !== null && node !== false)
-                return node;
-        }
-        catch (err) {
-            console.error(`[ToolCard] custom renderer for "${name}" threw; falling back`, err);
-        }
+// Hardcoded family cards for tools shipped with this package, keyed by every name each tool goes
+// by. A `Map`, not an object literal, so a tool named `constructor`/`toString` can never resolve
+// to an inherited `Object.prototype` member.
+const FAMILY_CARDS = new Map([
+    [['Write', 'write', 'create_file'], (card, fileCtx) => _jsx(FileWriteCard, { ...card, ctx: fileCtx })],
+    [['Edit', 'str_replace_edit'], (card, fileCtx) => _jsx(FileEditCard, { ...card, ctx: fileCtx })],
+    [['Read', 'read_file'], (card, fileCtx) => _jsx(FileReadCard, { ...card, ctx: fileCtx })],
+    [['Bash'], (card) => _jsx(BashCard, { ...card })],
+    [['Glob', 'list_files'], (card) => _jsx(GlobCard, { ...card })],
+    [['Grep'], (card) => _jsx(GrepCard, { ...card })],
+    [['WebFetch', 'web_fetch'], (card) => _jsx(WebFetchCard, { ...card })],
+    [['WebSearch', 'web_search'], (card) => _jsx(WebSearchCard, { ...card })],
+    [['search_tools', 'mcp__jini__search_tools'], (card) => _jsx(SearchToolsCard, { ...card })],
+    [['describe_tool', 'mcp__jini__describe_tool'], (card) => _jsx(DescribeToolCard, { ...card })],
+].flatMap(([names, render]) => names.map((name) => [name, render])));
+/** A host-registered renderer's output, or `undefined` when none is registered, it renders nothing, or it throws (logged) — every one of those falls back to the built-in cards. */
+function renderRegistered({ use, card, registry }) {
+    const custom = registry.get({ name: use.name });
+    if (!custom)
+        return undefined;
+    try {
+        const node = custom(toRenderProps({ use: use, result: card.result, runStreaming: card.runStreaming }, { runSucceeded: card.runSucceeded }));
+        if (node !== undefined && node !== null && node !== false)
+            return node;
+    }
+    catch (err) {
+        console.error(`[ToolCard] custom renderer for "${use.name}" threw; falling back`, err);
     }
+    return undefined;
+}
+function renderToolCardBody(args) {
+    const custom = renderRegistered(args);
+    if (custom !== undefined)
+        return custom;
+    const { use, card, fileCtx } = args;
+    const name = use.name;
     // `execute_delegated_tool` is a transport wrapper: `@jini-ai/daemon`'s `delegated-tool-bridge.ts`
     // always emits a second, canonical `tool_use` named after the real Jini tool id (`page.fill`,
     // not `execute_delegated_tool`) alongside it — before calling `ToolExecutor`, so it exists even
@@ -68,37 +89,23 @@ function renderToolCardBody(name, use, result, isStreaming, isSucceeded, fileCtx
     // `useToolTimeline`: `foldDelegatedWrapperCalls` drops it in favour of that canonical row. This
     // check still covers a host that renders `<ToolCard>` straight from raw events.)
     // Covers the read-only gateway (`execute_readonly_delegated_tool`) too.
-    if (isDelegatedWrapperToolName({ name: name }) && result && !result.isError)
+    if (isDelegatedWrapperToolName({ name: name }) && card.result && !card.result.isError)
         return null;
     if (isTodoWriteToolName({ name: name }))
-        return _jsx(TodoCard, { todos: parseTodoWriteInput({ input: use.input }), runStreaming: isStreaming });
-    if (name === 'Write' || name === 'write' || name === 'create_file')
-        return _jsx(FileWriteCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Edit' || name === 'str_replace_edit')
-        return _jsx(FileEditCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Read' || name === 'read_file')
-        return _jsx(FileReadCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Bash')
-        return _jsx(BashCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'Glob' || name === 'list_files')
-        return _jsx(GlobCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'Grep')
-        return _jsx(GrepCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'WebFetch' || name === 'web_fetch')
-        return _jsx(WebFetchCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'WebSearch' || name === 'web_search')
-        return _jsx(WebSearchCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+        return _jsx(TodoCard, { todos: parseTodoWriteInput({ input: use.input }), runStreaming: card.runStreaming });
+    // Jini tool ids are dotted and wrapper names are `execute_*delegated_tool`, so neither ever
+    // collides with a family name — the search/describe cards can sit in the same table as the rest
+    // even though they are looked up ahead of the Jini-id check below.
+    const family = FAMILY_CARDS.get(name);
+    if (family)
+        return family(card, fileCtx);
     if (JINI_TOOL_ID_PATTERN.test(name) || isDelegatedWrapperToolName({ name: name })) {
         // The unsuppressed (failed-wrapper) case falls through here too: `name` is still
         // `execute_delegated_tool`, so `jiniToolIdFromInput` recovers the real id from
         // `{toolId, input}` instead of `DelegatedToolCard` receiving its own wrapper name as the title.
-        return _jsx(DelegatedToolCard, { name: name, input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+        return _jsx(DelegatedToolCard, { name: name, ...card });
     }
-    if (SEARCH_TOOLS_NAMES.has(name))
-        return _jsx(SearchToolsCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (DESCRIBE_TOOL_NAMES.has(name))
-        return _jsx(DescribeToolCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    return _jsx(GenericCard, { name: name, input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+    return _jsx(GenericCard, { name: name, ...card });
 }
 /** `"page.fill"` -> `"Page Fill"`, `"daemon.db.vacuum"` -> `"Daemon Db Vacuum"`. Cosmetic only — never used to make a routing decision. */
 function humanizeToolId(id) {

package/dist/react/components/composer-discovery.js

@@ -9,8 +9,13 @@ export function parseComposerSlashQuery({ draft }) {
     const match = SLASH_QUERY_RE.exec(draft);
     if (!match)
         return null;
+    // The `as string` casts are guaranteed by SLASH_QUERY_RE itself, not assumed: group 1 is a bare
+    // `*` capture outside any optional group, so it always participates (possibly as ''); group 3 is
+    // `*` inside the same optional group as group 2, so it participates whenever a separator does.
+    // `noUncheckedIndexedAccess` cannot see either guarantee, and the `?? ''` fallbacks that used to
+    // satisfy it were unreachable branches.
     const [, command, separator, rest] = match;
-    return { command: command ?? '', argument: separator === undefined ? null : (rest ?? '') };
+    return { command: command, argument: separator === undefined ? null : rest };
 }
 /**
  * Once a separator has been typed, only an item whose declared `command` exactly equals the typed

package/dist/react/components/mcp-ui-surface-state.d.ts

@@ -1,10 +1,3 @@
-/**
- * @module components/mcp-ui-surface-state
- *
- * Whether an MCP-UI card in a chat transcript is closed, and with which label. Kept out of
- * `McpUiSurfaceCard.tsx` so the component only renders; moved here from that file 2026-10-04 when
- * the card's own deadline (`useSurfaceExpiry`) became a second reason to close it.
- */
 import type { McpUiToolCallHandler } from '@jini-ai/ui/mcp-ui';
 import type { ExtEventCall } from '../ext-event-renderer-registry.js';
 import type { useT } from '../hooks/context.js';
@@ -35,14 +28,16 @@ export declare function closedSurfaceLabel({ t, call, runStreaming, documentsFor
 export declare function isDeliveredAnswer(result: unknown): boolean;
 /**
  * Wraps a card's tool executor so a delivered answer is reported once it resolves. The result is
- * passed through unchanged, and a rejected call reports nothing (the dialog shows its error and can
- * be answered again).
+ * passed through unchanged; onAnswerText receives readable choice text when available. A rejected call
+ * reports nothing (the dialog shows its error and can be answered again).
  *
- * @complexity O(1) per call, plus `onToolCall`'s own cost.
+ * @complexity O(p + s*m) answer-label mapping, plus `onToolCall`'s own cost (see questionAnswerText).
  */
-export declare function reportDeliveredAnswer({ onToolCall, onAnswered }: {
+export declare function reportDeliveredAnswer({ onToolCall, onAnswered, onAnswerText, input }: {
     onToolCall: McpUiToolCallHandler;
     onAnswered: () => void;
+    onAnswerText?: ((answerText: string) => void) | undefined;
+    input?: unknown;
 }): McpUiToolCallHandler;
 export {};
 //# sourceMappingURL=mcp-ui-surface-state.d.ts.map