Merge pull request 'fix: adaptive LLM progress estimation and emit 85% on stream end' (#6) from fix/adaptive-llm-progress into main

Reviewed-on: #6

Dockerfile.backend

@@ -27,13 +27,10 @@ FROM node:20-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 
-# @napi-rs/canvas (dep of pdf-parse) ships a musl pre-built binary that
-# needs these compatibility / font libraries at runtime.
-RUN apk add --no-cache libc6-compat fontconfig freetype
-
 COPY --from=build /app/backend/dist ./dist
 COPY --from=build /app/backend/package.json ./package.json
 COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/backend/node_modules/ ./node_modules/
 COPY backend/.env .env
 
 EXPOSE 3000

backend/package.json

@@ -18,7 +18,7 @@
     "express": "^5.2.1",
     "multer": "^2.1.1",
     "openai": "^6.27.0",
-    "pdf-parse": "^2.4.5",
+    "pdf-parse": "1.1.1",
     "pg": "^8.19.0",
     "uuid": "^13.0.0"
   },

backend/src/routes/import.ts

@@ -3,7 +3,7 @@ import multer from 'multer';
 import { asyncHandler } from '../utils';
 import { importStatement, isValidationError } from '../services/import';
 import {
-  convertPdfToStatement,
+  convertPdfToStatementStreaming,
   isPdfConversionError,
 } from '../services/pdfToStatement';
 
@@ -28,6 +28,10 @@ function isJsonFile(file: { mimetype: string; originalname: string }): boolean {
   );
 }
 
+function sseWrite(res: import('express').Response, data: Record<string, unknown>) {
+  res.write(`data: ${JSON.stringify(data)}\n\n`);
+}
+
 const router = Router();
 
 router.post(
@@ -51,28 +55,73 @@ router.post(
       return;
     }
 
-    let body: unknown;
-
     if (isPdfFile(file)) {
-      const converted = await convertPdfToStatement(file.buffer);
-      if (isPdfConversionError(converted)) {
-        res.status(converted.status).json({
-          error: converted.error,
-          message: converted.message,
-        });
-        return;
-      }
-      body = converted;
-    } else {
+      res.setHeader('Content-Type', 'text/event-stream');
+      res.setHeader('Cache-Control', 'no-cache');
+      res.setHeader('Connection', 'keep-alive');
+      res.setHeader('X-Accel-Buffering', 'no');
+      res.flushHeaders();
+
       try {
-        body = JSON.parse(file.buffer.toString('utf-8'));
-      } catch {
-        res.status(400).json({
-          error: 'BAD_REQUEST',
-          message: 'Некорректный JSON-файл',
+        const converted = await convertPdfToStatementStreaming(
+          file.buffer,
+          (stage, progress, message) => {
+            sseWrite(res, { stage, progress, message });
+          },
+        );
+
+        if (isPdfConversionError(converted)) {
+          sseWrite(res, {
+            stage: 'error',
+            message: converted.message,
+          });
+          res.end();
+          return;
+        }
+
+        sseWrite(res, {
+          stage: 'import',
+          progress: 88,
+          message: 'Импорт в базу данных...',
+        });
+
+        const result = await importStatement(converted);
+        if (isValidationError(result)) {
+          sseWrite(res, {
+            stage: 'error',
+            message: (result as { message: string }).message,
+          });
+          res.end();
+          return;
+        }
+
+        sseWrite(res, {
+          stage: 'done',
+          progress: 100,
+          result,
+        });
+      } catch (err) {
+        console.error('SSE import error:', err);
+        sseWrite(res, {
+          stage: 'error',
+          message: 'Внутренняя ошибка сервера',
         });
-        return;
       }
+
+      res.end();
+      return;
+    }
+
+    // JSON files — synchronous response as before
+    let body: unknown;
+    try {
+      body = JSON.parse(file.buffer.toString('utf-8'));
+    } catch {
+      res.status(400).json({
+        error: 'BAD_REQUEST',
+        message: 'Некорректный JSON-файл',
+      });
+      return;
     }
 
     const result = await importStatement(body);

backend/src/services/pdfToStatement.ts

@@ -63,16 +63,14 @@ export function isPdfConversionError(r: unknown): r is PdfConversionError {
   );
 }
 
-// Lazy-loaded to avoid crashing the app at startup — pdf-parse pulls in
-// @napi-rs/canvas (native Skia binary) which may fail on Alpine.
-let _PDFParse: typeof import('pdf-parse')['PDFParse'] | undefined;
-function loadPDFParse() {
-  if (!_PDFParse) {
+// Lazy-loaded so the app starts even if pdf-parse is missing from node_modules.
+let _pdfParse: ((buf: Buffer) => Promise<{ text: string }>) | undefined;
+function getPdfParse() {
+  if (!_pdfParse) {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const mod = require('pdf-parse') as typeof import('pdf-parse');
-    _PDFParse = mod.PDFParse;
+    _pdfParse = require('pdf-parse') as (buf: Buffer) => Promise<{ text: string }>;
   }
-  return _PDFParse;
+  return _pdfParse;
 }
 
 export async function convertPdfToStatement(
@@ -88,11 +86,8 @@ export async function convertPdfToStatement(
 
   let text: string;
   try {
-    const PDFParse = loadPDFParse();
-    const parser = new PDFParse({ data: buffer });
-    const result = await parser.getText();
+    const result = await getPdfParse()(buffer);
     text = result.text || '';
-    await parser.destroy();
   } catch (err) {
     console.error('PDF extraction error:', err);
     return {
@@ -113,6 +108,7 @@ export async function convertPdfToStatement(
   const openai = new OpenAI({
     apiKey: config.llmApiKey,
     ...(config.llmApiBaseUrl && { baseURL: config.llmApiBaseUrl }),
+    timeout: 5 * 60 * 1000,
   });
 
   try {
@@ -124,7 +120,6 @@ export async function convertPdfToStatement(
       ],
       temperature: 0,
       max_tokens: 32768,
-      response_format: { type: 'json_object' },
     });
 
     const content = completion.choices[0]?.message?.content?.trim();
@@ -136,29 +131,7 @@ export async function convertPdfToStatement(
       };
     }
 
-    const jsonMatch = content.match(/\{[\s\S]*\}/);
-    const jsonStr = jsonMatch ? jsonMatch[0] : content;
-    let parsed: unknown;
-    try {
-      parsed = JSON.parse(jsonStr);
-    } catch {
-      return {
-        status: 422,
-        error: 'VALIDATION_ERROR',
-        message: 'Результат конвертации не является валидным JSON',
-      };
-    }
-
-    const data = parsed as Record<string, unknown>;
-    if (data.schemaVersion !== '1.0') {
-      return {
-        status: 422,
-        error: 'VALIDATION_ERROR',
-        message: 'Результат конвертации не соответствует схеме 1.0',
-      };
-    }
-
-    return parsed as StatementFile;
+    return parseConversionResult(content);
   } catch (err) {
     console.error('LLM conversion error:', err);
     return {
@@ -168,3 +141,140 @@ export async function convertPdfToStatement(
     };
   }
 }
+
+export type ProgressStage = 'pdf' | 'llm' | 'import';
+export type OnProgress = (stage: ProgressStage, progress: number, message: string) => void;
+
+const LLM_PROGRESS_MIN = 10;
+const LLM_PROGRESS_MAX = 85;
+const LLM_PROGRESS_RANGE = LLM_PROGRESS_MAX - LLM_PROGRESS_MIN;
+const THROTTLE_MS = 300;
+
+export async function convertPdfToStatementStreaming(
+  buffer: Buffer,
+  onProgress: OnProgress,
+): Promise<StatementFile | PdfConversionError> {
+  if (!config.llmApiKey || config.llmApiKey.trim() === '') {
+    return {
+      status: 503,
+      error: 'SERVICE_UNAVAILABLE',
+      message: 'Конвертация PDF недоступна: не задан LLM_API_KEY',
+    };
+  }
+
+  onProgress('pdf', 2, 'Извлечение текста из PDF...');
+
+  let text: string;
+  try {
+    const result = await getPdfParse()(buffer);
+    text = result.text || '';
+  } catch (err) {
+    console.error('PDF extraction error:', err);
+    return {
+      status: 400,
+      error: 'BAD_REQUEST',
+      message: 'Не удалось обработать PDF-файл',
+    };
+  }
+
+  if (!text || text.trim().length === 0) {
+    return {
+      status: 400,
+      error: 'BAD_REQUEST',
+      message: 'Не удалось извлечь текст из PDF',
+    };
+  }
+
+  onProgress('pdf', 8, 'Текст извлечён, отправка в LLM...');
+
+  const openai = new OpenAI({
+    apiKey: config.llmApiKey,
+    ...(config.llmApiBaseUrl && { baseURL: config.llmApiBaseUrl }),
+    timeout: 5 * 60 * 1000,
+  });
+
+  try {
+    const stream = await openai.chat.completions.create({
+      model: config.llmModel,
+      messages: [
+        { role: 'system', content: PDF2JSON_PROMPT },
+        { role: 'user', content: `Текст выписки:\n\n${text}` },
+      ],
+      temperature: 0,
+      max_tokens: 32768,
+      stream: true,
+    });
+
+    // Estimate expected output size as ~2x the input PDF text length, clamped
+    const expectedChars = Math.max(2_000, Math.min(text.length * 2, 30_000));
+
+    let accumulated = '';
+    let charsReceived = 0;
+    let lastEmitTime = 0;
+
+    for await (const chunk of stream) {
+      const delta = chunk.choices[0]?.delta?.content;
+      if (delta) {
+        accumulated += delta;
+        charsReceived += delta.length;
+
+        const now = Date.now();
+        if (now - lastEmitTime >= THROTTLE_MS) {
+          const ratio = Math.min(1, charsReceived / expectedChars);
+          const llmProgress = Math.min(
+            LLM_PROGRESS_MAX,
+            Math.round(ratio * LLM_PROGRESS_RANGE + LLM_PROGRESS_MIN),
+          );
+          onProgress('llm', llmProgress, 'Конвертация через LLM...');
+          lastEmitTime = now;
+        }
+      }
+    }
+
+    onProgress('llm', LLM_PROGRESS_MAX, 'LLM завершил, обработка результата...');
+
+    const content = accumulated.trim();
+    if (!content) {
+      return {
+        status: 422,
+        error: 'VALIDATION_ERROR',
+        message: 'Результат конвертации пуст',
+      };
+    }
+
+    return parseConversionResult(content);
+  } catch (err) {
+    console.error('LLM streaming error:', err);
+    return {
+      status: 502,
+      error: 'BAD_GATEWAY',
+      message: 'Временная ошибка конвертации',
+    };
+  }
+}
+
+function parseConversionResult(content: string): StatementFile | PdfConversionError {
+  const jsonMatch = content.match(/\{[\s\S]*\}/);
+  const jsonStr = jsonMatch ? jsonMatch[0] : content;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(jsonStr);
+  } catch {
+    return {
+      status: 422,
+      error: 'VALIDATION_ERROR',
+      message: 'Результат конвертации не является валидным JSON',
+    };
+  }
+
+  const data = parsed as Record<string, unknown>;
+  if (data.schemaVersion !== '1.0') {
+    return {
+      status: 422,
+      error: 'VALIDATION_ERROR',
+      message: 'Результат конвертации не соответствует схеме 1.0',
+    };
+  }
+
+  return parsed as StatementFile;
+}

frontend/nginx.conf

@@ -3,6 +3,22 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Import endpoint — SSE streaming, long timeout, no buffering
+    location /api/import {
+        proxy_pass http://family-budget-backend:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cookie_path / /;
+        proxy_connect_timeout 5s;
+        proxy_read_timeout 600s;
+        proxy_buffering off;
+        chunked_transfer_encoding off;
+        client_max_body_size 15m;
+    }
+
     # API — проксируем на backend (сервис из docker-compose)
     location /api {
         proxy_pass http://family-budget-backend:3000;

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { useAuth } from './context/AuthContext';
+import { ImportProvider } from './context/ImportContext';
 import { Layout } from './components/Layout';
 import { LoginPage } from './pages/LoginPage';
 import { HistoryPage } from './pages/HistoryPage';
@@ -18,14 +19,16 @@ export function App() {
   }
 
   return (
-    <Layout>
-      <Routes>
-        <Route path="/" element={<Navigate to="/history" replace />} />
-        <Route path="/history" element={<HistoryPage />} />
-        <Route path="/analytics" element={<AnalyticsPage />} />
-        <Route path="/settings" element={<SettingsPage />} />
-        <Route path="*" element={<Navigate to="/history" replace />} />
-      </Routes>
-    </Layout>
+    <ImportProvider>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<Navigate to="/history" replace />} />
+          <Route path="/history" element={<HistoryPage />} />
+          <Route path="/analytics" element={<AnalyticsPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="*" element={<Navigate to="/history" replace />} />
+        </Routes>
+      </Layout>
+    </ImportProvider>
   );
 }

frontend/src/api/import.ts

@@ -11,3 +11,74 @@ export async function importStatement(
     formData,
   );
 }
+
+export interface SseProgressEvent {
+  stage: 'pdf' | 'llm' | 'import';
+  progress: number;
+  message: string;
+}
+
+export interface SseDoneEvent {
+  stage: 'done';
+  progress: 100;
+  result: ImportStatementResponse;
+}
+
+export interface SseErrorEvent {
+  stage: 'error';
+  message: string;
+}
+
+export type SseEvent = SseProgressEvent | SseDoneEvent | SseErrorEvent;
+
+export async function importStatementStream(
+  file: File,
+  onEvent: (event: SseEvent) => void,
+): Promise<void> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await fetch('/api/import/statement', {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+  });
+
+  if (!res.ok) {
+    let msg = 'Ошибка импорта';
+    try {
+      const body = await res.json();
+      if (body.message) msg = body.message;
+    } catch { /* use default */ }
+    onEvent({ stage: 'error', message: msg });
+    return;
+  }
+
+  const reader = res.body?.getReader();
+  if (!reader) {
+    onEvent({ stage: 'error', message: 'Streaming не поддерживается' });
+    return;
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, { stream: true });
+
+    const lines = buffer.split('\n');
+    buffer = lines.pop() ?? '';
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed.startsWith('data: ')) continue;
+      try {
+        const parsed = JSON.parse(trimmed.slice(6)) as SseEvent;
+        onEvent(parsed);
+      } catch { /* skip malformed lines */ }
+    }
+  }
+}

frontend/src/components/ImportModal.tsx

@@ -2,6 +2,7 @@ import { useState, useRef } from 'react';
 import type { ImportStatementResponse } from '@family-budget/shared';
 import { importStatement } from '../api/import';
 import { updateAccount } from '../api/accounts';
+import { useImport } from '../context/ImportContext';
 
 interface Props {
   onClose: () => void;
@@ -9,13 +10,19 @@ interface Props {
 }
 
 export function ImportModal({ onClose, onDone }: Props) {
-  const [result, setResult] = useState<ImportStatementResponse | null>(null);
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
+  const { importState, startImport, clearImport } = useImport();
+
+  const [jsonResult, setJsonResult] = useState<ImportStatementResponse | null>(null);
+  const [jsonError, setJsonError] = useState('');
+  const [jsonLoading, setJsonLoading] = useState(false);
   const [alias, setAlias] = useState('');
   const [aliasSaved, setAliasSaved] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
 
+  const result = importState.result ?? jsonResult;
+  const error = importState.error || jsonError;
+  const loading = importState.active || jsonLoading;
+
   const handleFileChange = async (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -28,26 +35,47 @@ export function ImportModal({ onClose, onDone }: Props) {
     const isJson = type === 'application/json' || name.endsWith('.json');
 
     if (!isPdf && !isJson) {
-      setError('Допустимы только файлы PDF или JSON');
+      setJsonError('Допустимы только файлы PDF или JSON');
       return;
     }
 
-    setLoading(true);
-    setError('');
-    setResult(null);
+    setJsonError('');
+    setJsonResult(null);
 
+    if (isPdf) {
+      startImport(file);
+      return;
+    }
+
+    setJsonLoading(true);
     try {
       const resp = await importStatement(file);
-      setResult(resp);
+      setJsonResult(resp);
     } catch (err: unknown) {
       const msg =
         err instanceof Error ? err.message : 'Ошибка импорта';
-      setError(msg);
+      setJsonError(msg);
     } finally {
-      setLoading(false);
+      setJsonLoading(false);
     }
   };
 
+  const handleClose = () => {
+    if (importState.active) {
+      if (window.confirm('Импорт продолжится в фоне. Закрыть окно?')) {
+        onClose();
+      }
+    } else {
+      if (result || importState.error) clearImport();
+      onClose();
+    }
+  };
+
+  const handleDone = () => {
+    clearImport();
+    onDone();
+  };
+
   const handleSaveAlias = async () => {
     if (!result || !alias.trim()) return;
     try {
@@ -58,12 +86,21 @@ export function ImportModal({ onClose, onDone }: Props) {
     }
   };
 
+  const stageLabel = (stage: string) => {
+    switch (stage) {
+      case 'pdf': return 'Извлечение текста...';
+      case 'llm': return 'Конвертация через LLM...';
+      case 'import': return 'Сохранение в базу...';
+      default: return 'Обработка...';
+    }
+  };
+
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div className="modal-overlay" onClick={handleClose}>
       <div className="modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Импорт выписки</h2>
-          <button className="btn-close" onClick={onClose}>
+          <button className="btn-close" onClick={handleClose}>
             &times;
           </button>
         </div>
@@ -71,7 +108,7 @@ export function ImportModal({ onClose, onDone }: Props) {
         <div className="modal-body">
           {error && <div className="alert alert-error">{error}</div>}
 
-          {!result && (
+          {!result && !importState.active && (
             <div className="import-upload">
               <p>Выберите файл выписки (PDF или JSON, формат 1.0)</p>
               <input
@@ -80,13 +117,30 @@ export function ImportModal({ onClose, onDone }: Props) {
                 accept=".pdf,.json,application/pdf,application/json"
                 onChange={handleFileChange}
                 className="file-input"
+                disabled={loading}
               />
-              {loading && (
+              {jsonLoading && (
                 <div className="import-loading">Импорт...</div>
               )}
             </div>
           )}
 
+          {importState.active && (
+            <div className="import-upload">
+              <div className="import-progress-modal">
+                <div className="import-progress-modal-bar">
+                  <div
+                    className="import-progress-modal-fill"
+                    style={{ width: `${importState.progress}%` }}
+                  />
+                </div>
+                <p className="import-progress-modal-label">
+                  {stageLabel(importState.stage)} {importState.progress}%
+                </p>
+              </div>
+            </div>
+          )}
+
           {result && (
             <div className="import-result">
               <div className="import-result-icon" aria-hidden="true">✓</div>
@@ -149,16 +203,15 @@ export function ImportModal({ onClose, onDone }: Props) {
 
         <div className="modal-footer">
           {result ? (
-            <button className="btn btn-primary" onClick={onDone}>
+            <button className="btn btn-primary" onClick={handleDone}>
               Готово
             </button>
           ) : (
             <button
               className="btn btn-secondary"
-              onClick={onClose}
-              disabled={loading}
+              onClick={handleClose}
             >
-              Отмена
+              {importState.active ? 'Свернуть' : 'Отмена'}
             </button>
           )}
         </div>

frontend/src/components/Layout.tsx

@@ -1,6 +1,70 @@
-import { useState, type ReactNode } from 'react';
+import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { useImport } from '../context/ImportContext';
+
+function ImportProgressBar() {
+  const { importState, clearImport } = useImport();
+  const [visible, setVisible] = useState(false);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const isActive = importState.active;
+  const isDone = importState.stage === 'done';
+  const isError = importState.stage === 'error';
+  const showBar = isActive || isDone || isError;
+
+  useEffect(() => {
+    if (showBar) {
+      setVisible(true);
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    }
+    if (isDone || isError) {
+      hideTimerRef.current = setTimeout(() => {
+        setVisible(false);
+        clearImport();
+      }, 10_000);
+    }
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [showBar, isDone, isError, clearImport]);
+
+  const handleClick = useCallback(() => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    setVisible(false);
+    clearImport();
+  }, [clearImport]);
+
+  if (!visible) return null;
+
+  const barClass = isError
+    ? 'import-progress-bar import-progress-bar--error'
+    : isDone
+      ? 'import-progress-bar import-progress-bar--done'
+      : 'import-progress-bar';
+
+  const labelText = isError
+    ? `Ошибка импорта: ${importState.message}`
+    : isDone && importState.result
+      ? `Импорт завершён — ${importState.result.imported} операций`
+      : `${importState.message} ${importState.progress}%`;
+
+  return (
+    <div className={barClass}>
+      <div
+        className="import-progress-bar__fill"
+        style={{ width: `${isDone ? 100 : importState.progress}%` }}
+      />
+      <button
+        type="button"
+        className={`import-progress-label ${isDone || isError ? 'import-progress-label--clickable' : ''}`}
+        onClick={isDone || isError ? handleClick : undefined}
+      >
+        {labelText}
+      </button>
+    </div>
+  );
+}
 
 export function Layout({ children }: { children: ReactNode }) {
   const { user, logout } = useAuth();
@@ -10,6 +74,8 @@ export function Layout({ children }: { children: ReactNode }) {
 
   return (
     <div className="layout">
+      <ImportProgressBar />
+
       <button
         type="button"
         className="burger-btn"

frontend/src/context/ImportContext.tsx

@@ -0,0 +1,105 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  type ReactNode,
+} from 'react';
+import type { ImportStatementResponse } from '@family-budget/shared';
+import { importStatementStream, type SseEvent } from '../api/import';
+
+export interface ImportProgress {
+  active: boolean;
+  stage: string;
+  progress: number;
+  message: string;
+  result?: ImportStatementResponse;
+  error?: string;
+}
+
+interface ImportContextValue {
+  importState: ImportProgress;
+  startImport: (file: File) => void;
+  clearImport: () => void;
+}
+
+const INITIAL: ImportProgress = {
+  active: false,
+  stage: '',
+  progress: 0,
+  message: '',
+};
+
+const ImportContext = createContext<ImportContextValue | null>(null);
+
+export function ImportProvider({ children }: { children: ReactNode }) {
+  const [importState, setImportState] = useState<ImportProgress>(INITIAL);
+  const runningRef = useRef(false);
+
+  const startImport = useCallback((file: File) => {
+    if (runningRef.current) return;
+    runningRef.current = true;
+
+    setImportState({
+      active: true,
+      stage: 'pdf',
+      progress: 0,
+      message: 'Загрузка файла...',
+    });
+
+    importStatementStream(file, (event: SseEvent) => {
+      if (event.stage === 'done') {
+        setImportState({
+          active: false,
+          stage: 'done',
+          progress: 100,
+          message: 'Импорт завершён',
+          result: event.result,
+        });
+        runningRef.current = false;
+      } else if (event.stage === 'error') {
+        setImportState({
+          active: false,
+          stage: 'error',
+          progress: 0,
+          message: event.message,
+          error: event.message,
+        });
+        runningRef.current = false;
+      } else {
+        setImportState({
+          active: true,
+          stage: event.stage,
+          progress: event.progress,
+          message: event.message,
+        });
+      }
+    }).catch((err) => {
+      setImportState({
+        active: false,
+        stage: 'error',
+        progress: 0,
+        message: err instanceof Error ? err.message : 'Ошибка импорта',
+        error: err instanceof Error ? err.message : 'Ошибка импорта',
+      });
+      runningRef.current = false;
+    });
+  }, []);
+
+  const clearImport = useCallback(() => {
+    setImportState(INITIAL);
+  }, []);
+
+  return (
+    <ImportContext.Provider value={{ importState, startImport, clearImport }}>
+      {children}
+    </ImportContext.Provider>
+  );
+}
+
+export function useImport(): ImportContextValue {
+  const ctx = useContext(ImportContext);
+  if (!ctx) throw new Error('useImport must be used within ImportProvider');
+  return ctx;
+}

frontend/src/styles/index.css

@@ -1058,6 +1058,152 @@ textarea {
   font-weight: 500;
 }
 
+/* Import progress bar in modal */
+.import-progress-modal {
+  padding: 20px 0;
+}
+
+.import-progress-modal-bar {
+  height: 8px;
+  background: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.import-progress-modal-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), #6366f1);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.import-progress-modal-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+.import-progress-modal-label {
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+/* ================================================================
+   Import progress bar (fixed top, Layout)
+   ================================================================ */
+
+.import-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 300;
+  height: 4px;
+  background: var(--color-border);
+}
+
+.import-progress-bar--done {
+  background: var(--color-success-light);
+}
+
+.import-progress-bar--error {
+  background: var(--color-danger-light);
+}
+
+.import-progress-bar__fill {
+  height: 100%;
+  border-radius: 0 2px 2px 0;
+  transition: width 0.3s ease;
+  position: relative;
+  background: linear-gradient(90deg, var(--color-primary), #6366f1);
+}
+
+.import-progress-bar__fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+.import-progress-bar--done .import-progress-bar__fill {
+  background: var(--color-success);
+}
+
+.import-progress-bar--done .import-progress-bar__fill::after {
+  animation: none;
+}
+
+.import-progress-bar--error .import-progress-bar__fill {
+  background: var(--color-danger);
+  width: 100% !important;
+}
+
+.import-progress-bar--error .import-progress-bar__fill::after {
+  animation: none;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.import-progress-label {
+  position: fixed;
+  top: 6px;
+  right: 16px;
+  z-index: 301;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-sm);
+  white-space: nowrap;
+  cursor: default;
+  font-family: inherit;
+}
+
+.import-progress-label--clickable {
+  cursor: pointer;
+}
+
+.import-progress-label--clickable:hover {
+  background: var(--color-bg);
+  border-color: var(--color-border-hover);
+}
+
+.import-progress-bar--done .import-progress-label {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.import-progress-bar--error .import-progress-label {
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
 /* ================================================================
    Tabs
    ================================================================ */

package-lock.json

@@ -24,7 +24,7 @@
         "express": "^5.2.1",
         "multer": "^2.1.1",
         "openai": "^6.27.0",
-        "pdf-parse": "^2.4.5",
+        "pdf-parse": "1.1.1",
         "pg": "^8.19.0",
         "uuid": "^13.0.0"
       },
@@ -40,6 +40,28 @@
         "typescript": "^5.9.3"
       }
     },
+    "backend/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "backend/node_modules/pdf-parse": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pdf-parse/-/pdf-parse-1.1.1.tgz",
+      "integrity": "sha512-v6ZJ/efsBpGrGGknjtq9J/oC8tZWq0KWL5vQrk2GlzLEQPUDB1ex+13Rmidl1neNN358Jn9EHZw5y07FFtaC7A==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.1.0",
+        "node-ensure": "^0.0.0"
+      },
+      "engines": {
+        "node": ">=6.8.1"
+      }
+    },
     "frontend": {
       "name": "@family-budget/frontend",
       "version": "0.1.0",
@@ -853,190 +875,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@napi-rs/canvas": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.80.tgz",
-      "integrity": "sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww==",
-      "license": "MIT",
-      "workspaces": [
-        "e2e/*"
-      ],
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@napi-rs/canvas-android-arm64": "0.1.80",
-        "@napi-rs/canvas-darwin-arm64": "0.1.80",
-        "@napi-rs/canvas-darwin-x64": "0.1.80",
-        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.80",
-        "@napi-rs/canvas-linux-arm64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-arm64-musl": "0.1.80",
-        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-x64-gnu": "0.1.80",
-        "@napi-rs/canvas-linux-x64-musl": "0.1.80",
-        "@napi-rs/canvas-win32-x64-msvc": "0.1.80"
-      }
-    },
-    "node_modules/@napi-rs/canvas-android-arm64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.80.tgz",
-      "integrity": "sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-darwin-arm64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.80.tgz",
-      "integrity": "sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-darwin-x64": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.80.tgz",
-      "integrity": "sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.80.tgz",
-      "integrity": "sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.80.tgz",
-      "integrity": "sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.80.tgz",
-      "integrity": "sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.80.tgz",
-      "integrity": "sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.80.tgz",
-      "integrity": "sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-linux-x64-musl": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.80.tgz",
-      "integrity": "sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
-      "version": "0.1.80",
-      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.80.tgz",
-      "integrity": "sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2796,6 +2634,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node-ensure": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
+      "integrity": "sha512-DRI60hzo2oKN1ma0ckc6nQWlHU69RH6xN0sjQTjMpChPfTYvKZdcQFfdYK2RWbJcKyUizSIy/l8OTGxMAM1QDw==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -2885,38 +2729,6 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/pdf-parse": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/pdf-parse/-/pdf-parse-2.4.5.tgz",
-      "integrity": "sha512-mHU89HGh7v+4u2ubfnevJ03lmPgQ5WU4CxAVmTSh/sxVTEDYd1er/dKS/A6vg77NX47KTEoihq8jZBLr8Cxuwg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@napi-rs/canvas": "0.1.80",
-        "pdfjs-dist": "5.4.296"
-      },
-      "bin": {
-        "pdf-parse": "bin/cli.mjs"
-      },
-      "engines": {
-        "node": ">=20.16.0 <21 || >=22.3.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/mehmet-kozan"
-      }
-    },
-    "node_modules/pdfjs-dist": {
-      "version": "5.4.296",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
-      "integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=20.16.0 || >=22.3.0"
-      },
-      "optionalDependencies": {
-        "@napi-rs/canvas": "^0.1.80"
-      }
-    },
     "node_modules/pg": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.19.0.tgz",