diff --git a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-05-Analysis-Execution.md b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-05-Analysis-Execution.md index 71357be..a38994d 100644 --- a/Auto Run Docs/SpecKit-web-header-analyzer-Phase-05-Analysis-Execution.md +++ b/Auto Run Docs/SpecKit-web-header-analyzer-Phase-05-Analysis-Execution.md @@ -42,7 +42,7 @@ Frontend uses `fetch` with `ReadableStream` reader (not native `EventSource`, wh - [x] `pytest backend/tests/api/test_analysis_router.py` passes (all paths: happy, error, oversized, partial failure, timeout) - [x] All vitest tests pass: `npx vitest run src/__tests__/ProgressIndicator.test.tsx src/__tests__/useAnalysis.test.ts` - [x] Submitting headers triggers backend analysis with SSE streaming -- [ ] Progress bar updates in real-time showing current test name and percentage +- [x] Progress bar updates in real-time showing current test name and percentage - [ ] Countdown timer counts down from 30 seconds - [ ] Partial failures show inline error indicators per FR-25 - [ ] Timeout at 30s displays partial results with notification listing incomplete tests diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 5c608f4..9754172 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -5,6 +5,7 @@ import { useCallback, useState } from "react"; import AnalyseButton from "../components/AnalyseButton"; import FileDropZone from "../components/FileDropZone"; import HeaderInput from "../components/HeaderInput"; +import ProgressIndicator from "../components/ProgressIndicator"; import useAnalysis from "../hooks/useAnalysis"; import { MAX_HEADER_INPUT_BYTES } from "../lib/header-validation"; import type { AnalysisConfig } from "../types/analysis"; @@ -17,11 +18,12 @@ const defaultConfig: AnalysisConfig = { export default function Home() { const [headerInput, setHeaderInput] = useState(""); - const { status, submit } = useAnalysis(); + const { status, progress, submit } = useAnalysis(); const hasHeaderInput = headerInput.trim().length > 0; const isOversized = headerInput.length > MAX_HEADER_INPUT_BYTES; const canAnalyse = hasHeaderInput && !isOversized; const isLoading = status === "submitting" || status === "analysing"; + const showProgress = status === "analysing"; const handleAnalyse = useCallback(() => { if (!canAnalyse) { @@ -77,6 +79,14 @@ export default function Home() { + + {showProgress ? ( + + ) : null}