feat: Split-screen с Debug панелью в реальном времени!

Новый UI:
✅ Split-screen layout:
   - Слева (60%): форма заявки
   - Справа (40%): Debug Console в реальном времени

Компонент DebugPanel.tsx:
✅ Темная тема (VS Code style)
✅ Timeline с событиями
✅ Real-time обновления
✅ Показывает:
   - Form Data (JSON в реальном времени)
   - Events Log с иконками и цветами
   - Детали каждого события

События которые отображаются:
1. policy_check:
   - ✅ Полис найден в MySQL БД
   - ⚠️ Полис не найден
   - Показывает: voucher, found status

2. upload:
   - 📤 Загружаю X файлов в S3
   - ✅ Загружено в S3: X/Y
   - Показывает: file_id, size, S3 URL

3. ocr:
   - 🔍 Запущен OCR
   - 📄 OCR завершен: XXX символов
   - Показывает: текст preview

4. ai_analysis:
   - 🤖 AI: policy/garbage, confidence: 95%
   - 🗑️ ШЛЯПА DETECTED! (пользователю не говорим)
   - Показывает: document_type, is_valid, confidence, extracted_data

5. sms:
   - 📱 Отправляю SMS
   - ✅ SMS отправлен (DEBUG mode)
   - 🔐 Проверяю код
   - ✅ Телефон подтвержден
   - Показывает: phone, debug_code

UX:
- Sticky panel (прилипает при скролле)
- Monospace шрифт для данных
- Цветовая кодировка статусов
- JSON форматирование

Layout:
- Row + Col от Ant Design
- Responsive: mobile = 1 column, desktop = split

Теперь видно ВСЁ что происходит в реальном времени! 🔍

frontend/src/pages/ClaimForm.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Steps, Card, message } from 'antd';
+import { Steps, Card, message, Row, Col } from 'antd';
 import Step1Policy from '../components/form/Step1Policy';
 import Step2Details from '../components/form/Step2Details';
 import Step3Payment from '../components/form/Step3Payment';
+import DebugPanel from '../components/DebugPanel';
 import './ClaimForm.css';
 
 const { Step } = Steps;
@@ -35,6 +36,18 @@ export default function ClaimForm() {
     paymentMethod: 'sbp',
   });
   const [isPhoneVerified, setIsPhoneVerified] = useState(false);
+  const [debugEvents, setDebugEvents] = useState<any[]>([]);
+
+  const addDebugEvent = (type: string, status: string, message: string, data?: any) => {
+    const event = {
+      timestamp: new Date().toLocaleTimeString('ru-RU'),
+      type,
+      status,
+      message,
+      data
+    };
+    setDebugEvents(prev => [event, ...prev]);
+  };
 
   const updateFormData = (data: Partial<FormData>) => {
     setFormData({ ...formData, ...data });
@@ -100,6 +113,7 @@ export default function ClaimForm() {
           formData={formData}
           updateFormData={updateFormData}
           onNext={nextStep}
+          addDebugEvent={addDebugEvent}
         />
       ),
     },
@@ -124,6 +138,7 @@ export default function ClaimForm() {
           onSubmit={handleSubmit}
           isPhoneVerified={isPhoneVerified}
           setIsPhoneVerified={setIsPhoneVerified}
+          addDebugEvent={addDebugEvent}
         />
       ),
     },
@@ -142,35 +157,45 @@ export default function ClaimForm() {
   };
 
   return (
-    <div className="claim-form-container">
-      <Card 
-        title="Подать заявку на выплату" 
-        className="claim-form-card"
-        extra={
-          currentStep > 0 && (
-            <button 
-              onClick={handleReset}
-              style={{
-                padding: '4px 12px',
-                background: '#fff',
-                border: '1px solid #d9d9d9',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px'
-              }}
-            >
-              🔄 Начать заново
-            </button>
-          )
-        }
-      >
-        <Steps current={currentStep} className="steps">
-          {steps.map((item) => (
-            <Step key={item.title} title={item.title} />
-          ))}
-        </Steps>
-        <div className="steps-content">{steps[currentStep].content}</div>
-      </Card>
+    <div className="claim-form-container" style={{ padding: '20px', background: '#f0f2f5' }}>
+      <Row gutter={16}>
+        {/* Левая часть - Форма */}
+        <Col xs={24} lg={14}>
+          <Card 
+            title="Подать заявку на выплату" 
+            className="claim-form-card"
+            extra={
+              currentStep > 0 && (
+                <button 
+                  onClick={handleReset}
+                  style={{
+                    padding: '4px 12px',
+                    background: '#fff',
+                    border: '1px solid #d9d9d9',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '14px'
+                  }}
+                >
+                  🔄 Начать заново
+                </button>
+              )
+            }
+          >
+            <Steps current={currentStep} className="steps">
+              {steps.map((item) => (
+                <Step key={item.title} title={item.title} />
+              ))}
+            </Steps>
+            <div className="steps-content">{steps[currentStep].content}</div>
+          </Card>
+        </Col>
+
+        {/* Правая часть - Debug консоль */}
+        <Col xs={24} lg={10}>
+          <DebugPanel events={debugEvents} formData={formData} />
+        </Col>
+      </Row>
     </div>
   );
 }