hazo_collab_forms 2.2.7 → 3.0.1

package/dist/components/hazo_fb_form/views/front_office_view.js

@@ -0,0 +1,1097 @@
+/**
+ * Front Office View - Client-facing questions with file_textbox fields.
+ * Supports + icons for adding fields/groups when callbacks are provided.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import { useFbFormContext } from '../context.js';
+import { normalize_file_textbox_value } from '../../../types/file_textbox.js';
+import { HazoCollabFormFileTextbox } from '../../hazo_collab_form_file_textbox/index.js';
+import { PdfSidePanel } from '../shared/pdf_side_panel.js';
+import { CollabFormAddFieldIcon } from '../../hazo_collab_form_base.js';
+import { ClarificationSection } from '../../clarification/clarification_section.js';
+import { SummaryReviewView } from './summary_review_view.js';
+import { HazoUiDialog } from 'hazo_ui';
+import { HiCheckCircle, HiExclamationCircle, HiChevronRight } from 'react-icons/hi';
+import { rule_to_fb_execution } from '../../../utils/rule_to_execution.js';
+import { FrontOfficeStepper } from '../components/front_office_stepper.js';
+import { is_fb_terminal_status } from '../../../types/fb_form_instance.js';
+// Lazy-load HazoAddFieldDialog to avoid pulling dnd-kit into the initial chunk
+const LazyAddFieldDialog = React.lazy(() => import('../../hazo_add_field_dialog/hazo_add_field_dialog.js').then(mod => ({ default: mod.HazoAddFieldDialog })));
+const LazyAddGroupDialog = React.lazy(() => import('../../hazo_add_group_dialog/hazo_add_group_dialog.js').then(mod => ({ default: mod.HazoAddGroupDialog })));
+export function FrontOfficeView() {
+    const { props, classification_results, trigger_classify_file, classifying_file_ids, queued_file_ids, autofilling_file_ids, sent_clarifications, active_instance, is_multi_instance, all_clarifications, pending_clarification_responses, set_pending_clarification_responses, file_validation_results, set_file_validation_results, validating_file_ids, set_validating_file_ids, draft_clarifications, } = useFbFormContext();
+    const { front_sections, front_form_data, on_front_change, field_textbox_configs, file_manager } = props;
+    const { on_add_front_field, on_add_front_group } = props;
+    const show_tags = props.show_classification_tags !== false; // default true
+    const can_add_fields = !!on_add_front_field;
+    const can_add_groups = !!on_add_front_group;
+    const [viewed_file, set_viewed_file] = useState(null);
+    const [PdfViewerComponent, set_pdf_viewer] = useState(null);
+    // Add field dialog state
+    const [add_field_open, set_add_field_open] = useState(false);
+    const [add_field_after_id, set_add_field_after_id] = useState('');
+    // Add group dialog state
+    const [add_group_open, set_add_group_open] = useState(false);
+    const [add_group_after_id, set_add_group_after_id] = useState('');
+    // Validation detail dialog state
+    const [validation_detail_file_id, set_validation_detail_file_id] = useState(null);
+    // Stepper state
+    const use_stepper = props.front_office_stepper !== false;
+    const is_past_instance = active_instance ? is_fb_terminal_status(active_instance.status) : false;
+    const [active_front_step, set_active_front_step] = useState(0);
+    const [completed_steps, set_completed_steps] = useState(new Set());
+    const [front_submitted, set_front_submitted] = useState(false);
+    const is_front_read_only = front_submitted || is_past_instance;
+    // Response validation state keyed by clarification_id
+    const [response_validations, set_response_validations] = useState({});
+    // Pipeline step tracking per file_id (for 3-step response validation flow)
+    const [file_pipeline_steps, set_file_pipeline_steps] = useState({});
+    // Cached prompt template for response validation
+    const response_validation_prompt_ref = useRef(null);
+    const prompt_fetch_promise_ref = useRef(null);
+    // Guard: in-flight validation per clarification_id (prevents concurrent calls)
+    const validating_ids_ref = useRef(new Set());
+    // Ref to current front_form_data to avoid stale closures in async callbacks
+    const front_form_data_ref = useRef(front_form_data);
+    front_form_data_ref.current = front_form_data;
+    // Lazy-load PdfViewer from hazo_pdf
+    useEffect(() => {
+        let cancelled = false;
+        import(/* webpackIgnore: true */ 'hazo_pdf')
+            .then((mod) => {
+            if (!cancelled && mod.PdfViewer)
+                set_pdf_viewer(() => mod.PdfViewer);
+        })
+            .catch(() => { });
+        return () => { cancelled = true; };
+    }, []);
+    // ── Immediate validation on file upload ──
+    const has_validation_pipeline = !!props.validation_api_endpoint && (props.validation_rules?.length ?? 0) > 0;
+    const has_classification_pipeline = !!props.llm_api_endpoint && !!field_textbox_configs;
+    // Trigger immediate validation for a single file
+    const trigger_validate_file = useCallback(async (field_id, attachment) => {
+        console.log('[trigger_validate_file] Called:', {
+            field_id,
+            file_name: attachment.file_name,
+            has_endpoint: !!props.validation_api_endpoint,
+            rules_count: props.validation_rules?.length ?? 0,
+        });
+        if (!props.validation_api_endpoint || !props.validation_rules?.length) {
+            console.log('[trigger_validate_file] Skipping — no endpoint or rules');
+            return;
+        }
+        // Check for unsupported file types (images, video, audio)
+        const mime = attachment.mime_type?.toLowerCase() ?? '';
+        if (mime.startsWith('image/') || mime.startsWith('video/') || mime.startsWith('audio/')) {
+            const type_label = mime.startsWith('image/') ? 'image' : mime.startsWith('video/') ? 'video' : 'audio';
+            set_file_validation_results(prev => ({
+                ...prev,
+                [attachment.file_id]: {
+                    file_id: attachment.file_id,
+                    file_name: attachment.file_name,
+                    status: 'failed',
+                    errors: [],
+                    document_types: [],
+                    failure_reason: `This file type (${mime}) cannot be validated. Only PDF and text-based documents are supported for automated validation.`,
+                },
+            }));
+            // Update pipeline step if in a pipeline
+            set_file_pipeline_steps(prev => {
+                const steps = prev[attachment.file_id];
+                if (!steps)
+                    return prev;
+                return {
+                    ...prev,
+                    [attachment.file_id]: steps.map(s => s.id === 'doc_type_validation'
+                        ? { ...s, status: 'failed', error: `Unsupported ${type_label} file type for validation` }
+                        : s),
+                };
+            });
+            return;
+        }
+        // Only run rules with check_type 'immediate' or unset (backward compat)
+        const rules = props.validation_rules.filter(r => r.enabled && (!r.check_type || r.check_type === 'immediate'));
+        console.log('[trigger_validate_file] Filtered rules:', rules.length, 'from', props.validation_rules.length);
+        if (rules.length === 0) {
+            console.log('[trigger_validate_file] No matching rules, returning');
+            return;
+        }
+        // Mark as validating
+        set_validating_file_ids(prev => { const s = new Set(prev); s.add(attachment.file_id); return s; });
+        try {
+            const download_url = file_manager?.callbacks?.get_download_url?.(attachment.file_id, 'public') ?? '';
+            const rules_to_execute = rules.map(rule_to_fb_execution);
+            console.log('[trigger_validate_file] POSTing to', props.validation_api_endpoint, 'with', rules_to_execute.length, 'rules');
+            const response = await fetch(props.validation_api_endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_name: attachment.file_name,
+                    mime_type: attachment.mime_type,
+                    download_url,
+                    rules: rules_to_execute,
+                }),
+            });
+            const result = await response.json();
+            // Enrich clarification doc_references with actual file_id
+            const enriched_clarifications = (result.clarifications ?? []).map(c => ({
+                ...c,
+                doc_references: c.doc_references.map(ref => ({
+                    ...ref,
+                    file_id: ref.file_id || attachment.file_id,
+                })),
+            }));
+            // Enrich rule_results with human-readable rule names
+            const rule_name_lookup = new Map(rules.map(r => [r.rule_id, r.name]));
+            const enriched_rule_results = result.rule_results?.map(rr => ({
+                ...rr,
+                rule_name: rr.rule_name ?? rule_name_lookup.get(rr.rule_id),
+            }));
+            // Store as FbFileValidationResult → auto-populates draft_clarifications via useEffect in use_fb_form_state
+            // Merge with existing rule_results AND errors (e.g., response validation) rather than replacing
+            set_file_validation_results(prev => {
+                const existing = prev[attachment.file_id];
+                const existing_rule_results = existing?.rule_results ?? [];
+                // Keep prior rule_results that aren't being re-run (e.g., response_validation)
+                const new_rule_ids = new Set(enriched_rule_results?.map(r => r.rule_id) ?? []);
+                const kept_prior = existing_rule_results.filter(r => !new_rule_ids.has(r.rule_id));
+                // Keep prior errors from earlier pipeline steps (e.g., response validation clarifications)
+                const new_error_ids = new Set(enriched_clarifications.map((c) => c.id));
+                const kept_errors = (existing?.errors ?? []).filter((c) => !new_error_ids.has(c.id));
+                const merged_errors = [...kept_errors, ...enriched_clarifications];
+                return {
+                    ...prev,
+                    [attachment.file_id]: {
+                        file_id: attachment.file_id,
+                        file_name: attachment.file_name,
+                        status: merged_errors.length > 0 ? 'failed' : (kept_prior.some(r => r.has_issue) ? 'failed' : 'passed'),
+                        errors: merged_errors,
+                        document_types: existing?.document_types ?? [],
+                        rule_results: [...kept_prior, ...(enriched_rule_results ?? [])],
+                    },
+                };
+            });
+        }
+        catch (err) {
+            console.error('[FrontOfficeView] Immediate validation failed:', err);
+            set_file_validation_results(prev => ({
+                ...prev,
+                [attachment.file_id]: {
+                    file_id: attachment.file_id,
+                    file_name: attachment.file_name,
+                    status: 'failed',
+                    errors: [],
+                    document_types: [],
+                },
+            }));
+        }
+        finally {
+            set_validating_file_ids(prev => { const s = new Set(prev); s.delete(attachment.file_id); return s; });
+        }
+    }, [props.validation_api_endpoint, props.validation_rules, file_manager, set_validating_file_ids, set_file_validation_results]);
+    // Track known file IDs to auto-trigger immediate validation on newly uploaded files
+    const known_file_ids_ref = useRef(new Set());
+    // Seed known file IDs from initial form data (avoids validating pre-existing files)
+    useEffect(() => {
+        const ids = new Set();
+        for (const [, value] of Object.entries(front_form_data)) {
+            const blocks = normalize_file_textbox_value(value);
+            for (const b of blocks) {
+                if (b.type === 'file' && b.attachment?.file_id)
+                    ids.add(b.attachment.file_id);
+            }
+        }
+        known_file_ids_ref.current = ids;
+    }, []); // Only on mount
+    // Detect new file blocks and auto-trigger classification + validation
+    useEffect(() => {
+        if (!has_validation_pipeline && !has_classification_pipeline)
+            return;
+        for (const section of front_sections) {
+            for (const group of section.groups ?? []) {
+                for (const field of group.fields ?? []) {
+                    const blocks = normalize_file_textbox_value(front_form_data[field.id]);
+                    for (const b of blocks) {
+                        if (b.type === 'file' && b.attachment?.file_id && !known_file_ids_ref.current.has(b.attachment.file_id)) {
+                            known_file_ids_ref.current.add(b.attachment.file_id);
+                            if (has_classification_pipeline) {
+                                // Full pipeline: classify → validate → route to back office
+                                trigger_classify_file(field.id, b.attachment.file_id, b.attachment.file_name);
+                            }
+                            else if (has_validation_pipeline) {
+                                // Validation only (no classification configured)
+                                trigger_validate_file(field.id, b.attachment);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }, [front_form_data, front_sections, has_validation_pipeline, has_classification_pipeline, trigger_validate_file, trigger_classify_file]);
+    const handle_field_change = useCallback((field_id) => (value) => {
+        on_front_change?.(field_id, value);
+    }, [on_front_change]);
+    const handle_file_view = useCallback((attachment) => {
+        set_viewed_file((prev) => prev?.file_id === attachment.file_id ? null : attachment);
+    }, []);
+    const handle_classify_file = useCallback((field_id, attachment) => {
+        trigger_classify_file(field_id, attachment.file_id, attachment.file_name);
+    }, [trigger_classify_file]);
+    // ── Response validation helpers ──
+    /** Fetch and cache the clarification response validation prompt template */
+    const get_response_validation_prompt = useCallback(async () => {
+        if (response_validation_prompt_ref.current)
+            return response_validation_prompt_ref.current;
+        if (prompt_fetch_promise_ref.current)
+            return prompt_fetch_promise_ref.current;
+        const prompts_endpoint = props.prompts_api_endpoint;
+        if (!prompts_endpoint)
+            return null;
+        prompt_fetch_promise_ref.current = (async () => {
+            try {
+                const res = await fetch(`${prompts_endpoint}/clarification/validate_response`);
+                if (!res.ok)
+                    return null;
+                const data = await res.json();
+                const text = data?.data?.prompt_text_full ?? data?.prompt_text_full ?? null;
+                if (text)
+                    response_validation_prompt_ref.current = text;
+                return text;
+            }
+            catch (err) {
+                console.error('[FrontOfficeView] Failed to fetch response validation prompt:', err);
+                return null;
+            }
+        })();
+        return prompt_fetch_promise_ref.current;
+    }, [props.prompts_api_endpoint]);
+    /** Validate clarification response files against the prompt template.
+     *  When multiple files: sends batch mode so LLM evaluates them collectively.
+     *  When single file: sends single mode (backward compatible). */
+    const validate_response_batch = useCallback(async (item, response) => {
+        const validation_endpoint = props.validation_api_endpoint;
+        if (!validation_endpoint || !response.response_files?.length)
+            return { passed: true };
+        try {
+            const template = await get_response_validation_prompt();
+            if (!template)
+                return { passed: true }; // No prompt configured, skip
+            const variables = {
+                issue_description: item.issue_description || '',
+                validation_details: item.validation_details || '',
+                response_choice: response.response_choice || '',
+            };
+            let prompt = template;
+            for (const [key, value] of Object.entries(variables)) {
+                prompt = prompt.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), value);
+            }
+            const attachments = response.response_files;
+            const is_batch = attachments.length > 1;
+            // Build request body
+            const files = attachments.map(att => ({
+                file_id: att.file_id,
+                file_name: att.file_name,
+                mime_type: att.mime_type,
+                download_url: file_manager?.callbacks?.get_download_url?.(att.file_id, 'public') ?? '',
+            }));
+            const body = {
+                file_name: files[0].file_name,
+                mime_type: files[0].mime_type,
+                rules: [{
+                        rule_id: 'response_validation',
+                        name: 'Response Validation',
+                        prompt,
+                        target_field_id: item.target_field_id,
+                        target_label: item.target_label,
+                        clarification_type: 'invalid_document',
+                    }],
+                variables,
+            };
+            if (is_batch) {
+                body.mode = 'batch';
+                body.files = files;
+            }
+            else {
+                body.download_url = files[0].download_url;
+            }
+            const res = await fetch(validation_endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            const result = await res.json();
+            const rule_result = result.rule_results?.[0];
+            const passed = !rule_result?.has_issue;
+            // Enrich clarification doc_references with actual file_ids
+            const clarifications = (result.clarifications ?? []).map((c) => ({
+                ...c,
+                doc_references: c.doc_references.map((ref, idx) => ({
+                    ...ref,
+                    file_id: ref.file_id || attachments[idx]?.file_id || attachments[0]?.file_id || '',
+                })),
+            }));
+            // Use issue_description when failed, or raw_response parsed validation_details when passed
+            let details = rule_result?.issue_description;
+            if (!details && rule_result?.raw_response) {
+                try {
+                    const raw = typeof rule_result.raw_response === 'string' ? JSON.parse(rule_result.raw_response) : rule_result.raw_response;
+                    details = raw?.validation_details;
+                }
+                catch { /* ignore parse errors */ }
+            }
+            return { passed, details, rule_result, clarifications };
+        }
+        catch (err) {
+            console.error('[FrontOfficeView] Response batch validation error:', err);
+            return { passed: false, details: err instanceof Error ? err.message : 'Validation request failed' };
+        }
+    }, [props.validation_api_endpoint, get_response_validation_prompt, file_manager]);
+    /** Helper to update a single pipeline step for a file */
+    const update_pipeline_step = useCallback((file_id, step_id, update) => {
+        set_file_pipeline_steps(prev => {
+            const steps = prev[file_id];
+            if (!steps)
+                return prev;
+            return {
+                ...prev,
+                [file_id]: steps.map(s => s.id === step_id ? { ...s, ...update } : s),
+            };
+        });
+    }, []);
+    /** Validate all files in a clarification response.
+     *  3-step pipeline: Response Validation → Classification → Doc Type Validation.
+     *  Stores per-file results in file_validation_results (for file bar badges + dialog). */
+    const validate_clarification_response = useCallback(async (clarification_id, item, response) => {
+        if (!response.response_files?.length)
+            return true;
+        // Guard against concurrent validation for the same clarification
+        if (validating_ids_ref.current.has(clarification_id))
+            return false;
+        validating_ids_ref.current.add(clarification_id);
+        set_response_validations(prev => ({
+            ...prev,
+            [clarification_id]: { status: 'validating' },
+        }));
+        // Initialize 3-step pipeline for each response file
+        for (const att of response.response_files) {
+            set_validating_file_ids(prev => { const s = new Set(prev); s.add(att.file_id); return s; });
+            set_file_validation_results(prev => ({
+                ...prev,
+                [att.file_id]: {
+                    file_id: att.file_id,
+                    file_name: att.file_name,
+                    status: 'validating',
+                    errors: [],
+                    document_types: [],
+                    rule_results: [],
+                },
+            }));
+            set_file_pipeline_steps(prev => ({
+                ...prev,
+                [att.file_id]: [
+                    { id: 'response_validation', label: 'Response Validation', status: 'running' },
+                    { id: 'classification', label: 'Document Classification', status: 'pending' },
+                    { id: 'doc_type_validation', label: 'Document Type Validation', status: 'pending' },
+                ],
+            }));
+        }
+        try {
+            const all_details = [];
+            // ── Step 1: Response Validation (batch — all files evaluated collectively) ──
+            console.log('[ResponsePipeline] Step 1: Response Validation (batch) for', response.response_files.length, 'files');
+            const batch_result = await validate_response_batch(item, response);
+            console.log('[ResponsePipeline] Step 1 batch result:', { passed: batch_result.passed, details: batch_result.details?.substring(0, 100) });
+            // Apply batch result to ALL files uniformly
+            for (const att of response.response_files) {
+                update_pipeline_step(att.file_id, 'response_validation', {
+                    status: batch_result.passed ? 'passed' : 'failed',
+                    details: batch_result.details,
+                    error: batch_result.passed ? undefined : batch_result.details,
+                });
+                // Store per-file result — clarifications only on the first file to avoid duplicates
+                const is_first = att.file_id === response.response_files[0].file_id;
+                set_file_validation_results(prev => ({
+                    ...prev,
+                    [att.file_id]: {
+                        file_id: att.file_id,
+                        file_name: att.file_name,
+                        status: batch_result.passed ? 'passed' : 'failed',
+                        errors: is_first ? (batch_result.clarifications ?? []) : [],
+                        document_types: [],
+                        rule_results: batch_result.rule_result ? [{
+                                ...batch_result.rule_result,
+                                rule_name: 'Response Validation',
+                            }] : [],
+                    },
+                }));
+                if (!batch_result.passed) {
+                    update_pipeline_step(att.file_id, 'classification', { status: 'skipped' });
+                    update_pipeline_step(att.file_id, 'doc_type_validation', { status: 'skipped' });
+                    set_validating_file_ids(prev => { const s = new Set(prev); s.delete(att.file_id); return s; });
+                }
+            }
+            if (batch_result.details) {
+                all_details.push(batch_result.details);
+            }
+            if (!batch_result.passed) {
+                set_response_validations(prev => ({
+                    ...prev,
+                    [clarification_id]: {
+                        status: 'failed',
+                        error: batch_result.details || 'Response validation failed',
+                    },
+                }));
+                return false;
+            }
+            // ── Step 2: Classification → Step 3: Validation ──
+            // trigger_classify_file needs a field_textbox_config. Resolve the source field_id
+            // from the clarification's doc_references (the original field the file belongs to).
+            const source_field_id = item.doc_references?.[0]?.source_field_id;
+            const classify_field_id = source_field_id && field_textbox_configs?.[source_field_id]
+                ? source_field_id
+                : Object.keys(field_textbox_configs ?? {})[0]; // fallback to first field
+            const can_classify = has_classification_pipeline && !!classify_field_id && !!field_textbox_configs?.[classify_field_id];
+            for (const att of response.response_files) {
+                if (can_classify) {
+                    // Classification → validation (trigger_classify_file chains to validation internally)
+                    update_pipeline_step(att.file_id, 'classification', { status: 'running' });
+                    trigger_classify_file(classify_field_id, att.file_id, att.file_name);
+                }
+                else if (has_validation_pipeline) {
+                    // No classification config — skip to validation
+                    update_pipeline_step(att.file_id, 'classification', { status: 'skipped' });
+                    update_pipeline_step(att.file_id, 'doc_type_validation', { status: 'running' });
+                    trigger_validate_file(item.target_field_id, att);
+                }
+                else {
+                    update_pipeline_step(att.file_id, 'classification', { status: 'skipped' });
+                    update_pipeline_step(att.file_id, 'doc_type_validation', { status: 'skipped' });
+                    set_validating_file_ids(prev => { const s = new Set(prev); s.delete(att.file_id); return s; });
+                }
+            }
+            set_response_validations(prev => ({
+                ...prev,
+                [clarification_id]: {
+                    status: 'passed',
+                    message: all_details.length > 0 ? all_details.join('; ') : 'Response files validated',
+                },
+            }));
+            return true;
+        }
+        catch (err) {
+            // Clear validating state for all files on error
+            for (const att of (response.response_files ?? [])) {
+                set_validating_file_ids(prev => { const s = new Set(prev); s.delete(att.file_id); return s; });
+                // Mark all pending steps as failed
+                update_pipeline_step(att.file_id, 'response_validation', { status: 'failed', error: 'Pipeline error' });
+                update_pipeline_step(att.file_id, 'classification', { status: 'failed', error: 'Pipeline error' });
+                update_pipeline_step(att.file_id, 'doc_type_validation', { status: 'failed', error: 'Pipeline error' });
+            }
+            set_response_validations(prev => ({
+                ...prev,
+                [clarification_id]: {
+                    status: 'failed',
+                    error: err instanceof Error ? err.message : 'Validation failed',
+                },
+            }));
+            return false;
+        }
+        finally {
+            validating_ids_ref.current.delete(clarification_id);
+        }
+    }, [validate_response_batch, set_file_validation_results, set_validating_file_ids, has_validation_pipeline, has_classification_pipeline, trigger_validate_file, trigger_classify_file, update_pipeline_step, field_textbox_configs]);
+    // ── Reactive pipeline step updates based on classifying/validating state changes ──
+    useEffect(() => {
+        set_file_pipeline_steps(prev => {
+            let changed = false;
+            const next = { ...prev };
+            for (const [file_id, steps] of Object.entries(next)) {
+                const cls_step = steps.find(s => s.id === 'classification');
+                const val_step = steps.find(s => s.id === 'doc_type_validation');
+                // Classification finished → mark passed, validation will start via trigger_classify_file's internal chaining
+                if (cls_step?.status === 'running' && !classifying_file_ids.has(file_id)) {
+                    changed = true;
+                    next[file_id] = steps.map(s => {
+                        if (s.id === 'classification')
+                            return { ...s, status: 'passed', details: 'Document classified' };
+                        if (s.id === 'doc_type_validation' && s.status === 'pending')
+                            return { ...s, status: 'running' };
+                        return s;
+                    });
+                }
+                if (val_step?.status === 'running' && !validating_file_ids.has(file_id)) {
+                    // Validation finished — check result
+                    const vr = file_validation_results[file_id];
+                    changed = true;
+                    next[file_id] = steps.map(s => {
+                        if (s.id === 'doc_type_validation') {
+                            const passed = vr?.status === 'passed' || vr?.status === 'skipped';
+                            const checks_run = vr?.rule_results?.length ?? 0;
+                            const checks_failed = vr?.rule_results?.filter(r => r.has_issue).length ?? 0;
+                            return {
+                                ...s,
+                                status: (passed ? 'passed' : 'failed'),
+                                details: passed
+                                    ? `${checks_run} check${checks_run !== 1 ? 's' : ''} passed`
+                                    : `${checks_failed} of ${checks_run} check${checks_run !== 1 ? 's' : ''} failed`,
+                                error: !passed ? (vr?.failure_reason || undefined) : undefined,
+                            };
+                        }
+                        return s;
+                    });
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [classifying_file_ids, validating_file_ids, file_validation_results]);
+    const handle_open_add_field = useCallback((after_field_id) => {
+        set_add_field_after_id(after_field_id);
+        set_add_field_open(true);
+    }, []);
+    const handle_confirm_add_fields = useCallback((fields) => {
+        if (!on_add_front_field)
+            return;
+        for (const field of fields) {
+            on_add_front_field(add_field_after_id, field);
+        }
+    }, [on_add_front_field, add_field_after_id]);
+    const handle_open_add_group = useCallback((after_group_id) => {
+        set_add_group_after_id(after_group_id);
+        set_add_group_open(true);
+    }, []);
+    const handle_confirm_add_group = useCallback((group) => {
+        if (!on_add_front_group)
+            return;
+        on_add_front_group(add_group_after_id, group);
+    }, [on_add_front_group, add_group_after_id]);
+    // Build per-file tag maps from per-file classifications
+    const per_field_file_tags = useMemo(() => {
+        if (!show_tags)
+            return {};
+        const result = {};
+        for (const classification of classification_results) {
+            const config = field_textbox_configs?.[classification.field_id];
+            if (!classification.file_classifications)
+                continue;
+            const available_tags = config?.classification.available_tags ?? props.available_tags ?? [];
+            const file_map = {};
+            for (const fc of classification.file_classifications) {
+                const matched = available_tags
+                    .filter((t) => fc.tags.includes(t.tag_id))
+                    .map((t) => ({ id: t.tag_id, label: t.tag_label, color: t.color }));
+                if (matched.length > 0) {
+                    file_map[fc.file_id] = matched;
+                }
+                else {
+                    // File was classified but matched no tags — show "Unknown" with reason tooltip
+                    file_map[fc.file_id] = [{
+                            id: '__unknown',
+                            label: 'Unknown',
+                            color: 'bg-gray-100 text-gray-600',
+                            tooltip: fc.unclassified_reason || 'Could not match to any classification category',
+                        }];
+                }
+            }
+            if (Object.keys(file_map).length > 0) {
+                result[classification.field_id] = file_map;
+            }
+        }
+        return result;
+    }, [classification_results, field_textbox_configs, show_tags]);
+    // Build per-file classification metadata (document_date, document_nature)
+    const per_field_file_metadata = useMemo(() => {
+        if (!show_tags)
+            return {};
+        const result = {};
+        for (const classification of classification_results) {
+            if (!classification.file_classifications)
+                continue;
+            const meta_map = {};
+            for (const fc of classification.file_classifications) {
+                if (fc.document_date || fc.document_nature || fc.document_type?.length) {
+                    meta_map[fc.file_id] = {
+                        document_date: fc.document_date,
+                        document_nature: fc.document_nature,
+                        document_type: fc.document_type,
+                    };
+                }
+            }
+            if (Object.keys(meta_map).length > 0) {
+                result[classification.field_id] = meta_map;
+            }
+        }
+        return result;
+    }, [classification_results, show_tags]);
+    // Build set of responded/resolved clarification IDs (from both pending + sent)
+    const responded_clarification_ids = useMemo(() => {
+        const ids = new Set();
+        // From pending responses (not yet flushed)
+        for (const [clar_id, response] of pending_clarification_responses) {
+            if (response.response_choice)
+                ids.add(clar_id);
+        }
+        // From sent/flushed clarifications
+        for (const item of sent_clarifications) {
+            if (item.status === 'responded' || item.status === 'resolved') {
+                ids.add(item.id);
+            }
+        }
+        return ids;
+    }, [pending_clarification_responses, sent_clarifications]);
+    // Build per-file validation errors map from file_validation_results (all errors, including responded)
+    // — the chip needs all errors to show the response label; counting is handled separately
+    const per_file_validation_errors = useMemo(() => {
+        const result = {};
+        for (const [file_id, vr] of Object.entries(file_validation_results)) {
+            if (vr.errors && vr.errors.length > 0) {
+                result[file_id] = vr.errors;
+            }
+        }
+        return result;
+    }, [file_validation_results]);
+    // Set of file IDs that passed validation
+    const validated_file_ids = useMemo(() => {
+        const ids = new Set();
+        for (const [file_id, vr] of Object.entries(file_validation_results)) {
+            if (vr.status === 'passed')
+                ids.add(file_id);
+        }
+        return ids;
+    }, [file_validation_results]);
+    // Compute file response labels — only set when ALL errors for a file are responded to.
+    // Used by file chips to show "N Resolved" (amber) vs "N issues" (red).
+    const external_file_response_labels = useMemo(() => {
+        // Get ALL errors per file (including responded ones) from file_validation_results
+        const all_errors_by_file = {};
+        for (const [file_id, vr] of Object.entries(file_validation_results)) {
+            if (vr.errors && vr.errors.length > 0) {
+                all_errors_by_file[file_id] = vr.errors;
+            }
+        }
+        const labels = {};
+        for (const [file_id, errors] of Object.entries(all_errors_by_file)) {
+            // Check if ALL errors for this file have been responded to
+            const all_resolved = errors.every(e => responded_clarification_ids.has(e.id));
+            if (all_resolved) {
+                labels[file_id] = 'resolved';
+            }
+        }
+        return Object.keys(labels).length > 0 ? labels : undefined;
+    }, [file_validation_results, responded_clarification_ids]);
+    // Compute per-file pipeline status text from active running steps + classifying/validating state
+    const per_file_pipeline_status = useMemo(() => {
+        const result = {};
+        // Pipeline steps take priority
+        for (const [file_id, steps] of Object.entries(file_pipeline_steps)) {
+            const active = steps.find(s => s.status === 'running');
+            if (active) {
+                result[file_id] = `${active.label}...`;
+            }
+        }
+        // For non-pipeline files, show status from validating/classifying state (validating takes priority)
+        for (const file_id of validating_file_ids) {
+            if (!result[file_id]) {
+                result[file_id] = 'Validating document...';
+            }
+        }
+        for (const file_id of classifying_file_ids) {
+            if (!result[file_id]) {
+                result[file_id] = 'Classifying document...';
+            }
+        }
+        return result;
+    }, [file_pipeline_steps, classifying_file_ids, validating_file_ids]);
+    // Build set of backoffice-only rule IDs to exclude from front office display
+    const backoffice_rule_ids = useMemo(() => {
+        const ids = new Set();
+        for (const rule of props.validation_rules ?? []) {
+            if (rule.check_type === 'backoffice')
+                ids.add(rule.rule_id);
+        }
+        return ids;
+    }, [props.validation_rules]);
+    // Immediate validation clarifications enriched with any pending responses + sent responses
+    // so ClarificationSection cards reflect selections made in the inline file dialog (and vice versa)
+    // Excludes drafts from backoffice-only rules (those only appear in the Back Office tab)
+    const immediate_clarifications = useMemo(() => {
+        return draft_clarifications
+            .filter(item => !item.rule_id || !backoffice_rule_ids.has(item.rule_id))
+            .map(item => {
+            // Check pending responses first (not yet flushed)
+            const pending = pending_clarification_responses.get(item.id);
+            if (pending) {
+                return {
+                    ...item,
+                    status: pending.response_choice ? 'responded' : item.status,
+                    response_choice: pending.response_choice ?? item.response_choice,
+                    user_comment: pending.user_comment ?? item.user_comment,
+                    response_files: pending.response_files ?? item.response_files,
+                };
+            }
+            // Check sent/flushed clarifications for responses
+            const sent = sent_clarifications.find(c => c.id === item.id);
+            if (sent && (sent.status === 'responded' || sent.status === 'resolved')) {
+                return {
+                    ...item,
+                    status: sent.status,
+                    response_choice: sent.response_choice ?? item.response_choice,
+                    user_comment: sent.user_comment ?? item.user_comment,
+                    response_files: sent.response_files ?? item.response_files,
+                };
+            }
+            return item;
+        });
+    }, [draft_clarifications, pending_clarification_responses, sent_clarifications, backoffice_rule_ids]);
+    const immediate_clarification_counts = useMemo(() => {
+        const counts = { pending: 0, responded: 0, resolved: 0, dismissed: 0, total: 0 };
+        for (const item of immediate_clarifications) {
+            counts[item.status]++;
+            counts.total++;
+        }
+        return counts;
+    }, [immediate_clarifications]);
+    // Compute per-file validation details for built-in FileBar dialog
+    // Skip files where all checks failed and clarifications exist — those open ClarificationDialog via on_validation_click instead
+    const per_file_validation_details = useMemo(() => {
+        const result = {};
+        for (const [file_id, vr] of Object.entries(file_validation_results)) {
+            const rr = vr.rule_results ?? [];
+            const has_only_failures = rr.length > 0 && rr.every(r => r.has_issue);
+            if (has_only_failures) {
+                const has_clarifications = immediate_clarifications.some(item => item.doc_references?.some(r => r.file_id === file_id));
+                if (has_clarifications)
+                    continue; // Skip — ClarificationDialog handles this
+            }
+            const steps = file_pipeline_steps[file_id];
+            result[file_id] = {
+                file_name: vr.file_name,
+                overall_status: vr.status === 'passed' || vr.status === 'skipped' ? 'passed'
+                    : vr.status === 'validating' ? 'validating'
+                        : 'failed',
+                pipeline_steps: steps,
+                rule_results: vr.rule_results,
+                failure_reason: vr.failure_reason,
+            };
+        }
+        return result;
+    }, [file_validation_results, file_pipeline_steps, immediate_clarifications]);
+    // Per-file validation badges for clarification doc references
+    const file_validation_badges = useMemo(() => {
+        const badges = {};
+        for (const [file_id, vr] of Object.entries(file_validation_results)) {
+            if (validating_file_ids.has(file_id)) {
+                badges[file_id] = { state: 'validating' };
+            }
+            else if (vr.errors && vr.errors.length > 0) {
+                const all_responded = vr.errors.every(e => responded_clarification_ids.has(e.id));
+                if (all_responded) {
+                    badges[file_id] = { state: 'resolved', issue_count: vr.errors.length };
+                }
+                else {
+                    const pending_count = responded_clarification_ids.size > 0
+                        ? vr.errors.filter(e => !responded_clarification_ids.has(e.id)).length
+                        : vr.errors.length;
+                    badges[file_id] = { state: 'issues', issue_count: pending_count };
+                }
+            }
+            else if (vr.rule_results && vr.rule_results.some(r => r.has_issue)) {
+                const issue_count = vr.rule_results.filter(r => r.has_issue).length;
+                badges[file_id] = { state: 'issues', issue_count };
+            }
+            else if (vr.status === 'passed') {
+                badges[file_id] = { state: 'passed' };
+            }
+        }
+        return Object.keys(badges).length > 0 ? badges : undefined;
+    }, [file_validation_results, validating_file_ids, responded_clarification_ids]);
+    // Pending clarifications for Action Required section (only pending items)
+    // Enriched with any pending responses so the radio selection is retained after submission
+    const pending_clarifications = useMemo(() => {
+        return sent_clarifications
+            .filter((c) => c.status === 'pending' || c.status === 'responded')
+            .map(item => {
+            const pending = pending_clarification_responses.get(item.id);
+            if (pending) {
+                return {
+                    ...item,
+                    status: pending.response_choice ? 'responded' : item.status,
+                    response_choice: pending.response_choice ?? item.response_choice,
+                    user_comment: pending.user_comment ?? item.user_comment,
+                    response_files: pending.response_files ?? item.response_files,
+                };
+            }
+            return item;
+        });
+    }, [sent_clarifications, pending_clarification_responses]);
+    // Sourced clarifications: items prepared into this instance from other instances.
+    // Primary source: front_form_data.__clarifications (copied during prepare_for_client).
+    // Fallback: resolve from all_clarifications by sourced_clarification_ids.
+    // Enriched with pending responses so radio selection is retained after submission.
+    const sourced_clarifications = useMemo(() => {
+        if (!is_multi_instance || !active_instance)
+            return [];
+        // Direct source: items copied into this instance's front_form_data
+        const direct_items = Array.isArray(active_instance.front_form_data?.['__clarifications'])
+            ? active_instance.front_form_data['__clarifications']
+            : [];
+        let items;
+        if (direct_items.length > 0) {
+            items = direct_items;
+        }
+        else if (active_instance.sourced_clarification_ids?.length) {
+            // Fallback: resolve by sourced_clarification_ids from cross-instance aggregation
+            const sourced_ids = new Set(active_instance.sourced_clarification_ids);
+            items = all_clarifications.filter((c) => sourced_ids.has(c.id));
+        }
+        else {
+            return [];
+        }
+        // Enrich with pending responses
+        return items.map(item => {
+            const pending = pending_clarification_responses.get(item.id);
+            if (pending) {
+                return {
+                    ...item,
+                    status: pending.response_choice ? 'responded' : item.status,
+                    response_choice: pending.response_choice ?? item.response_choice,
+                    user_comment: pending.user_comment ?? item.user_comment,
+                    response_files: pending.response_files ?? item.response_files,
+                };
+            }
+            return item;
+        });
+    }, [is_multi_instance, active_instance, all_clarifications, pending_clarification_responses]);
+    const pending_counts = useMemo(() => {
+        const counts = { pending: 0, responded: 0, resolved: 0, dismissed: 0, total: 0 };
+        for (const item of pending_clarifications) {
+            counts[item.status]++;
+            counts.total++;
+        }
+        return counts;
+    }, [pending_clarifications]);
+    const handle_clarification_doc_click = useCallback((file_id) => {
+        // Find the attachment from clarification doc_references to reuse existing PDF viewer
+        for (const item of [...pending_clarifications, ...sourced_clarifications, ...immediate_clarifications]) {
+            const ref = item.doc_references?.find((r) => r.file_id === file_id);
+            if (ref) {
+                set_viewed_file({
+                    file_id: ref.file_id,
+                    file_name: ref.file_name,
+                    mime_type: ref.mime_type,
+                    file_size: 0,
+                    ref_id: '',
+                    visibility: 'public',
+                    attached_at: new Date().toISOString(),
+                });
+                return;
+            }
+        }
+    }, [pending_clarifications, sourced_clarifications, immediate_clarifications]);
+    // Stepper navigation
+    const go_next = useCallback(() => {
+        set_completed_steps(prev => { const s = new Set(prev); s.add(active_front_step); return s; });
+        set_active_front_step(prev => Math.min(prev + 1, 2));
+        set_viewed_file(null);
+    }, [active_front_step]);
+    const handle_step_click = useCallback((step) => {
+        // Mark all steps before the target as completed
+        set_completed_steps(prev => {
+            const s = new Set(prev);
+            for (let i = 0; i < step; i++)
+                s.add(i);
+            return s;
+        });
+        set_active_front_step(step);
+        set_viewed_file(null);
+    }, []);
+    // Stepper step definitions — badge shows only pending (unresolved) issues
+    const pending_validation_count = useMemo(() => immediate_clarifications.filter(c => c.status === 'pending').length, [immediate_clarifications]);
+    const stepper_steps = useMemo(() => [
+        { label: front_sections[0]?.section_name || 'Income & Expenses' },
+        { label: 'Clarifications', badge_count: pending_validation_count },
+        { label: 'Summary & Review' },
+    ], [front_sections, pending_validation_count]);
+    // Collect clarification responses locally (not flushed to back_form_data until submit)
+    // Also immediately inject response files into the file_textbox field so they appear in the form.
+    const handle_response_change = useCallback(async (id, response) => {
+        set_pending_clarification_responses(prev => {
+            const next = new Map(prev);
+            next.set(id, response);
+            return next;
+        });
+        // Reset response validation when files change
+        const prev_response = pending_clarification_responses.get(id);
+        const prev_file_count = prev_response?.response_files?.length ?? 0;
+        const new_file_count = response.response_files?.length ?? 0;
+        if (new_file_count === 0 || new_file_count !== prev_file_count) {
+            if (response_validations[id]) {
+                set_response_validations(prev => {
+                    const next = { ...prev };
+                    delete next[id];
+                    return next;
+                });
+            }
+        }
+        // Inject response files into the file_textbox field (with optional validation gate)
+        if (response.response_files && response.response_files.length > 0 && on_front_change && field_textbox_configs) {
+            // Find the clarification item — check sent, draft, sourced, and all clarifications
+            const all_items = [...(sent_clarifications ?? []), ...(draft_clarifications ?? []), ...(all_clarifications ?? [])];
+            const clar_item = all_items.find(item => item.id === id);
+            // Check if the selected option has shows_file_upload
+            const selected_option = clar_item?.response_options?.find(o => o.value === response.response_choice);
+            const is_file_response = selected_option?.shows_file_upload === true;
+            // Run response validation if endpoints are configured
+            if (is_file_response && clar_item && props.validation_api_endpoint && props.prompts_api_endpoint) {
+                const passed = await validate_clarification_response(id, clar_item, response);
+                if (!passed)
+                    return; // Don't inject files on failure
+            }
+            // File injection logic — use ref to avoid stale closure after async validation
+            const source_ref = clar_item?.doc_references?.[0];
+            const source_field_id = source_ref?.source_field_id;
+            const source_file_id = source_ref?.file_id;
+            const field_textbox_ids = Object.keys(field_textbox_configs);
+            const target_field_id = source_field_id && field_textbox_ids.includes(source_field_id)
+                ? source_field_id
+                : field_textbox_ids[0];
+            if (!target_field_id)
+                return;
+            const current_form_data = front_form_data_ref.current;
+            const existing_blocks = normalize_file_textbox_value(current_form_data[target_field_id]);
+            const existing_file_ids = new Set(existing_blocks.filter((b) => b.type === 'file')
+                .map(b => b.attachment.file_id));
+            // Build new file blocks, skipping duplicates
+            const new_file_blocks = response.response_files
+                .filter(att => !existing_file_ids.has(att.file_id))
+                .map(att => ({ type: 'file', attachment: att, replaces: source_file_id }));
+            if (new_file_blocks.length === 0)
+                return;
+            // Insert after the source file if found, else append
+            const updated_blocks = [...existing_blocks];
+            if (source_file_id) {
+                const source_idx = updated_blocks.findIndex(b => b.type === 'file' && b.attachment.file_id === source_file_id);
+                if (source_idx >= 0) {
+                    if (response.response_choice === 'replace_document') {
+                        const original = updated_blocks[source_idx];
+                        updated_blocks[source_idx] = { ...original, replaced_by: response.response_files[0].file_id };
+                    }
+                    updated_blocks.splice(source_idx + 1, 0, ...new_file_blocks);
+                }
+                else {
+                    updated_blocks.push(...new_file_blocks);
+                }
+            }
+            else {
+                updated_blocks.push(...new_file_blocks);
+            }
+            on_front_change(target_field_id, updated_blocks);
+        }
+    }, [set_pending_clarification_responses, on_front_change, field_textbox_configs, sent_clarifications, draft_clarifications, all_clarifications, pending_clarification_responses, response_validations, props.validation_api_endpoint, props.prompts_api_endpoint, validate_clarification_response]);
+    // Build PDF viewer URL
+    const viewed_file_url = useMemo(() => {
+        if (!viewed_file || !file_manager?.callbacks?.get_download_url)
+            return null;
+        return file_manager.callbacks.get_download_url(viewed_file.file_id, viewed_file.visibility);
+    }, [viewed_file, file_manager]);
+    // ── Step 0: Form fields content ──
+    const step_0_content = (_jsxs("div", { className: "space-y-6", children: [!is_multi_instance && pending_clarifications.length > 0 && (_jsx(ClarificationSection, { items: pending_clarifications, counts: pending_counts, callbacks: {}, hide_submit: true, on_response_change: handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status })), sourced_clarifications.length > 0 && (_jsxs("div", { className: "border border-amber-200/60 rounded-xl bg-card overflow-hidden", children: [_jsx("div", { className: "flex items-center gap-2 px-5 py-3 border-b border-amber-100/80", children: _jsx("h3", { className: "text-sm font-semibold text-amber-800", children: "Action Required" }) }), _jsx("div", { className: "p-5", children: _jsx(ClarificationSection, { items: sourced_clarifications, counts: {
+                                pending: sourced_clarifications.filter(c => c.status === 'pending').length,
+                                responded: sourced_clarifications.filter(c => c.status === 'responded').length,
+                                resolved: sourced_clarifications.filter(c => c.status === 'resolved').length,
+                                dismissed: sourced_clarifications.filter(c => c.status === 'dismissed').length,
+                                total: sourced_clarifications.length,
+                            }, callbacks: {}, hide_submit: true, on_response_change: handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_manager: file_manager?.callbacks, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status }) })] })), can_add_groups && front_sections.length === 0 && (_jsx(CollabFormAddFieldIcon, { field_id: "__empty_front", on_click: () => handle_open_add_group('__empty_front'), variant: "group" })), front_sections.map((section, si) => (_jsxs("div", { className: "border border-border/60 rounded-xl bg-card overflow-hidden", children: [section.section_name && (_jsx("div", { className: "px-5 pt-5 pb-3", children: _jsx("h3", { className: "text-base font-semibold text-foreground", children: section.section_name }) })), _jsxs("div", { className: "px-5 pb-5 space-y-5", children: [section.groups?.map((group, gi) => {
+                                const fields = group.fields || [];
+                                return (_jsxs(React.Fragment, { children: [can_add_groups && gi > 0 && (_jsx(CollabFormAddFieldIcon, { field_id: section.groups[gi - 1].id, on_click: () => handle_open_add_group(section.groups[gi - 1].id), variant: "group" })), _jsxs("div", { className: "space-y-3", children: [group.label && (_jsx("h4", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group.label })), group.label && fields.length > 0 && group.description && (_jsx("p", { className: "text-sm text-muted-foreground/70 -mt-1", children: group.description })), fields.map((field, fi) => {
+                                                    const available_tags = field_textbox_configs?.[field.id]?.classification.available_tags ?? props.available_tags ?? [];
+                                                    return (_jsxs(React.Fragment, { children: [can_add_fields && fi > 0 && (_jsx(CollabFormAddFieldIcon, { field_id: fields[fi - 1].id, on_click: () => handle_open_add_field(fields[fi - 1].id), variant: "field" })), _jsx("div", { children: _jsx(HazoCollabFormFileTextbox, { field_id: field.id, label: field.label, value: normalize_file_textbox_value(front_form_data[field.id]), onChange: handle_field_change(field.id), file_manager: file_manager?.callbacks, file_accept: field.file_accept, max_files: field.max_files, tag_options: show_tags ? available_tags.map((t) => t.tag_label) : undefined, classification_tags: show_tags ? per_field_file_tags[field.id] : undefined, classification_metadata: show_tags ? per_field_file_metadata[field.id] : undefined, classifying_file_ids: classifying_file_ids, queued_file_ids: queued_file_ids, autofilling_file_ids: autofilling_file_ids, on_classify_file: (attachment) => handle_classify_file(field.id, attachment), on_file_view: file_manager ? handle_file_view : undefined, placeholder: field.placeholder, validation_errors: per_file_validation_errors, validating_file_ids: validating_file_ids, validated_file_ids: validated_file_ids, on_validation_response: handle_response_change, external_file_response_labels: external_file_response_labels, responded_clarification_ids: responded_clarification_ids, sent_clarifications: sent_clarifications, on_validated_click: set_validation_detail_file_id, locked: is_front_read_only, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status }) })] }, field.id));
+                                                }), can_add_fields && fields.length > 0 && (_jsx(CollabFormAddFieldIcon, { field_id: fields[fields.length - 1].id, on_click: () => handle_open_add_field(fields[fields.length - 1].id), variant: "field" })), can_add_fields && fields.length === 0 && (_jsx(CollabFormAddFieldIcon, { field_id: group.id, on_click: () => handle_open_add_field(group.id), variant: "field" }))] }), gi < (section.groups?.length ?? 0) - 1 && !can_add_groups && (_jsx("div", { className: "border-t border-border/40" }))] }, group.id));
+                            }), can_add_groups && (section.groups?.length ?? 0) > 0 && (_jsx(CollabFormAddFieldIcon, { field_id: section.groups[section.groups.length - 1].id, on_click: () => handle_open_add_group(section.groups[section.groups.length - 1].id), variant: "group" }))] })] }, si))), can_add_fields && add_field_open && (_jsx(React.Suspense, { fallback: null, children: _jsx(LazyAddFieldDialog, { open: add_field_open, on_open_change: set_add_field_open, on_confirm: handle_confirm_add_fields, enable_file_textbox_tab: true, default_tab: "file_textbox", enable_library: false, title: "Add Front Office Field", file_textbox_hide_classification: true, file_textbox_hide_tags: true }) })), can_add_groups && add_group_open && (_jsx(React.Suspense, { fallback: null, children: _jsx(LazyAddGroupDialog, { open: add_group_open, on_open_change: set_add_group_open, on_confirm: handle_confirm_add_group, enable_library: false, title: "Add Front Office Group" }) }))] }));
+    // ── Step 1: Validation Issues content ──
+    const step_1_content = (_jsx("div", { className: "space-y-6", children: immediate_clarifications.length > 0 ? (_jsx(ClarificationSection, { items: immediate_clarifications, counts: immediate_clarification_counts, callbacks: {}, hide_submit: true, hide_header: true, on_response_change: is_front_read_only ? undefined : handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_manager: file_manager?.callbacks, read_only: is_front_read_only, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status })) : (_jsx("div", { className: "border rounded-lg bg-card shadow-sm overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-center gap-3 px-5 py-12", children: [_jsx(HiCheckCircle, { className: "h-8 w-8 text-green-500 flex-shrink-0" }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-green-700", children: "All checks passed" }), _jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: "No validation issues found." })] })] }) })) }));
+    // ── Step 2: Summary & Review content ──
+    const step_2_content = (_jsx(SummaryReviewView, { on_file_view: file_manager ? handle_file_view : undefined, on_submitted: () => set_front_submitted(true) }));
+    // ── Next button ──
+    const next_button = (_jsx("div", { className: "flex justify-end pt-6 pb-2", children: _jsxs("button", { type: "button", onClick: go_next, className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors", children: ["Next", _jsx(HiChevronRight, { className: "h-4 w-4" })] }) }));
+    // ── Build form_content based on stepper mode ──
+    const front_office_title = props.front_office_title;
+    const form_content = use_stepper ? (_jsxs("div", { className: "space-y-4", children: [_jsx(FrontOfficeStepper, { steps: stepper_steps, active_step: active_front_step, completed_steps: completed_steps, on_step_click: handle_step_click }), active_front_step === 0 && (_jsxs(_Fragment, { children: [step_0_content, !is_front_read_only && next_button] })), active_front_step === 1 && (_jsxs(_Fragment, { children: [step_1_content, !is_front_read_only && next_button] })), active_front_step === 2 && step_2_content, validation_detail_file_id && (() => {
+                const vr = file_validation_results[validation_detail_file_id];
+                if (!vr)
+                    return null;
+                const rule_results = vr.rule_results ?? [];
+                const has_only_failures = rule_results.length > 0 && rule_results.every(rr => rr.has_issue);
+                const file_clarifications = has_only_failures
+                    ? immediate_clarifications.filter(item => item.doc_references?.some(r => r.file_id === validation_detail_file_id))
+                    : [];
+                if (has_only_failures && file_clarifications.length > 0) {
+                    const file_counts = { pending: 0, responded: 0, resolved: 0, dismissed: 0, total: 0 };
+                    for (const item of file_clarifications) {
+                        file_counts[item.status]++;
+                        file_counts.total++;
+                    }
+                    return (_jsx(HazoUiDialog, { open: true, onOpenChange: (open) => { if (!open)
+                            set_validation_detail_file_id(null); }, title: "Validation Issues", description: `${file_clarifications.length} issue${file_clarifications.length !== 1 ? 's' : ''} found in ${vr.file_name}`, sizeWidth: "48rem", headerBar: true, showCancelButton: false, cancelButtonText: "", actionButtonText: "Close", onConfirm: () => set_validation_detail_file_id(null), headerClassName: "[&_*]:break-all", children: _jsx(ClarificationSection, { items: file_clarifications, counts: file_counts, callbacks: {}, hide_submit: true, hide_header: true, on_response_change: is_front_read_only ? undefined : handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_manager: file_manager?.callbacks, read_only: is_front_read_only, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status }) }));
+                }
+                const status_label = vr.status === 'passed' ? 'Passed' : vr.status === 'skipped' ? 'Skipped' : vr.status === 'failed' ? 'Failed' : vr.status;
+                return (_jsx(HazoUiDialog, { open: true, onOpenChange: (open) => { if (!open)
+                        set_validation_detail_file_id(null); }, title: "Validation Details", description: vr.file_name, sizeWidth: "28rem", headerBar: true, showCancelButton: false, actionButtonText: "OK", onConfirm: () => set_validation_detail_file_id(null), headerClassName: "[&_*]:break-all", children: _jsx("div", { className: "space-y-3 text-sm", children: vr.status === 'validating' && rule_results.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx("span", { className: "h-4 w-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin flex-shrink-0" }), "Validation in progress..."] })) : rule_results.length > 0 ? (_jsxs("div", { className: "space-y-4", children: [rule_results.some(rr => rr.has_issue) && (_jsxs("div", { children: [_jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-red-600", children: ["Checks Executed: Failed (", rule_results.filter(rr => rr.has_issue).length, ")"] }), _jsx("div", { className: "mt-1.5 space-y-1.5", children: rule_results.filter(rr => rr.has_issue).map((rr, i) => (_jsxs("div", { className: "flex items-start gap-2 rounded-md p-2 border border-destructive/30 bg-destructive/5", children: [rr.user_resolved ? (_jsx(HiCheckCircle, { className: "h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5" })) : (_jsx(HiExclamationCircle, { className: "h-4 w-4 text-destructive flex-shrink-0 mt-0.5" })), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: rr.rule_name ?? rr.rule_id }), rr.user_resolved && rr.user_resolution && (_jsxs("div", { className: "mt-1 text-xs", children: [_jsx("span", { className: "text-amber-600 font-medium", children: "Client resolved: " }), _jsx("span", { className: "text-muted-foreground", children: rr.user_resolution.response_choice }), rr.user_resolution.user_comment && (_jsxs("p", { className: "text-muted-foreground mt-0.5 italic", children: ["\u201C", rr.user_resolution.user_comment, "\u201D"] }))] })), !rr.user_resolved && rr.issue_description && (_jsx("p", { className: "text-muted-foreground text-xs mt-0.5", children: rr.issue_description }))] })] }, i))) })] })), rule_results.some(rr => !rr.has_issue) && (_jsxs("div", { children: [_jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-green-600", children: ["Checks Executed: Passed (", rule_results.filter(rr => !rr.has_issue).length, ")"] }), _jsx("div", { className: "mt-1.5 space-y-1.5", children: rule_results.filter(rr => !rr.has_issue).map((rr, i) => {
+                                                let explanation;
+                                                if (rr.issue_description)
+                                                    explanation = rr.issue_description;
+                                                else if (rr.raw_response) {
+                                                    try {
+                                                        const parsed = JSON.parse(rr.raw_response.replace(/```(?:json)?\s*\n?/g, '').replace(/```/g, '').trim());
+                                                        explanation = parsed.validation_details || parsed.issue_description || parsed.description || parsed.reason;
+                                                    }
+                                                    catch { /* ignore */ }
+                                                }
+                                                return (_jsxs("div", { className: "flex items-start gap-2 rounded-md p-2 border border-green-200 bg-green-50/50", children: [_jsx(HiCheckCircle, { className: "h-4 w-4 text-green-600 flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: rr.rule_name ?? rr.rule_id }), explanation && (_jsx("p", { className: "text-muted-foreground text-xs mt-0.5", children: explanation }))] })] }, i));
+                                            }) })] })), vr.status === 'validating' && (_jsxs("div", { className: "flex items-center gap-2 rounded-md p-2 border border-blue-200 bg-blue-50/50", children: [_jsx("span", { className: "h-4 w-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin flex-shrink-0" }), _jsx("span", { className: "text-sm text-blue-700", children: "Running additional checks..." })] }))] })) : (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(HiCheckCircle, { className: "h-4 w-4 text-green-600 flex-shrink-0" }), "No validation rules matched this file."] })) }) }));
+            })()] })) : (
+    /* Legacy scrollable layout (front_office_stepper={false}) */
+    _jsxs("div", { className: "space-y-6", children: [step_0_content, immediate_clarifications.length > 0 && (_jsxs("div", { className: "border border-red-200/60 rounded-xl bg-card overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 px-5 py-3 border-b border-red-100/80", children: [_jsx("h3", { className: "text-sm font-semibold text-red-700", children: "Clarifications" }), _jsx("span", { className: "text-[10px] text-red-600 bg-red-100 px-1.5 py-px rounded font-medium", children: immediate_clarifications.length })] }), _jsx("div", { className: "p-5", children: _jsx(ClarificationSection, { items: immediate_clarifications, counts: immediate_clarification_counts, callbacks: {}, hide_submit: true, hide_header: true, on_response_change: handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_manager: file_manager?.callbacks, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status }) })] })), _jsx(SummaryReviewView, { on_file_view: file_manager ? handle_file_view : undefined, on_submitted: () => set_front_submitted(true) }), validation_detail_file_id && (() => {
+                const vr = file_validation_results[validation_detail_file_id];
+                if (!vr)
+                    return null;
+                const rule_results = vr.rule_results ?? [];
+                const has_only_failures = rule_results.length > 0 && rule_results.every(rr => rr.has_issue);
+                const file_clarifications = has_only_failures
+                    ? immediate_clarifications.filter(item => item.doc_references?.some(r => r.file_id === validation_detail_file_id))
+                    : [];
+                if (has_only_failures && file_clarifications.length > 0) {
+                    const file_counts = { pending: 0, responded: 0, resolved: 0, dismissed: 0, total: 0 };
+                    for (const item of file_clarifications) {
+                        file_counts[item.status]++;
+                        file_counts.total++;
+                    }
+                    return (_jsx(HazoUiDialog, { open: true, onOpenChange: (open) => { if (!open)
+                            set_validation_detail_file_id(null); }, title: "Validation Issues", description: `${file_clarifications.length} issue${file_clarifications.length !== 1 ? 's' : ''} found in ${vr.file_name}`, sizeWidth: "48rem", headerBar: true, showCancelButton: false, cancelButtonText: "", actionButtonText: "Close", onConfirm: () => set_validation_detail_file_id(null), headerClassName: "[&_*]:break-all", children: _jsx(ClarificationSection, { items: file_clarifications, counts: file_counts, callbacks: {}, hide_submit: true, hide_header: true, on_response_change: is_front_read_only ? undefined : handle_response_change, on_doc_click: file_manager ? handle_clarification_doc_click : undefined, file_manager: file_manager?.callbacks, read_only: is_front_read_only, file_validation: file_validation_badges, response_validations: response_validations, on_validation_click: set_validation_detail_file_id, file_validation_details: per_file_validation_details, file_pipeline_status: per_file_pipeline_status }) }));
+                }
+                const status_label = vr.status === 'passed' ? 'Passed' : vr.status === 'skipped' ? 'Skipped' : vr.status === 'failed' ? 'Failed' : vr.status;
+                return (_jsx(HazoUiDialog, { open: true, onOpenChange: (open) => { if (!open)
+                        set_validation_detail_file_id(null); }, title: "Validation Details", description: vr.file_name, sizeWidth: "28rem", headerBar: true, showCancelButton: false, actionButtonText: "OK", onConfirm: () => set_validation_detail_file_id(null), headerClassName: "[&_*]:break-all", children: _jsx("div", { className: "space-y-3 text-sm", children: vr.status === 'validating' && rule_results.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx("span", { className: "h-4 w-4 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin flex-shrink-0" }), "Validation in progress..."] })) : rule_results.length > 0 ? (_jsxs("div", { className: "space-y-4", children: [rule_results.some(rr => rr.has_issue) && (_jsxs("div", { children: [_jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-red-600", children: ["Checks Executed: Failed (", rule_results.filter(rr => rr.has_issue).length, ")"] }), _jsx("div", { className: "mt-1.5 space-y-1.5", children: rule_results.filter(rr => rr.has_issue).map((rr, i) => (_jsxs("div", { className: "flex items-start gap-2 rounded-md p-2 border border-destructive/30 bg-destructive/5", children: [rr.user_resolved ? (_jsx(HiCheckCircle, { className: "h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5" })) : (_jsx(HiExclamationCircle, { className: "h-4 w-4 text-destructive flex-shrink-0 mt-0.5" })), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: rr.rule_name ?? rr.rule_id }), rr.user_resolved && rr.user_resolution && (_jsxs("div", { className: "mt-1 text-xs", children: [_jsx("span", { className: "text-amber-600 font-medium", children: "Client resolved: " }), _jsx("span", { className: "text-muted-foreground", children: rr.user_resolution.response_choice }), rr.user_resolution.user_comment && (_jsxs("p", { className: "text-muted-foreground mt-0.5 italic", children: ["\u201C", rr.user_resolution.user_comment, "\u201D"] }))] })), !rr.user_resolved && rr.issue_description && (_jsx("p", { className: "text-muted-foreground text-xs mt-0.5", children: rr.issue_description }))] })] }, i))) })] })), rule_results.some(rr => !rr.has_issue) && (_jsxs("div", { children: [_jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-green-600", children: ["Checks Executed: Passed (", rule_results.filter(rr => !rr.has_issue).length, ")"] }), _jsx("div", { className: "mt-1.5 space-y-1.5", children: rule_results.filter(rr => !rr.has_issue).map((rr, i) => {
+                                                let explanation;
+                                                if (rr.issue_description)
+                                                    explanation = rr.issue_description;
+                                                else if (rr.raw_response) {
+                                                    try {
+                                                        const parsed = JSON.parse(rr.raw_response.replace(/```(?:json)?\s*\n?/g, '').replace(/```/g, '').trim());
+                                                        explanation = parsed.validation_details || parsed.issue_description || parsed.description || parsed.reason;
+                                                    }
+                                                    catch { /* ignore */ }
+                                                }
+                                                return (_jsxs("div", { className: "flex items-start gap-2 rounded-md p-2 border border-green-200 bg-green-50/50", children: [_jsx(HiCheckCircle, { className: "h-4 w-4 text-green-600 flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: rr.rule_name ?? rr.rule_id }), explanation && (_jsx("p", { className: "text-muted-foreground text-xs mt-0.5", children: explanation }))] })] }, i));
+                                            }) })] })), vr.status === 'validating' && (_jsxs("div", { className: "flex items-center gap-2 rounded-md p-2 border border-blue-200 bg-blue-50/50", children: [_jsx("span", { className: "h-4 w-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin flex-shrink-0" }), _jsx("span", { className: "text-sm text-blue-700", children: "Running additional checks..." })] }))] })) : (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(HiCheckCircle, { className: "h-4 w-4 text-green-600 flex-shrink-0" }), "No validation rules matched this file."] })) }) }));
+            })()] }));
+    const title_element = front_office_title ? (_jsx("h3", { className: "text-sm font-medium text-muted-foreground mb-2 px-1", children: front_office_title })) : null;
+    // If no file is being viewed, just show the form
+    if (!viewed_file || !viewed_file_url) {
+        return (_jsxs(_Fragment, { children: [title_element, form_content] }));
+    }
+    // Side-by-side layout: form + PDF panel
+    return (_jsxs("div", { className: "flex gap-4 h-full", children: [_jsxs("div", { className: "flex-1 min-w-0 overflow-y-auto", children: [title_element, form_content] }), _jsx(PdfSidePanel, { file_name: viewed_file.file_name, file_url: viewed_file_url, mime_type: viewed_file.mime_type, PdfViewer: PdfViewerComponent, on_close: () => set_viewed_file(null) })] }));
+}
+//# sourceMappingURL=front_office_view.js.map