feat(ticket_form): add wizard plan step and dev cache

frontend/src/components/form/StepWizardPlan.tsx

@@ -0,0 +1,846 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Card, Form, Input, Radio, Result, Select, Skeleton, Space, Tag, Typography, Upload, message, Progress } from 'antd';
+import { LoadingOutlined, PlusOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import AiWorkingIllustration from '../../assets/ai-working.svg';
+import type { UploadFile } from 'antd/es/upload/interface';
+
+const { Paragraph, Title, Text } = Typography;
+const { TextArea } = Input;
+const { Dragger } = Upload;
+const { Option } = Select;
+
+interface WizardQuestion {
+  order: number;
+  name: string;
+  label: string;
+  control: string;
+  input_type: string;
+  required: boolean;
+  priority?: number;
+  rationale?: string;
+  ask_if?: {
+    field: string;
+    op: '==' | '!=' | '>' | '<' | '>=' | '<=';
+    value: any;
+  } | null;
+  options?: { label: string; value: string }[];
+}
+
+interface WizardDocument {
+  id: string;
+  name: string;
+  required: boolean;
+  priority?: number;
+  hints?: string;
+  accept?: string[];
+}
+
+interface FileBlock {
+  id: string;
+  fieldName: string;
+  description: string;
+  category?: string;
+  files: UploadFile[];
+  required?: boolean;
+  docLabel?: string;
+}
+
+interface Props {
+  formData: any;
+  updateFormData: (data: any) => void;
+  onNext: () => void;
+  onPrev: () => void;
+  addDebugEvent?: (type: string, status: string, message: string, data?: any) => void;
+}
+
+const evaluateCondition = (condition: WizardQuestion['ask_if'], values: Record<string, any>) => {
+  if (!condition) return true;
+  const left = values?.[condition.field];
+  const right = condition.value;
+  switch (condition.op) {
+    case '==':
+      return left === right;
+    case '!=':
+      return left !== right;
+    case '>':
+      return left > right;
+    case '<':
+      return left < right;
+    case '>=':
+      return left >= right;
+    case '<=':
+      return left <= right;
+    default:
+      return true;
+  }
+};
+
+const buildPrefillMap = (prefill?: Array<{ name: string; value: any }>) => {
+  if (!prefill || prefill.length === 0) return {};
+  return prefill.reduce<Record<string, any>>((acc, item) => {
+    if (item.name) {
+      acc[item.name] = item.value;
+    }
+    return acc;
+  }, {});
+};
+
+const YES_VALUES = ['да', 'yes', 'true', '1'];
+
+const isAffirmative = (value: any) => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  if (typeof value === 'string') {
+    return YES_VALUES.includes(value.toLowerCase());
+  }
+  return false;
+};
+
+const generateBlockId = (prefix: string) =>
+  `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+
+export default function StepWizardPlan({
+  formData,
+  updateFormData,
+  onNext,
+  onPrev,
+  addDebugEvent,
+}: Props) {
+  const [form] = Form.useForm();
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const debugLoggerRef = useRef<typeof addDebugEvent>(addDebugEvent);
+  const [isWaiting, setIsWaiting] = useState(!formData.wizardPlan);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+  const [plan, setPlan] = useState<any>(formData.wizardPlan || null);
+  const [prefillMap, setPrefillMap] = useState<Record<string, any>>(
+    formData.wizardPrefill || buildPrefillMap(formData.wizardPrefillArray)
+  );
+  const [questionFileBlocks, setQuestionFileBlocks] = useState<Record<string, FileBlock[]>>(
+    formData.wizardUploads?.documents || {}
+  );
+  const [customFileBlocks, setCustomFileBlocks] = useState<FileBlock[]>(
+    formData.wizardUploads?.custom || []
+  );
+  const [progressState, setProgressState] = useState<{ done: number; total: number }>({
+    done: 0,
+    total: 0,
+  });
+  const formValues = Form.useWatch([], form);
+  const progressPercent = useMemo(() => {
+    if (!progressState.total) return 0;
+    return Math.round((progressState.done / progressState.total) * 100);
+  }, [progressState]);
+  const persistUploads = useCallback(
+    (nextDocuments: Record<string, FileBlock[]>, nextCustom: FileBlock[]) => {
+      updateFormData({
+        wizardUploads: {
+          documents: nextDocuments,
+          custom: nextCustom,
+        },
+      });
+    },
+    [updateFormData]
+  );
+
+  useEffect(() => {
+    if (formData.wizardUploads?.documents) {
+      setQuestionFileBlocks(formData.wizardUploads.documents);
+    }
+    if (formData.wizardUploads?.custom) {
+      setCustomFileBlocks(formData.wizardUploads.custom);
+    }
+  }, [formData.wizardUploads]);
+
+  useEffect(() => {
+    debugLoggerRef.current = addDebugEvent;
+  }, [addDebugEvent]);
+
+  const questions: WizardQuestion[] = useMemo(() => plan?.questions || [], [plan]);
+  const documents: WizardDocument[] = plan?.documents || [];
+
+  const documentGroups = useMemo(() => {
+    const groups: Record<string, WizardDocument[]> = {};
+    documents.forEach((doc) => {
+      const id = doc.id?.toLowerCase() || '';
+      let key = 'docs_exist';
+      if (id.includes('correspondence') || id.includes('chat')) {
+        key = 'correspondence_exist';
+      }
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(doc);
+    });
+    return groups;
+  }, [documents]);
+
+  const documentCategoryOptions = useMemo(() => {
+    const map = new Map<string, string>();
+    documents.forEach((doc) => {
+      const key = doc.id || doc.name || '';
+      const label = doc.name || doc.id || '';
+      if (key) {
+        map.set(key, label);
+      }
+    });
+    map.set('other', 'Другое');
+    return Array.from(map.entries()).map(([value, label]) => ({ value, label }));
+  }, [documents]);
+  const customCategoryOptions = useMemo(() => documentCategoryOptions, [documentCategoryOptions]);
+
+  const handleDocumentBlocksChange = useCallback(
+    (docId: string, updater: (blocks: FileBlock[]) => FileBlock[]) => {
+      setQuestionFileBlocks((prev) => {
+        const nextDocs = { ...prev };
+        const currentBlocks = nextDocs[docId] || [];
+        const updated = updater(currentBlocks);
+        nextDocs[docId] = updated;
+        persistUploads(nextDocs, customFileBlocks);
+        return nextDocs;
+      });
+    },
+    [customFileBlocks, persistUploads]
+  );
+
+  const handleCustomBlocksChange = useCallback(
+    (updater: (blocks: FileBlock[]) => FileBlock[]) => {
+      setCustomFileBlocks((prev) => {
+        const updated = updater(prev);
+        persistUploads(questionFileBlocks, updated);
+        return updated;
+      });
+    },
+    [persistUploads, questionFileBlocks]
+  );
+
+  const addDocumentBlock = (docId: string, docLabel?: string) => {
+    handleDocumentBlocksChange(docId, (blocks) => [
+      ...blocks,
+      {
+        id: generateBlockId(docId),
+        fieldName: docId,
+        description: '',
+        category: docId,
+        docLabel: docLabel,
+        files: [],
+      },
+    ]);
+  };
+
+  const updateDocumentBlock = (
+    docId: string,
+    blockId: string,
+    patch: Partial<Omit<FileBlock, 'id' | 'fieldName'>>
+  ) => {
+    handleDocumentBlocksChange(docId, (blocks) =>
+      blocks.map((block) => (block.id === blockId ? { ...block, ...patch } : block))
+    );
+  };
+
+  const removeDocumentBlock = (docId: string, blockId: string) => {
+    handleDocumentBlocksChange(docId, (blocks) => blocks.filter((block) => block.id !== blockId));
+  };
+
+  const addCustomBlock = () => {
+    handleCustomBlocksChange((blocks) => [
+      ...blocks,
+      {
+        id: generateBlockId('custom'),
+        fieldName: 'custom',
+        description: '',
+        category: undefined,
+        files: [],
+      },
+    ]);
+  };
+
+  const updateCustomBlock = (blockId: string, patch: Partial<FileBlock>) => {
+    handleCustomBlocksChange((blocks) =>
+      blocks.map((block) => (block.id === blockId ? { ...block, ...patch } : block))
+    );
+  };
+
+  const removeCustomBlock = (blockId: string) => {
+    handleCustomBlocksChange((blocks) => blocks.filter((block) => block.id !== blockId));
+  };
+
+  useEffect(() => {
+    if (plan) {
+      const existingAnswers = formData.wizardAnswers || {};
+      const initialValues = { ...prefillMap, ...existingAnswers };
+      form.setFieldsValue(initialValues);
+    }
+  }, [plan, prefillMap, formData.wizardAnswers, form]);
+
+  useEffect(() => {
+    if (!questions.length) {
+      setProgressState({ done: 0, total: 0 });
+      return;
+    }
+    const values = formValues || {};
+    let total = 0;
+    let done = 0;
+
+    questions.forEach((question) => {
+      const visible = evaluateCondition(question.ask_if, values);
+      if (question.required && visible) {
+        total += 1;
+        const value = values?.[question.name];
+        let filled = false;
+        if (Array.isArray(value)) {
+          filled = value.length > 0;
+        } else if (typeof value === 'boolean') {
+          filled = value;
+        } else {
+          filled = value !== undefined && value !== null && String(value).trim().length > 0;
+        }
+        if (filled) {
+          done += 1;
+        }
+      }
+    });
+
+    setProgressState({ done, total });
+  }, [formValues, questions]);
+
+  useEffect(() => {
+    if (!isWaiting || !formData.claim_id || plan) {
+      return;
+    }
+
+    const claimId = formData.claim_id;
+    const source = new EventSource(`/events/${claimId}`);
+    eventSourceRef.current = source;
+    debugLoggerRef.current?.('wizard', 'info', '🔌 Подключаемся к SSE для плана вопросов', { claim_id: claimId });
+
+    source.onopen = () => {
+      setConnectionError(null);
+      debugLoggerRef.current?.('wizard', 'info', '✅ SSE соединение открыто', { claim_id: claimId });
+    };
+
+    source.onerror = (error) => {
+      console.error('❌ Wizard SSE error:', error);
+      setConnectionError('Не удалось получить ответ от AI. Попробуйте ещё раз.');
+      source.close();
+      eventSourceRef.current = null;
+      debugLoggerRef.current?.('wizard', 'error', '❌ SSE ошибка (wizard)', { claim_id: claimId });
+    };
+
+    const extractWizardPayload = (incoming: any): any => {
+      if (!incoming || typeof incoming !== 'object') return null;
+      if (incoming.wizard_plan) return incoming;
+
+      const candidates = [
+        incoming.data,
+        incoming.redis_value,
+        incoming.event,
+        incoming.payload,
+      ];
+
+      for (const candidate of candidates) {
+        if (!candidate) continue;
+        const unwrapped = extractWizardPayload(candidate);
+        if (unwrapped) return unwrapped;
+      }
+
+      return null;
+    };
+
+    source.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        const eventType =
+          payload.event_type ||
+          payload.type ||
+          payload?.event?.event_type ||
+          payload?.data?.event_type ||
+          payload?.redis_value?.event_type;
+
+        const wizardPayload = extractWizardPayload(payload);
+        const hasWizardPlan = Boolean(wizardPayload);
+
+        if (eventType?.includes('wizard') || hasWizardPlan) {
+          const wizardPlan = wizardPayload?.wizard_plan;
+          const answersPrefill = wizardPayload?.answers_prefill;
+          const coverageReport = wizardPayload?.coverage_report;
+
+          debugLoggerRef.current?.('wizard', 'success', '✨ Получен план вопросов', {
+            claim_id: claimId,
+            questions: wizardPlan?.questions?.length || 0,
+          });
+
+          const prefill = buildPrefillMap(answersPrefill);
+          setPlan(wizardPlan);
+          setPrefillMap(prefill);
+          setIsWaiting(false);
+          setConnectionError(null);
+
+          updateFormData({
+            wizardPlan: wizardPlan,
+            wizardPrefill: prefill,
+            wizardPrefillArray: answersPrefill,
+            wizardCoverageReport: coverageReport,
+            wizardPlanStatus: 'ready',
+          });
+
+          source.close();
+          eventSourceRef.current = null;
+        }
+      } catch (err) {
+        console.error('❌ Ошибка разбора события wizard:', err);
+      }
+    };
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    };
+  }, [isWaiting, formData.claim_id, plan, updateFormData]);
+
+  const handleRefreshPlan = () => {
+    if (!formData.claim_id) {
+      message.error('Не найден claim_id для подписки на события.');
+      return;
+    }
+    setIsWaiting(true);
+    setPlan(null);
+    setConnectionError(null);
+    updateFormData({
+      wizardPlan: null,
+      wizardPlanStatus: 'pending',
+    });
+  };
+
+  const validateUploads = (values: Record<string, any>) => {
+    for (const [questionName, docs] of Object.entries(documentGroups)) {
+      if (!docs.length) continue;
+      const answer = values?.[questionName];
+      if (!isAffirmative(answer)) continue;
+      const blocks = questionFileBlocks[questionName] || [];
+      for (const doc of docs) {
+        const matched = blocks.some((block) => {
+          if (!block.files.length) return false;
+          if (!block.category) return true;
+          const normalizedCategory = block.category.toLowerCase();
+          const normalizedId = (doc.id || '').toLowerCase();
+          const normalizedName = (doc.name || '').toLowerCase();
+          return (
+            normalizedCategory === normalizedId ||
+            normalizedCategory === normalizedName ||
+            (normalizedCategory.includes('contract') && normalizedId.includes('contract')) ||
+            (normalizedCategory.includes('payment') && normalizedId.includes('payment')) ||
+            (normalizedCategory.includes('correspondence') && normalizedId.includes('correspondence'))
+          );
+        });
+        if (doc.required && !matched) {
+          return `Добавьте файлы для документа "${doc.name}"`;
+        }
+      }
+      const missingDescription = blocks.some(
+        (block) => block.files.length > 0 && !block.description?.trim()
+      );
+      if (missingDescription) {
+        return 'Заполните описание для каждого блока документов';
+      }
+    }
+    const customMissingDescription = customFileBlocks.some(
+      (block) => block.files.length > 0 && !block.description?.trim()
+    );
+    if (customMissingDescription) {
+      return 'Заполните описание для дополнительных документов';
+    }
+    return null;
+  };
+
+  const handleFinish = (values: Record<string, any>) => {
+    const uploadError = validateUploads(values);
+    if (uploadError) {
+      message.error(uploadError);
+      return;
+    }
+
+    updateFormData({
+      wizardPlan: plan,
+      wizardAnswers: values,
+      wizardPlanStatus: 'answered',
+      wizardUploads: {
+        documents: questionFileBlocks,
+        custom: customFileBlocks,
+      },
+    });
+    addDebugEvent?.('wizard', 'info', '📝 Ответы на вопросы сохранены', {
+      answers: values,
+    });
+    onNext();
+  };
+
+  const renderQuestionField = (question: WizardQuestion) => {
+    switch (question.control) {
+      case 'textarea':
+      case 'input[type="textarea"]':
+        return (
+          <TextArea
+            rows={4}
+            placeholder="Ответ"
+            autoSize={{ minRows: 3, maxRows: 6 }}
+          />
+        );
+      case 'input[type="radio"]':
+        return (
+          <Radio.Group>
+            <Space direction="vertical">
+              {question.options?.map((option) => (
+                <Radio key={option.value} value={option.value}>
+                  {option.label}
+                </Radio>
+              ))}
+            </Space>
+          </Radio.Group>
+        );
+      default:
+        return <Input size="large" placeholder="Ответ" />;
+    }
+  };
+
+  const renderDocumentBlocks = (docId: string, docList: WizardDocument[]) => {
+    const currentBlocks = questionFileBlocks[docId] || [];
+    const docLabel = docList.map((doc) => doc.name).join(', ');
+    const accept = docList.flatMap((doc) => doc.accept || []);
+    const uniqueAccept = Array.from(new Set(accept.length ? accept : ['pdf', 'jpg', 'png']));
+
+    return (
+      <Space direction="vertical" style={{ width: '100%' }}>
+        {currentBlocks.map((block, idx) => (
+          <Card
+            key={block.id}
+            size="small"
+            style={{
+              borderRadius: 12,
+              border: '1px solid #e0e7ff',
+              background: '#fff',
+            }}
+            title={`${docLabel} — группа #${idx + 1}`}
+            extra={
+              <Button
+                type="link"
+                danger
+                size="small"
+                onClick={() => removeDocumentBlock(docId, block.id)}
+              >
+                Удалить
+              </Button>
+            }
+          >
+            <Space direction="vertical" style={{ width: '100%' }}>
+              <Input
+                placeholder="Описание документов (например: договор от 12.05, платёжка №123)"
+                value={block.description}
+                onChange={(e) =>
+                  updateDocumentBlock(docId, block.id, { description: e.target.value })
+                }
+              />
+              <Select
+                value={block.category || docId}
+                onChange={(value) => updateDocumentBlock(docId, block.id, { category: value })}
+                placeholder="Категория блока"
+              >
+                {documentCategoryOptions.map((option) => (
+                  <Option key={`${docId}-${option.value}`} value={option.value}>
+                    {option.label}
+                  </Option>
+                ))}
+              </Select>
+              <Dragger
+                multiple
+                beforeUpload={() => false}
+                fileList={block.files}
+                onChange={({ fileList }) =>
+                  updateDocumentBlock(docId, block.id, { files: fileList })
+                }
+                accept={uniqueAccept.map((ext) => `.${ext}`).join(',')}
+                style={{ background: '#f8f9ff' }}
+              >
+                <p className="ant-upload-drag-icon">
+                  <LoadingOutlined style={{ color: '#6366f1' }} />
+                </p>
+                <p className="ant-upload-text">Перетащите файлы или нажмите для загрузки</p>
+                <p className="ant-upload-hint">
+                  Допустимые форматы: {uniqueAccept.join(', ')}. До 5 файлов, максимум 20 МБ каждый.
+                </p>
+              </Dragger>
+            </Space>
+          </Card>
+        ))}
+        <Button
+          icon={<PlusOutlined />}
+          onClick={() => addDocumentBlock(docId, docLabel)}
+          style={{ width: '100%' }}
+        >
+          Добавить документы ({docLabel})
+        </Button>
+      </Space>
+    );
+  };
+
+  const renderCustomUploads = () => (
+    <Card
+      size="small"
+      style={{ marginTop: 24, borderRadius: 12, border: '1px solid #e0e7ff' }}
+      title="Дополнительные документы"
+      extra={
+        <Button type="link" onClick={addCustomBlock} icon={<PlusOutlined />}>
+          Добавить блок
+        </Button>
+      }
+    >
+      {customFileBlocks.length === 0 && (
+        <Paragraph type="secondary" style={{ marginBottom: 16 }}>
+          Можно добавить произвольные группы документов — например, переписку, дополнительные акты
+          или фото.
+        </Paragraph>
+      )}
+      <Space direction="vertical" style={{ width: '100%' }}>
+        {customFileBlocks.map((block, idx) => (
+          <Card
+            key={block.id}
+            size="small"
+            type="inner"
+            title={`Группа #${idx + 1}`}
+            extra={
+              <Button type="link" danger size="small" onClick={() => removeCustomBlock(block.id)}>
+                Удалить
+              </Button>
+            }
+          >
+            <Space direction="vertical" style={{ width: '100%' }}>
+              <Select
+                value={block.category}
+                placeholder="Категория"
+                onChange={(value) => updateCustomBlock(block.id, { category: value })}
+                allowClear
+              >
+                {customCategoryOptions.map((option) => (
+                  <Option key={`custom-${option.value}`} value={option.value}>
+                    {option.label}
+                  </Option>
+                ))}
+              </Select>
+              <TextArea
+                placeholder="Описание (например: переписка в WhatsApp с менеджером)"
+                autoSize={{ minRows: 2, maxRows: 4 }}
+                value={block.description}
+                onChange={(e) => updateCustomBlock(block.id, { description: e.target.value })}
+              />
+              <Dragger
+                multiple
+                beforeUpload={() => false}
+                fileList={block.files}
+                onChange={({ fileList }) => updateCustomBlock(block.id, { files: fileList })}
+                accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.heic"
+              >
+                <p className="ant-upload-drag-icon">
+                  <LoadingOutlined style={{ color: '#6366f1' }} />
+                </p>
+                <p className="ant-upload-text">Перетащите файлы или нажмите для загрузки</p>
+                <p className="ant-upload-hint">Максимум 10 файлов, до 20 МБ каждый.</p>
+              </Dragger>
+            </Space>
+          </Card>
+        ))}
+        {customFileBlocks.length > 0 && (
+          <Button onClick={addCustomBlock} icon={<PlusOutlined />}>
+            Добавить ещё документы
+          </Button>
+        )}
+      </Space>
+    </Card>
+  );
+
+  const renderQuestions = () => (
+    <>
+      <Card
+        size="small"
+        style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e0e7ff' }}
+      >
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Text strong>Прогресс заполнения</Text>
+            <Text type="secondary">
+              {progressState.done}/{progressState.total} обязательных ответов
+            </Text>
+          </div>
+          <Progress percent={progressPercent} showInfo={false} />
+        </Space>
+      </Card>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleFinish}
+        initialValues={{ ...prefillMap, ...formData.wizardAnswers }}
+      >
+      {questions.map((question) => (
+        <Form.Item shouldUpdate key={question.name}>
+          {() => {
+            const values = form.getFieldsValue(true);
+            if (!evaluateCondition(question.ask_if, values)) {
+              return null;
+            }
+            const questionDocs = documentGroups[question.name] || [];
+            const questionValue = values?.[question.name];
+            return (
+              <>
+                <Form.Item
+                  label={question.label}
+                  name={question.name}
+                  rules={[
+                    {
+                      required: question.required,
+                      message: 'Поле обязательно для заполнения',
+                    },
+                  ]}
+                >
+                  {renderQuestionField(question)}
+                </Form.Item>
+                {questionDocs.length > 0 && isAffirmative(questionValue) && (
+                  <div style={{ marginBottom: 24 }}>
+                    <Text strong>Загрузите документы:</Text>
+                    {renderDocumentBlocks(question.name, questionDocs)}
+                  </div>
+                )}
+              </>
+            );
+          }}
+        </Form.Item>
+      ))}
+
+      <Space style={{ marginTop: 24 }}>
+        <Button onClick={onPrev}>← Назад</Button>
+        <Button type="primary" htmlType="submit">
+          Сохранить и продолжить →
+        </Button>
+      </Space>
+      </Form>
+      {renderCustomUploads()}
+    </>
+  );
+
+  if (!formData.claim_id) {
+    return (
+      <Result
+        status="warning"
+        title="Нет claim_id"
+        subTitle="Не удалось определить идентификатор заявки. Вернитесь на предыдущий шаг и попробуйте снова."
+        extra={<Button onClick={onPrev}>Вернуться</Button>}
+      />
+    );
+  }
+
+  return (
+    <div style={{ marginTop: 24 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
+        <Button onClick={onPrev}>← Назад</Button>
+        {plan && (
+          <Button type="link" onClick={handleRefreshPlan}>
+            Обновить рекомендации
+          </Button>
+        )}
+      </div>
+
+      <Card
+        style={{
+          borderRadius: 16,
+          border: '1px solid #dbeafe',
+          background: '#f8fbff',
+        }}
+      >
+        {isWaiting && (
+          <div style={{ textAlign: 'center', padding: '40px 0' }}>
+            <img
+              src={AiWorkingIllustration}
+              alt="AI работает"
+              style={{ maxWidth: 320, width: '100%', marginBottom: 24 }}
+            />
+            <Title level={4}>Мы собираем рекомендации для вашего случая</Title>
+            <Paragraph type="secondary" style={{ maxWidth: 420, margin: '0 auto 24px' }}>
+              Наш AI-ассистент анализирует ваше описание и подбирает вопросы и список документов,
+              которые помогут быстро решить проблему.
+            </Paragraph>
+            <Space direction="vertical">
+              <Skeleton.Button active size="large" style={{ width: 220 }} />
+              <Skeleton.Input active size="large" style={{ width: 260 }} />
+            </Space>
+            <div style={{ marginTop: 32, color: '#94a3b8' }}>
+              <LoadingOutlined style={{ fontSize: 28 }} spin /> Подождите несколько секунд…
+            </div>
+            {connectionError && (
+              <div style={{ marginTop: 16 }}>
+                <Text type="danger">{connectionError}</Text>
+                <div>
+                  <Button onClick={handleRefreshPlan} style={{ marginTop: 12 }}>
+                    Попробовать снова
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {!isWaiting && plan && (
+          <div>
+            <Title level={4} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <ThunderboltOutlined style={{ color: '#6366f1' }} /> План действий
+            </Title>
+            <Paragraph type="secondary" style={{ marginBottom: 24 }}>
+              {plan.user_text || 'Ответьте на вопросы и подготовьте документы, чтобы мы могли продолжить.'}
+            </Paragraph>
+
+            {documents.length > 0 && (
+              <Card
+                size="small"
+                style={{
+                  borderRadius: 12,
+                  background: '#fff',
+                  border: '1px solid #e0e7ff',
+                  marginBottom: 24,
+                }}
+                title="Документы, которые понадобятся"
+              >
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  {documents.map((doc: any) => (
+                    <div
+                      key={doc.id}
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        gap: 8,
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      <div>
+                        <Text strong>{doc.name}</Text>
+                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+                          {doc.hints}
+                        </Paragraph>
+                      </div>
+                      <Tag color={doc.required ? 'volcano' : 'geekblue'}>
+                        {doc.required ? 'Обязательно' : 'Опционально'}
+                      </Tag>
+                    </div>
+                  ))}
+                </Space>
+              </Card>
+            )}
+
+            {renderQuestions()}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+