diff --git a/web-report/src-e2e/App.test.tsx b/web-report/src-e2e/App.test.tsx
index e55b676..f0bf882 100644
--- a/web-report/src-e2e/App.test.tsx
+++ b/web-report/src-e2e/App.test.tsx
@@ -1,4 +1,4 @@
-import {render, waitFor, screen, act, fireEvent} from '@testing-library/react';
+import {render, waitFor, screen, act, fireEvent, within} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {resolve} from "path";
 import {readFileSync} from "fs";
@@ -18,7 +18,7 @@ vi.mock('@/lib/utils.tsx', async (importOriginal) => {
         fetchFileContent: vi.fn(async (filePath: string) => {
             const folderPath = resolve(__dirname, './static/');
             const fullPath = resolve(folderPath, filePath);
-            if (fullPath.endsWith('.json')) {
+            if (fullPath.endsWith('report.json')) {
                 return reportData;
             } else if (filePath.endsWith('.java')) {
                 return readFileSync(fullPath, 'utf-8');
@@ -134,6 +134,83 @@ describe('App test', () => {
         });
     });
 
+    it('changing a review state marks it dirty and updates counts', async () => {
+        render(<App/>);
+        await waitFor(() => {
+            expect(screen.getByTestId('tab-tests')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.focus(screen.getByTestId('tab-tests'));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-file-0')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(within(screen.getByTestId('test-file-0')).getByRole('button'));
+        });
+
+        const firstTestId = reportData.testCases[0].id as string;
+        await waitFor(() => {
+            expect(screen.getByTestId(`test-review-state-${firstTestId}`)).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.change(screen.getByTestId(`test-review-state-${firstTestId}`), {
+                target: {value: 'ACCEPTED'},
+            });
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('reviews-unsaved-banner')).toBeInTheDocument();
+            expect(screen.getByTestId('reviews-filter-ACCEPTED')).toHaveTextContent('ACCEPTED (1)');
+            expect(screen.getByTestId('reviews-filter-NOT-REVIEWED'))
+                .toHaveTextContent(`NOT-REVIEWED (${reportData.testCases.length - 1})`);
+        });
+    });
+
+    it('clicking a test opens the detail dialog and close dismisses it', async () => {
+        render(<App/>);
+        await waitFor(() => {
+            expect(screen.getByTestId('tab-tests')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.focus(screen.getByTestId('tab-tests'));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-file-0')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(within(screen.getByTestId('test-file-0')).getByRole('button'));
+        });
+
+        const firstTestId = reportData.testCases[0].id as string;
+        await waitFor(() => {
+            expect(screen.getByTestId(`test-review-open-${firstTestId}`)).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(screen.getByTestId(`test-review-open-${firstTestId}`));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-detail-dialog')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(screen.getByTestId('test-detail-dialog-close'));
+        });
+
+        await waitFor(() => {
+            expect(screen.queryByTestId('test-detail-dialog')).toBeNull();
+        });
+    });
+
     it('check faults component', async () => {
         render(<App />);
         expect(screen.getByText(/Please wait, files are loading.../)).toBeInTheDocument();
diff --git a/web-report/src/AppProvider.tsx b/web-report/src/AppProvider.tsx
index a84f0f6..a73695c 100644
--- a/web-report/src/AppProvider.tsx
+++ b/web-report/src/AppProvider.tsx
@@ -1,21 +1,54 @@
-import {createContext, useContext, useState, ReactNode, useEffect} from 'react';
+import {createContext, useContext, useState, ReactNode, useEffect, useRef, useCallback, useMemo} from 'react';
 import {WebFuzzingCommonsReport} from "@/types/GeneratedTypes.tsx";
-import {ITestFiles} from "@/types/General.tsx";
 import {fetchFileContent, ITransformedReport, transformWebFuzzingReport} from "@/lib/utils.tsx";
 import {webFuzzingCommonsReportSchema} from "@/types/GeneratedTypesZod.ts";
 import {ZodIssue} from "zod";
+import {
+    DEFAULT_REVIEW,
+    parseReviewFile,
+    REVIEW_FILE_NAME,
+    REVIEW_SCHEMA_VERSION,
+    REVIEW_STATE,
+    ReviewFile,
+    ReviewState,
+    reviewsEqual,
+    TestReview,
+} from "@/types/Review.ts";
+
+type FileSystemApiHandle = {
+    createWritable: () => Promise<{write: (data: string) => Promise<void>; close: () => Promise<void>}>;
+    queryPermission?: (opts: {mode: 'read' | 'readwrite'}) => Promise<'granted' | 'denied' | 'prompt'>;
+    requestPermission?: (opts: {mode: 'read' | 'readwrite'}) => Promise<'granted' | 'denied' | 'prompt'>;
+};
+
+type WindowWithFileSystemApi = Window & {
+    showSaveFilePicker?: (opts: {
+        suggestedName?: string;
+        types?: Array<{description: string; accept: Record<string, string[]>}>;
+    }) => Promise<FileSystemApiHandle>;
+};
 
 type AppContextType = {
     data: WebFuzzingCommonsReport | null;
     loading: boolean;
     error: string | null;
-    testFiles: ITestFiles[];
+    testFiles: Record<string, string>;
+    loadTestFile: (path: string) => Promise<void>;
     transformedReport: ITransformedReport[];
     filterEndpoints: (activeFilters: Record<number, string>) => ITransformedReport[];
     filteredEndpoints: ITransformedReport[];
     invalidReportErrors: ZodIssue[] | null;
     lowCodeMode: boolean;
     setLowCodeMode: (v: boolean) => void;
+    reviews: Record<string, TestReview>;
+    getReview: (testId: string) => TestReview;
+    setReviewState: (testId: string, state: ReviewState) => void;
+    setReviewComment: (testId: string, comment: string) => void;
+    isDirty: boolean;
+    saveReviews: () => void;
+    loadReviews: (file: File) => Promise<void>;
+    reviewMessage: {type: "info" | "error"; text: string} | null;
+    clearReviewMessage: () => void;
 };
 
 const AppContext = createContext<AppContextType | undefined>(undefined);
@@ -32,9 +65,22 @@ export const AppProvider = ({ children }: AppProviderProps) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [invalidReportErrors, setInvalidReportErrors] = useState<ZodIssue[] | null>(null);
-    const [testFiles, setTestFiles] = useState<ITestFiles[]>([]);
+    const [testFiles, setTestFiles] = useState<Record<string, string>>({});
+    const inFlightFilesRef = useRef<Map<string, Promise<void>>>(new Map());
     const [lowCodeMode, setLowCodeMode] = useState<boolean>(initialLowCode);
-    const transformedReport = transformWebFuzzingReport(data);
+    const transformedReport = useMemo(() => transformWebFuzzingReport(data), [data]);
+
+    const [reviews, setReviews] = useState<Record<string, TestReview>>({});
+    const reviewsRef = useRef<Record<string, TestReview>>({});
+    const baselineRef = useRef<Record<string, TestReview>>({});
+    const [isDirty, setIsDirty] = useState(false);
+    const [reviewMessage, setReviewMessage] = useState<{type: "info" | "error"; text: string} | null>(null);
+
+    const applyReviews = useCallback((next: Record<string, TestReview>) => {
+        reviewsRef.current = next;
+        setReviews(next);
+        setIsDirty(!reviewsEqual(next, baselineRef.current));
+    }, []);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -86,35 +132,203 @@ export const AppProvider = ({ children }: AppProviderProps) => {
         fetchData();
     }, []);
 
-    useEffect(() => {
-        if(data?.testFilePaths){
-            data.testFilePaths.map(file => {
-                fetchFileContent(file).then((content) => {
-                    if (typeof content === "string") {
-                        setTestFiles(prev => [...prev, {
-                            name: file,
-                            code: content
-                        }]);
-                    } else {
-                        setError("Could not load the test file. Please check if the file exists and is accessible.");
-                    }
-                }).catch((error) => {
-                    console.error(error);
+    const loadTestFile = useCallback(async (path: string): Promise<void> => {
+        if (!path) return;
+        if (testFiles[path] !== undefined) return;
+        const existing = inFlightFilesRef.current.get(path);
+        if (existing) return existing;
+
+        const promise = (async () => {
+            try {
+                const content = await fetchFileContent(path);
+                if (typeof content === "string") {
+                    setTestFiles(prev => (prev[path] !== undefined ? prev : {...prev, [path]: content}));
+                } else {
                     setError("Could not load the test file. Please check if the file exists and is accessible.");
-                })
-            })
+                }
+            } catch (e) {
+                console.error(e);
+                setError("Could not load the test file. Please check if the file exists and is accessible.");
+            } finally {
+                inFlightFilesRef.current.delete(path);
+            }
+        })();
+
+        inFlightFilesRef.current.set(path, promise);
+        return promise;
+    }, [testFiles]);
+
+    useEffect(() => {
+        if (!data) return;
+        if (window.location.protocol === 'file:') {
+            setReviewMessage({
+                type: "info",
+                text: `Auto-loading ${REVIEW_FILE_NAME} is not possible when opening this page directly from disk. Either launch the report via webreport.py, or click "Load reviews" to import the file manually.`,
+            });
+            return;
         }
+        let cancelled = false;
+        fetchFileContent('./' + REVIEW_FILE_NAME)
+            .then(parsed => {
+                if (cancelled || !parsed) return;
+                try {
+                    const loaded = parseReviewFile(parsed);
+                    reviewsRef.current = loaded;
+                    baselineRef.current = loaded;
+                    setReviews(loaded);
+                    setIsDirty(false);
+                    setReviewMessage({
+                        type: "info",
+                        text: `Auto-loaded ${Object.keys(loaded).length} review(s) from ${REVIEW_FILE_NAME}.`,
+                    });
+                } catch (e) {
+                    console.warn("Auto-load of reviews failed:", e);
+                }
+            })
+            .catch(() => { /* silent — expected when no review file is present or under file:// */ });
+        return () => { cancelled = true; };
     }, [data]);
 
+    useEffect(() => {
+        if (!isDirty) return;
+        const handler = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", handler);
+        return () => window.removeEventListener("beforeunload", handler);
+    }, [isDirty]);
+
+    const getReview = useCallback(
+        (testId: string): TestReview => reviewsRef.current[testId] ?? DEFAULT_REVIEW,
+        [],
+    );
+
+    const setReviewState = useCallback((testId: string, state: ReviewState) => {
+        const prev = reviewsRef.current;
+        const existing = prev[testId] ?? DEFAULT_REVIEW;
+        if (existing.state === state) return;
+        applyReviews({...prev, [testId]: {...existing, state}});
+    }, [applyReviews]);
+
+    const setReviewComment = useCallback((testId: string, comment: string) => {
+        const prev = reviewsRef.current;
+        const existing = prev[testId] ?? DEFAULT_REVIEW;
+        if (existing.comment === comment) return;
+        applyReviews({...prev, [testId]: {...existing, comment}});
+    }, [applyReviews]);
+
+    const fileHandleRef = useRef<FileSystemApiHandle | null>(null);
+
+    const saveReviews = useCallback(async () => {
+        // Flush any pending textarea edits (local-state rows commit on blur)
+        const active = document.activeElement;
+        if (active instanceof HTMLElement && (active.tagName === 'TEXTAREA' || active.tagName === 'INPUT')) {
+            active.blur();
+        }
+
+        const source = reviewsRef.current;
+        const file: ReviewFile = {
+            schemaVersion: REVIEW_SCHEMA_VERSION,
+            reviews: {},
+        };
+        for (const [id, r] of Object.entries(source)) {
+            const comment = (r.comment ?? "").trim();
+            if (r.state !== REVIEW_STATE.NOT_REVIEWED || comment !== "") {
+                file.reviews[id] = {state: r.state, comment: r.comment ?? ""};
+            }
+        }
+        const json = JSON.stringify(file, null, 2);
+        const reviewCount = Object.keys(file.reviews).length;
+
+        const commitBaseline = () => {
+            baselineRef.current = {...source};
+            setIsDirty(false);
+        };
+
+        // Preferred path: File System Access API (Chrome/Edge, secure context).
+        // Lets subsequent saves overwrite the same file without the OS appending (1), (2)...
+        const showSaveFilePicker = (window as WindowWithFileSystemApi).showSaveFilePicker;
+        if (typeof showSaveFilePicker === 'function') {
+            try {
+                let handle = fileHandleRef.current;
+                if (handle) {
+                    const perm = (await handle.queryPermission?.({mode: 'readwrite'})) ?? 'granted';
+                    if (perm !== 'granted') {
+                        const req = (await handle.requestPermission?.({mode: 'readwrite'})) ?? 'denied';
+                        if (req !== 'granted') handle = null;
+                    }
+                }
+                if (!handle) {
+                    handle = await showSaveFilePicker({
+                        suggestedName: REVIEW_FILE_NAME,
+                        types: [{description: 'JSON', accept: {'application/json': ['.json']}}],
+                    });
+                    fileHandleRef.current = handle;
+                }
+                const writable = await handle.createWritable();
+                await writable.write(json);
+                await writable.close();
+                commitBaseline();
+                setReviewMessage({
+                    type: "info",
+                    text: `Saved ${reviewCount} review(s). Subsequent saves will overwrite this file silently.`,
+                });
+                return;
+            } catch (e) {
+                // User cancelled the picker — bail without downloading.
+                if (e instanceof DOMException && e.name === 'AbortError') return;
+                console.warn('File System Access API failed, falling back to download:', e);
+                fileHandleRef.current = null;
+            }
+        }
+
+        // Fallback: anchor download. On Windows this may auto-rename to report-review(1).json
+        // when "Ask where to save each file" is disabled — unavoidable without the API above.
+        const blob = new Blob([json], {type: "application/json"});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = REVIEW_FILE_NAME;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        commitBaseline();
+        setReviewMessage({
+            type: "info",
+            text: `Saved ${reviewCount} review(s). Place the downloaded ${REVIEW_FILE_NAME} next to report.json.`,
+        });
+    }, []);
+
+    const loadReviews = useCallback(async (file: File) => {
+        try {
+            const text = await file.text();
+            const parsed = JSON.parse(text);
+            const loaded = parseReviewFile(parsed);
+            reviewsRef.current = loaded;
+            baselineRef.current = loaded;
+            setReviews(loaded);
+            setIsDirty(false);
+            setReviewMessage({
+                type: "info",
+                text: `Loaded ${Object.keys(loaded).length} review(s) from ${file.name}.`,
+            });
+        } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setReviewMessage({type: "error", text: `Failed to load reviews: ${msg}`});
+        }
+    }, []);
+
+    const clearReviewMessage = useCallback(() => setReviewMessage(null), []);
+
     const [filteredEndpoints, setFilteredEndpoints] = useState(transformedReport);
 
     useEffect(() => {
-        // Transform the report data into a format suitable for filtering
         if (data) {
-            const transformed = transformWebFuzzingReport(data);
-            setFilteredEndpoints(transformed);
+            setFilteredEndpoints(transformedReport);
         }
-    }, [data]);
+    }, [data, transformedReport]);
 
     const filterEndpoints = (activeFilters: Record<number, string>) => {
         // Filter the endpoints based on the active filters
@@ -175,7 +389,28 @@ export const AppProvider = ({ children }: AppProviderProps) => {
         return filtered;
     }
 
-    const value: AppContextType = { data, loading, error, testFiles, transformedReport, filterEndpoints, filteredEndpoints, invalidReportErrors, lowCodeMode, setLowCodeMode };
+    const value: AppContextType = {
+        data,
+        loading,
+        error,
+        testFiles,
+        transformedReport,
+        filterEndpoints,
+        filteredEndpoints,
+        invalidReportErrors,
+        lowCodeMode,
+        setLowCodeMode,
+        reviews,
+        getReview,
+        setReviewState,
+        setReviewComment,
+        isDirty,
+        saveReviews,
+        loadReviews,
+        reviewMessage,
+        clearReviewMessage,
+        loadTestFile,
+    };
 
     return (
         <AppContext.Provider value={value}>
@@ -190,4 +425,4 @@ export const useAppContext = (): AppContextType => {
         throw new Error('useAppContext must be used within AppProvider');
     }
     return context;
-};
\ No newline at end of file
+};
diff --git a/web-report/src/components/Dashboard.tsx b/web-report/src/components/Dashboard.tsx
index f5b1f2e..d7a66d6 100644
--- a/web-report/src/components/Dashboard.tsx
+++ b/web-report/src/components/Dashboard.tsx
@@ -1,14 +1,16 @@
 import type React from "react"
-import {useState} from "react"
+import {useMemo, useState} from "react"
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
 import {X} from "lucide-react"
 import {Header} from "@/components/Header.tsx";
 import {Overview} from "@/pages/Overview.tsx";
 import {Endpoints} from "@/pages/Endpoints.tsx";
 import {TestResults} from "@/pages/TestResults.tsx";
+import {Tests} from "@/pages/Tests.tsx";
 
 import {ScrollArea, ScrollBar} from "@/components/ui/scroll-area.tsx";
 import {useAppContext} from "@/AppProvider.tsx";
+import {REVIEW_STATE} from "@/types/Review.ts";
 
 
 export interface ITestTabs {
@@ -16,7 +18,20 @@ export interface ITestTabs {
 }
 
 export const Dashboard: React.FC = () => {
-    const {data} = useAppContext();
+    const {data, isDirty, reviews} = useAppContext();
+
+    const reviewRatio = useMemo(() => {
+        if (!data) return null;
+        const total = data.testCases.length;
+        if (total === 0) return null;
+        let reviewed = 0;
+        for (const tc of data.testCases) {
+            if (!tc.id) continue;
+            const state = reviews[tc.id]?.state ?? REVIEW_STATE.NOT_REVIEWED;
+            if (state !== REVIEW_STATE.NOT_REVIEWED) reviewed++;
+        }
+        return {reviewed, total};
+    }, [data, reviews]);
 
     const [activeTab, setActiveTab] = useState("overview")
 
@@ -58,34 +73,47 @@ export const Dashboard: React.FC = () => {
     });
 
     return (
-        <div className="border border-black p-4 w-[80%] mx-auto bg-white">
+        <div className="border border-black p-2 sm:p-4 max-w-7xl mx-auto bg-white">
             <Header date={data.creationTime}
                     schemaVersion={data.schemaVersion}
                     toolNameVersion={`${data.toolName}-${data.toolVersion}`}/>
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                 <div className="flex justify-center mb-2 w-full">
-                    <TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
+                    <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
                         <TabsTrigger
                             value="overview"
-                            className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
                             data-testid="tab-overview"
                         >
                             Overview
                         </TabsTrigger>
                         <TabsTrigger
                             value="endpoints"
-                            className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
                             data-testid="tab-endpoints"
                         >
                             Endpoints
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="tests"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            data-testid="tab-tests"
+                        >
+                            Tests
+                            {reviewRatio && (
+                                <span className="ml-2 text-xs font-mono text-gray-600" data-testid="tab-tests-ratio">
+                                    {reviewRatio.reviewed}/{reviewRatio.total}
+                                </span>
+                            )}
+                            {isDirty && <span className="ml-1 text-orange-600" title="Unsaved review changes">•</span>}
+                        </TabsTrigger>
                     </TabsList>
                 </div>
                 <div className="border-t border-black my-2"></div>
 
                 <div className="flex justify-center w-full">
                     {
-                        <TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
+                        <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
                             <ScrollArea className="w-[130%] whitespace-nowrap py-3">
                                 {
                                     testTabs.map((test, index) => (
@@ -123,6 +151,10 @@ export const Dashboard: React.FC = () => {
                     <Endpoints addTestTab={addTestTab}/>
                 </TabsContent>
 
+                <TabsContent value="tests">
+                    <Tests/>
+                </TabsContent>
+
                 {
                     testTabs.map((test, index) => (
                         <TabsContent value={`${test.value}`} key={index}>
diff --git a/web-report/src/components/EndpointAccordion.tsx b/web-report/src/components/EndpointAccordion.tsx
index 03227ef..25d0518 100644
--- a/web-report/src/components/EndpointAccordion.tsx
+++ b/web-report/src/components/EndpointAccordion.tsx
@@ -61,24 +61,24 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
     const faultColors = ["bg-red-300", "bg-red-500", "bg-red-700"];
     return (
         <AccordionItem value={value} className="border-2 border-black mb-4 overflow-hidden" data-testid={endpoint}>
-            <AccordionTrigger className="bg-blue-100 px-4 py-3 text-lg font-bold hover:no-underline hover:bg-blue-200">
-                <div className="flex-1 font-mono">{endpoint}</div>
-                <div className="flex flex-wrap justify-end gap-2 mr-4">
+            <AccordionTrigger className="bg-blue-100 px-3 sm:px-4 py-3 text-sm sm:text-lg font-bold hover:no-underline hover:bg-blue-200">
+                <div className="flex-1 font-mono break-all text-left">{endpoint}</div>
+                <div className="flex flex-wrap justify-end gap-1 sm:gap-2 mr-2 sm:mr-4">
                     {sortedStatusCodes.map((code, idx) => (
-                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono`}>
+                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono text-xs`}>
                             {code.code == -1 ? "NO-RESPONSE" : `H${code.code}`}
                         </Badge>
                     ))}
                     {sortedFaults.map((code, idx) => (
-                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, true)} font-mono`}>
+                        <Badge key={`_${idx}`} className={`${getColor(code.code, true, true)} font-mono text-xs`}>
                             F{code.code}
                         </Badge>
                     ))}
                 </div>
             </AccordionTrigger>
-            <AccordionContent className="p-4">
-                <div className="flex mb-6">
-                    <div className="flex font-bold text-lg mb-2 mr-2">HTTP CODES:</div>
+            <AccordionContent className="p-3 sm:p-4">
+                <div className="flex flex-col sm:flex-row mb-6">
+                    <div className="flex font-bold text-base sm:text-lg mb-2 mr-2">HTTP CODES:</div>
                     <div className="flex flex-wrap gap-2">
                         {
                             sortedStatusCodes.map((code, index) => (
@@ -98,8 +98,8 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
                     </div>
                 </div>
 
-                <div className="flex mb-6">
-                    <div className="flex font-bold text-lg mb-2 mr-2 text-red-500">FAULT CODES:</div>
+                <div className="flex flex-col sm:flex-row mb-6">
+                    <div className="flex font-bold text-base sm:text-lg mb-2 mr-2 text-red-500">FAULT CODES:</div>
                     <div className="flex flex-wrap gap-2">
                         {
                             sortedFaults.map((fault, index) => (
diff --git a/web-report/src/components/Header.tsx b/web-report/src/components/Header.tsx
index 99cc941..d57eddc 100644
--- a/web-report/src/components/Header.tsx
+++ b/web-report/src/components/Header.tsx
@@ -34,12 +34,12 @@ export const Header: React.FC<IHeaderProps> = ({date, toolNameVersion, schemaVer
                     </label>
                 </ReportTooltip>
             </div>
-            <div className="flex justify-between border-b border-black pb-2 mb-4">
+            <div className="flex flex-col gap-1 sm:flex-row sm:justify-between sm:items-center border-b border-black pb-2 mb-4 text-xs sm:text-base">
                 <ReportTooltip tooltipText={info.creationDate}>
-                    <div className="font-bold" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
+                    <div className="font-bold break-words" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
                 </ReportTooltip>
                 <ReportTooltip tooltipText={info.toolNameVersion}>
-                    <div className="font-bold text-center flex items-center justify-center gap-2" data-testid="header-tool-name-version">
+                    <div className="font-bold flex items-center sm:justify-center gap-2" data-testid="header-tool-name-version">
                         <span>Tool: {toolNameVersion}</span>
                         <img
                             src={ICON_URL}
@@ -50,7 +50,7 @@ export const Header: React.FC<IHeaderProps> = ({date, toolNameVersion, schemaVer
                     </div>
                 </ReportTooltip>
                 <ReportTooltip tooltipText={info.schemaVersion}>
-                    <div className="font-bold text-right" data-testid="header-schema-version">Schema Version: {schemaVersion}</div>
+                    <div className="font-bold sm:text-right" data-testid="header-schema-version">Schema Version: {schemaVersion}</div>
                 </ReportTooltip>
             </div>
         </>
diff --git a/web-report/src/components/TestDetailDialog.tsx b/web-report/src/components/TestDetailDialog.tsx
new file mode 100644
index 0000000..9824f9c
--- /dev/null
+++ b/web-report/src/components/TestDetailDialog.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import {Dialog} from "radix-ui";
+import {X} from "lucide-react";
+import {TestResults} from "@/pages/TestResults.tsx";
+
+interface IProps {
+    testId: string | null;
+    onClose: () => void;
+}
+
+export const TestDetailDialog: React.FC<IProps> = ({testId, onClose}) => {
+    return (
+        <Dialog.Root
+            open={!!testId}
+            onOpenChange={(open) => { if (!open) onClose(); }}
+        >
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+                <Dialog.Content
+                    className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-white border-2 border-black w-[min(95vw,64rem)] max-h-[90vh] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex flex-col overflow-hidden"
+                    data-testid="test-detail-dialog"
+                    aria-describedby={undefined}
+                >
+                    <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black bg-gray-100 shrink-0">
+                        <Dialog.Title className="font-mono font-bold break-all mr-2">
+                            {testId ?? ""}
+                        </Dialog.Title>
+                        <Dialog.Close asChild>
+                            <button
+                                className="p-1 hover:bg-red-200 rounded shrink-0"
+                                aria-label="Close"
+                                data-testid="test-detail-dialog-close"
+                            >
+                                <X size={20}/>
+                            </button>
+                        </Dialog.Close>
+                    </div>
+                    <div className="overflow-auto flex-1">
+                        {testId && <TestResults testCaseName={testId} embedded/>}
+                    </div>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};
diff --git a/web-report/src/components/TestReviewRow.tsx b/web-report/src/components/TestReviewRow.tsx
new file mode 100644
index 0000000..ae33c77
--- /dev/null
+++ b/web-report/src/components/TestReviewRow.tsx
@@ -0,0 +1,87 @@
+import React, {useEffect, useState} from "react";
+import {Code, ChevronRight} from "lucide-react";
+import {useAppContext} from "@/AppProvider.tsx";
+import {REVIEW_STATE, ReviewState, SELECTABLE_REVIEW_STATES} from "@/types/Review.ts";
+
+interface IProps {
+    testId: string;
+    testName: string;
+    onOpen: (testId: string) => void;
+}
+
+const stateBadgeClass = (state: ReviewState): string => {
+    switch (state) {
+        case REVIEW_STATE.ACCEPTED:
+            return "bg-green-100 border-green-500 text-green-800";
+        case REVIEW_STATE.REJECTED:
+            return "bg-red-100 border-red-500 text-red-800";
+        case REVIEW_STATE.PREVIOUSLY_ACCEPTED:
+            return "bg-green-50 border-green-300 text-green-700";
+        case REVIEW_STATE.PREVIOUSLY_REJECTED:
+            return "bg-red-50 border-red-300 text-red-700";
+        case REVIEW_STATE.NOT_REVIEWED:
+        default:
+            return "bg-gray-100 border-gray-400 text-gray-700";
+    }
+};
+
+const TestReviewRowInner: React.FC<IProps> = ({testId, testName, onOpen}) => {
+    const {getReview, setReviewState, setReviewComment} = useAppContext();
+    const review = getReview(testId);
+
+    // Local state for the comment textarea keeps typing from re-rendering the entire
+    // list on every keystroke; we only commit to the shared context on blur.
+    const [localComment, setLocalComment] = useState(review.comment);
+    useEffect(() => {
+        setLocalComment(review.comment);
+    }, [review.comment]);
+
+    return (
+        <div
+            className={`border-2 p-3 mb-2 grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-3 items-start ${stateBadgeClass(review.state)}`}
+            data-testid={`test-review-row-${testId}`}
+        >
+            <button
+                onClick={() => onOpen(testId)}
+                className="flex items-center text-left hover:underline"
+                data-testid={`test-review-open-${testId}`}
+            >
+                <Code className="mr-2 text-gray-600 shrink-0" size={18}/>
+                <span className="font-mono text-sm break-all">{testName}</span>
+                <ChevronRight className="ml-1 text-gray-400 shrink-0" size={16}/>
+            </button>
+
+            <select
+                value={review.state}
+                onChange={(e) => setReviewState(testId, e.target.value as ReviewState)}
+                className={`font-mono text-xs border-2 border-black px-2 py-1 bg-white ${stateBadgeClass(review.state)}`}
+                data-testid={`test-review-state-${testId}`}
+            >
+                {SELECTABLE_REVIEW_STATES.map(s => (
+                    <option key={s} value={s}>{s}</option>
+                ))}
+                {!SELECTABLE_REVIEW_STATES.includes(review.state) && (
+                    <option key={review.state} value={review.state} disabled>
+                        {review.state}
+                    </option>
+                )}
+            </select>
+
+            <textarea
+                value={localComment}
+                onChange={(e) => setLocalComment(e.target.value)}
+                onBlur={() => {
+                    if (localComment !== review.comment) {
+                        setReviewComment(testId, localComment);
+                    }
+                }}
+                placeholder="Comment (optional)"
+                rows={2}
+                className="w-full border border-gray-400 p-2 text-sm font-mono resize-y bg-white"
+                data-testid={`test-review-comment-${testId}`}
+            />
+        </div>
+    );
+};
+
+export const TestReviewRow = React.memo(TestReviewRowInner);
diff --git a/web-report/src/pages/Endpoints.tsx b/web-report/src/pages/Endpoints.tsx
index 36081d1..440ffcf 100644
--- a/web-report/src/pages/Endpoints.tsx
+++ b/web-report/src/pages/Endpoints.tsx
@@ -13,7 +13,7 @@ export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
     const {transformedReport, filteredEndpoints, filterEndpoints} = useAppContext();
 
     return (
-        <div className="border-2 border-black p-6 rounded-none w-[80%] mx-auto">
+        <div className="border-2 border-black p-3 sm:p-6 rounded-none">
             <StatusCodeFilters data={transformedReport} onFiltersChange={filterEndpoints}/>
             <div className="flex items-center mb-2">
                 <h3 className="text-sm font-medium text-gray-700 mr-3"># Endpoints:</h3>
diff --git a/web-report/src/pages/TestResults.tsx b/web-report/src/pages/TestResults.tsx
index c4b69c2..40a262c 100644
--- a/web-report/src/pages/TestResults.tsx
+++ b/web-report/src/pages/TestResults.tsx
@@ -1,5 +1,5 @@
 import {Card} from "@/components/ui/card.tsx";
-import type React from "react";
+import React, {useEffect} from "react";
 import {Badge} from "@/components/ui/badge.tsx";
 import {CodeBlock} from "@/components/CodeBlock.tsx";
 import {extractCodeLines, extractComments, getColor, getLanguage} from "@/lib/utils";
@@ -8,20 +8,28 @@ import {useAppContext} from "@/AppProvider.tsx";
 
 interface IProps {
     testCaseName: string;
+    embedded?: boolean;
 }
 
-export const TestResults: React.FC<IProps> = ({testCaseName}) => {
+export const TestResults: React.FC<IProps> = ({testCaseName, embedded = false}) => {
 
-    const {data, testFiles, lowCodeMode} = useAppContext();
+    const {data, testFiles, loadTestFile, lowCodeMode} = useAppContext();
 
     const testCases = data?.testCases || [];
     const foundFaults = data?.faults.foundFaults || [];
     const problemDetails = data?.problemDetails || {};
+
+    const testCase = testCases.find((test) => test.id === testCaseName);
+    const filePath = testCase?.filePath;
+
+    useEffect(() => {
+        if (filePath) loadTestFile(filePath);
+    }, [filePath, loadTestFile]);
+
     if (!problemDetails.rest) {
         return <div>We are only supporting REST results now. You need to provide rest results.</div>
     }
 
-    const testCase = testCases.find((test) => test.id === testCaseName);
     const relatedFaults = foundFaults.filter(fault => fault.testCaseId === testCaseName);
     const relatedHttpStatus = problemDetails.rest.coveredHttpStatus.filter(status => status.testCaseId === testCaseName);
 
@@ -38,15 +46,16 @@ export const TestResults: React.FC<IProps> = ({testCaseName}) => {
         }
         return codeA - codeB;
     });
-    const currentFile = testFiles.find((file) => file.name === testCase?.filePath);
+    const currentFileCode = filePath ? testFiles[filePath] : undefined;
+    const isLoadingFile = !!filePath && currentFileCode === undefined;
 
 
-    const extractedCode = currentFile && testCase ? extractCodeLines(currentFile.code, testCase?.startLine, testCase?.endLine) : "";
+    const extractedCode = currentFileCode && testCase ? extractCodeLines(currentFileCode, testCase?.startLine, testCase?.endLine) : "";
     const displayedCode = lowCodeMode ? extractComments(extractedCode) : extractedCode;
-    const displayedLanguage = lowCodeMode ? "markdown" : getLanguage(currentFile?.name ?? "");
+    const displayedLanguage = lowCodeMode ? "markdown" : getLanguage(filePath ?? "");
 
     return (
-        <div className="border-2 border-black p-6 rounded-none w-[80%] mx-auto">
+        <div className={embedded ? "p-2 sm:p-4" : "border-2 border-black p-3 sm:p-6 rounded-none"}>
             <div className="gap-6 mb-6">
 
                 {/* Others Section */}
@@ -97,7 +106,14 @@ export const TestResults: React.FC<IProps> = ({testCaseName}) => {
                     <span>{testCase?.id}</span>
                 </div>
                 {
-                    testCase && currentFile && (
+                    testCase && isLoadingFile && (
+                        <div className="p-4 text-gray-500 italic" data-testid="test-results-loading">
+                            Loading source code...
+                        </div>
+                    )
+                }
+                {
+                    testCase && currentFileCode !== undefined && (
                         <pre className="p-4 overflow-auto max-h-[500px] text-sm text-left font-mono">
                         {lowCodeMode && displayedCode.length === 0 ? (
                             <div className="text-gray-600 italic">No documentation comments found for this test case.</div>
diff --git a/web-report/src/pages/Tests.tsx b/web-report/src/pages/Tests.tsx
new file mode 100644
index 0000000..b6a42f9
--- /dev/null
+++ b/web-report/src/pages/Tests.tsx
@@ -0,0 +1,194 @@
+import React, {useCallback, useMemo, useRef, useState} from "react";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Progress} from "@/components/ui/progress.tsx";
+import {useAppContext} from "@/AppProvider.tsx";
+import {REVIEW_STATE, REVIEW_STATES, ReviewState, SELECTABLE_REVIEW_STATES} from "@/types/Review.ts";
+import {TestReviewRow} from "@/components/TestReviewRow.tsx";
+import {TestDetailDialog} from "@/components/TestDetailDialog.tsx";
+import {Download, Upload, X} from "lucide-react";
+
+type Filter = "ALL" | ReviewState;
+
+const filterButtonClass = (active: boolean) =>
+    `px-3 py-1 border-2 border-black font-mono text-xs ${
+        active
+            ? "bg-blue-100 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+            : "bg-white hover:bg-gray-100"
+    }`;
+
+export const Tests: React.FC = () => {
+    const {
+        data,
+        reviews,
+        isDirty,
+        saveReviews,
+        loadReviews,
+        reviewMessage,
+        clearReviewMessage,
+    } = useAppContext();
+
+    const [filter, setFilter] = useState<Filter>("ALL");
+    const [openTestId, setOpenTestId] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+    const handleOpen = useCallback((id: string) => setOpenTestId(id), []);
+    const handleClose = useCallback(() => setOpenTestId(null), []);
+
+    const testCases = useMemo(() => data?.testCases ?? [], [data]);
+    const testFilePaths = useMemo(() => data?.testFilePaths ?? [], [data]);
+
+    const counts = useMemo(() => {
+        const c = Object.fromEntries(REVIEW_STATES.map(s => [s, 0])) as Record<ReviewState, number>;
+        for (const tc of testCases) {
+            if (!tc.id) continue;
+            c[(reviews[tc.id] ?? {state: REVIEW_STATE.NOT_REVIEWED}).state]++;
+        }
+        return c;
+    }, [testCases, reviews]);
+
+    const grouped = useMemo(() => {
+        const map = new Map<string, Array<{id: string; name: string}>>();
+        for (const file of testFilePaths) map.set(file, []);
+        for (const tc of testCases) {
+            if (!tc.id || !tc.filePath) continue;
+            if (filter !== "ALL") {
+                const state = (reviews[tc.id] ?? {state: REVIEW_STATE.NOT_REVIEWED}).state;
+                if (state !== filter) continue;
+            }
+            const arr = map.get(tc.filePath) ?? [];
+            arr.push({id: tc.id, name: tc.name ?? tc.id});
+            map.set(tc.filePath, arr);
+        }
+        return map;
+    }, [testCases, testFilePaths, filter, reviews]);
+
+    const triggerLoad = () => fileInputRef.current?.click();
+    const onFileChange: React.ChangeEventHandler<HTMLInputElement> = async (e) => {
+        const f = e.target.files?.[0];
+        if (f) await loadReviews(f);
+        e.target.value = "";
+    };
+
+    return (
+        <div className="border-2 border-black p-3 sm:p-6 rounded-none">
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+                <Button onClick={saveReviews} className="bg-black text-white hover:bg-gray-800" data-testid="reviews-save">
+                    <Download className="w-4 h-4 mr-1"/> Save reviews
+                </Button>
+                <Button onClick={triggerLoad} variant="outline" className="border-2 border-black" data-testid="reviews-load">
+                    <Upload className="w-4 h-4 mr-1"/> Load reviews
+                </Button>
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="application/json,.json"
+                    className="hidden"
+                    onChange={onFileChange}
+                    data-testid="reviews-file-input"
+                />
+                {isDirty && (
+                    <span className="font-mono text-xs px-2 py-1 border-2 border-black bg-yellow-200">
+                        UNSAVED CHANGES
+                    </span>
+                )}
+            </div>
+
+            {isDirty && (
+                <div className="border-2 border-yellow-500 bg-yellow-50 p-3 mb-4 text-sm" data-testid="reviews-unsaved-banner">
+                    You have unsaved review changes. Click <span className="font-bold">Save reviews</span> to download
+                    the updated <span className="font-mono">report-review.json</span> and place it next to the report.
+                </div>
+            )}
+
+            {reviewMessage && (
+                <div
+                    className={`border-2 p-3 mb-4 text-sm flex items-start justify-between gap-2 ${
+                        reviewMessage.type === "error"
+                            ? "border-red-500 bg-red-50 text-red-800"
+                            : "border-blue-500 bg-blue-50 text-blue-800"
+                    }`}
+                    data-testid="reviews-message"
+                >
+                    <span>{reviewMessage.text}</span>
+                    <button onClick={clearReviewMessage} className="shrink-0" aria-label="Dismiss">
+                        <X size={16}/>
+                    </button>
+                </div>
+            )}
+
+            {testCases.length > 0 && (() => {
+                const total = testCases.length;
+                const reviewed = total - counts[REVIEW_STATE.NOT_REVIEWED];
+                const pct = total === 0 ? 0 : Math.round((reviewed / total) * 100);
+                return (
+                    <div className="mb-4" data-testid="reviews-progress">
+                        <div className="flex items-center justify-between text-xs font-mono mb-1">
+                            <span>Reviewed: {reviewed}/{total}</span>
+                            <span>{pct}%</span>
+                        </div>
+                        <Progress value={pct} className="h-2 bg-gray-200"/>
+                    </div>
+                );
+            })()}
+
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+                <span className="text-sm font-bold">Filter:</span>
+                <button
+                    className={filterButtonClass(filter === "ALL")}
+                    onClick={() => setFilter("ALL")}
+                    data-testid="reviews-filter-ALL"
+                >
+                    ALL ({testCases.length})
+                </button>
+                {SELECTABLE_REVIEW_STATES.map(s => (
+                    <button
+                        key={s}
+                        className={filterButtonClass(filter === s)}
+                        onClick={() => setFilter(s)}
+                        data-testid={`reviews-filter-${s}`}
+                    >
+                        {s} ({counts[s]})
+                    </button>
+                ))}
+            </div>
+
+            <Accordion type="multiple" className="w-full">
+                {testFilePaths.map((file, idx) => {
+                    const items = grouped.get(file) ?? [];
+                    return (
+                        <AccordionItem
+                            key={file}
+                            value={`file-${idx}`}
+                            className="border-2 border-black mb-4 overflow-hidden"
+                            data-testid={`test-file-${idx}`}
+                        >
+                            <AccordionTrigger className="bg-blue-100 px-4 py-3 text-lg font-bold hover:no-underline hover:bg-blue-200">
+                                <div className="flex-1 font-mono text-left break-all">{file}</div>
+                                <div className="mr-4 font-mono text-sm">{items.length}</div>
+                            </AccordionTrigger>
+                            <AccordionContent className="p-4">
+                                {items.length === 0 ? (
+                                    <div className="text-gray-500 italic text-sm">
+                                        No tests match the current filter.
+                                    </div>
+                                ) : (
+                                    items.map(tc => (
+                                        <TestReviewRow
+                                            key={tc.id}
+                                            testId={tc.id}
+                                            testName={tc.name}
+                                            onOpen={handleOpen}
+                                        />
+                                    ))
+                                )}
+                            </AccordionContent>
+                        </AccordionItem>
+                    );
+                })}
+            </Accordion>
+
+            <TestDetailDialog testId={openTestId} onClose={handleClose}/>
+        </div>
+    );
+};
diff --git a/web-report/src/types/Review.ts b/web-report/src/types/Review.ts
new file mode 100644
index 0000000..2fce417
--- /dev/null
+++ b/web-report/src/types/Review.ts
@@ -0,0 +1,84 @@
+export const REVIEW_STATE = {
+    NOT_REVIEWED: "NOT-REVIEWED",
+    ACCEPTED: "ACCEPTED",
+    REJECTED: "REJECTED",
+    PREVIOUSLY_ACCEPTED: "PREVIOUSLY-ACCEPTED",
+    PREVIOUSLY_REJECTED: "PREVIOUSLY-REJECTED",
+} as const;
+
+export type ReviewState = typeof REVIEW_STATE[keyof typeof REVIEW_STATE];
+
+export const REVIEW_STATES: readonly ReviewState[] = Object.values(REVIEW_STATE);
+
+export const SELECTABLE_REVIEW_STATES: readonly ReviewState[] = [
+    REVIEW_STATE.NOT_REVIEWED,
+    REVIEW_STATE.ACCEPTED,
+    REVIEW_STATE.REJECTED,
+];
+
+export interface TestReview {
+    state: ReviewState;
+    comment: string;
+}
+
+export const DEFAULT_REVIEW: TestReview = {state: REVIEW_STATE.NOT_REVIEWED, comment: ""};
+
+export interface ReviewFile {
+    schemaVersion: string;
+    reviews: Record<string, TestReview>;
+}
+
+export const REVIEW_FILE_NAME = "report-review.json";
+export const REVIEW_SCHEMA_VERSION = __WFC_VERSION__;
+
+export const isReviewState = (v: unknown): v is ReviewState =>
+    typeof v === "string" && (REVIEW_STATES as readonly string[]).includes(v);
+
+export const normalizeReviews = (
+    reviews: Record<string, TestReview>,
+): Record<string, TestReview> => {
+    const out: Record<string, TestReview> = {};
+    for (const [id, r] of Object.entries(reviews)) {
+        const comment = (r.comment ?? "").trim();
+        if (r.state !== REVIEW_STATE.NOT_REVIEWED || comment !== "") {
+            out[id] = {state: r.state, comment: r.comment ?? ""};
+        }
+    }
+    return out;
+};
+
+const sortedStringify = (obj: Record<string, TestReview>): string => {
+    const keys = Object.keys(obj).sort();
+    const sorted: Record<string, TestReview> = {};
+    for (const k of keys) sorted[k] = obj[k];
+    return JSON.stringify(sorted);
+};
+
+export const reviewsEqual = (
+    a: Record<string, TestReview>,
+    b: Record<string, TestReview>,
+): boolean => sortedStringify(normalizeReviews(a)) === sortedStringify(normalizeReviews(b));
+
+export const parseReviewFile = (raw: unknown): Record<string, TestReview> => {
+    if (!raw || typeof raw !== "object") {
+        throw new Error("Invalid review file: not a JSON object.");
+    }
+    const obj = raw as Record<string, unknown>;
+    const reviews = obj.reviews;
+    if (!reviews || typeof reviews !== "object") {
+        throw new Error("Invalid review file: missing 'reviews' object.");
+    }
+    const out: Record<string, TestReview> = {};
+    for (const [id, entry] of Object.entries(reviews as Record<string, unknown>)) {
+        if (!entry || typeof entry !== "object") {
+            throw new Error(`Invalid review entry for '${id}': not an object.`);
+        }
+        const e = entry as Record<string, unknown>;
+        if (!isReviewState(e.state)) {
+            throw new Error(`Invalid review entry for '${id}': unknown state '${String(e.state)}'.`);
+        }
+        const comment = typeof e.comment === "string" ? e.comment : "";
+        out[id] = {state: e.state, comment};
+    }
+    return out;
+};
diff --git a/web-report/src/vite-env.d.ts b/web-report/src/vite-env.d.ts
index 11f02fe..91a312a 100644
--- a/web-report/src/vite-env.d.ts
+++ b/web-report/src/vite-env.d.ts
@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __WFC_VERSION__: string;
diff --git a/web-report/vite.config.ts b/web-report/vite.config.ts
index ef07bff..aa28b3b 100644
--- a/web-report/vite.config.ts
+++ b/web-report/vite.config.ts
@@ -1,12 +1,26 @@
 import path from "path"
+import fs from "fs"
 import { defineConfig, UserConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 import tailwindcss from "@tailwindcss/vite"
 
+const readWfcVersion = (): string => {
+  const pomPath = path.resolve(__dirname, "../pom.xml");
+  const pom = fs.readFileSync(pomPath, "utf8");
+  const match = pom.match(/<artifactId>commons<\/artifactId>\s*<version>([^<]+)<\/version>/);
+  if (!match) throw new Error(`Could not find project <version> in ${pomPath}`);
+  return match[1];
+};
+
+const WFC_VERSION = readWfcVersion();
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  define: {
+    __WFC_VERSION__: JSON.stringify(WFC_VERSION),
+  },
   test: {
     globals: true,
     environment: 'happy-dom',