diff --git a/backend/src/controllers/bulkImportController.ts b/backend/src/controllers/bulkImportController.ts
index 529feca4..58e163d3 100644
--- a/backend/src/controllers/bulkImportController.ts
+++ b/backend/src/controllers/bulkImportController.ts
@@ -6,21 +6,18 @@ import { sendInternalError } from '../utils/internalError.js';
 export class BulkImportController {
   async import(req: Request, res: Response) {
     try {
-      const { organization_id } = req.body;
-      const csvContent = req.body.csv; // Assuming the CSV is sent as a string in the 'csv' field
+      const organizationId = req.tenantId ?? req.user?.organizationId;
+      const csvContent = req.body?.csv;
 
-      if (!organization_id) {
-        return res.status(400).json({ error: 'Missing organization_id' });
+      if (!organizationId) {
+        return res.status(403).json({ error: 'Authenticated organization context required' });
       }
 
-      if (!csvContent) {
+      if (typeof csvContent !== 'string' || csvContent.trim().length === 0) {
         return res.status(400).json({ error: 'Missing csv content' });
       }
 
-      const result = await csvPayrollImportService.processCsv(
-        parseInt(organization_id),
-        csvContent
-      );
+      const result = await csvPayrollImportService.processCsv(organizationId, csvContent);
 
       // Return 207 Multi-Status if there were any errors, otherwise 200/201
       const statusCode = result.errorCount > 0 ? 207 : result.successCount > 0 ? 201 : 200;
diff --git a/frontend/src/components/CSVUploader.tsx b/frontend/src/components/CSVUploader.tsx
index 26b62ac2..2da291af 100644
--- a/frontend/src/components/CSVUploader.tsx
+++ b/frontend/src/components/CSVUploader.tsx
@@ -1,16 +1,13 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Upload, AlertCircle, CheckCircle } from 'lucide-react';
+import { parseCSVPreview } from '../utils/csvPreview';
+import type { CSVRow } from '../utils/csvPreview';
 
-export interface CSVRow {
-  rowNumber: number;
-  data: Record<string, string>;
-  errors: string[];
-  isValid: boolean;
-}
+export type { CSVRow } from '../utils/csvPreview';
 
 interface CSVUploaderProps {
   requiredColumns: string[];
-  onDataParsed: (data: CSVRow[]) => void;
+  onDataParsed: (data: CSVRow[], csvContent: string) => void;
   validators?: Record<string, (value: string) => string | null>;
 }
 
@@ -23,60 +20,21 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
   const [parsedData, setParsedData] = useState<CSVRow[]>([]);
   const [fileName, setFileName] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const readGeneration = useRef(0);
 
-  const parseCSV = (content: string): CSVRow[] => {
-    const lines = content.trim().split('\n');
-    if (lines.length < 2) return [];
-
-    const headers = lines[0].split(',').map((h) => h.trim());
-
-    // Validate headers
-    const missingColumns = requiredColumns.filter((col) => !headers.includes(col));
-    if (missingColumns.length > 0) {
-      alert(`Missing required columns: ${missingColumns.join(', ')}`);
-      return [];
-    }
-
-    const rows: CSVRow[] = [];
-
-    for (let i = 1; i < lines.length; i++) {
-      const values = lines[i].split(',').map((v) => v.trim());
-      const row: Record<string, string> = {};
-      const errors: string[] = [];
-
-      headers.forEach((header, idx) => {
-        row[header] = values[idx] || '';
-      });
-
-      // Validate each field
-      requiredColumns.forEach((col) => {
-        if (!row[col]) {
-          errors.push(`Missing required field: ${col}`);
-        }
-      });
-
-      // Run custom validators
-      Object.entries(validators).forEach(([field, validator]) => {
-        if (row[field]) {
-          const error = validator(row[field]);
-          if (error) {
-            errors.push(error);
-          }
-        }
-      });
-
-      rows.push({
-        rowNumber: i + 1,
-        data: row,
-        errors,
-        isValid: errors.length === 0,
-      });
-    }
-
-    return rows;
-  };
+  // Modified 2026-10-05: prevent replaced or unmounted reads from publishing CSV data.
+  useEffect(() => () => {
+    readGeneration.current += 1;
+  }, []);
 
   const handleFileParse = (file: File) => {
+    const generation = ++readGeneration.current;
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    setParsedData([]);
+    setFileName(null);
+    onDataParsed([], '');
+    if (generation !== readGeneration.current) return;
+
     if (!file.name.endsWith('.csv')) {
       alert('Please upload a CSV file');
       return;
@@ -84,15 +42,38 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
 
     setFileName(file.name);
     const reader = new FileReader();
+    const handleReadError = () => {
+      if (generation === readGeneration.current) {
+        alert('Unable to read the CSV file. Please select it again.');
+      }
+    };
 
     reader.onload = (e) => {
-      const content = e.target?.result as string;
-      const rows = parseCSV(content);
+      if (generation !== readGeneration.current) return;
+      const content = e.target?.result;
+      if (typeof content !== 'string') {
+        handleReadError();
+        return;
+      }
+      let rows: CSVRow[];
+      try {
+        rows = parseCSVPreview(content, requiredColumns, validators);
+      } catch (error) {
+        alert(error instanceof Error ? error.message : 'Unable to parse the CSV file');
+        return;
+      }
+      if (generation !== readGeneration.current) return;
       setParsedData(rows);
-      onDataParsed(rows);
+      onDataParsed(rows, content);
     };
+    reader.onerror = handleReadError;
+    reader.onabort = handleReadError;
 
-    reader.readAsText(file);
+    try {
+      reader.readAsText(file);
+    } catch {
+      handleReadError();
+    }
   };
 
   const handleDragEnter = (e: React.DragEvent) => {
@@ -130,6 +111,7 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
       {/* Upload Zone */}
       <div
         onDragEnter={handleDragEnter}
+        onDragOver={(e) => e.preventDefault()}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         className={`relative border-2 border-dashed rounded-lg p-8 text-center transition cursor-pointer ${
@@ -146,7 +128,7 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
           className="hidden"
         />
 
-        <button onClick={() => fileInputRef.current?.click()} className="w-full">
+        <button type="button" onClick={() => fileInputRef.current?.click()} className="w-full">
           <Upload className="w-12 h-12 mx-auto mb-2 text-(--muted)" />
           <p className="text-lg font-semibold text-(--text)">Drag and drop your CSV file</p>
           <p className="text-sm text-(--muted) mt-1">or click to browse</p>
@@ -178,7 +160,12 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
       {/* Preview Table */}
       {parsedData.length > 0 && (
         <div className="mt-6">
-          <h3 className="text-lg font-semibold mb-4">Preview</h3>
+          <div className="mb-4 flex items-baseline justify-between gap-4">
+            <h3 className="text-lg font-semibold">Preview</h3>
+            <span className="text-xs text-(--muted)">
+              Showing first {Math.min(20, parsedData.length)} of {parsedData.length} rows
+            </span>
+          </div>
           <div className="overflow-x-auto">
             <table className="min-w-full text-left border-collapse">
               <thead>
@@ -194,7 +181,7 @@ export const CSVUploader: React.FC<CSVUploaderProps> = ({
                 </tr>
               </thead>
               <tbody className="divide-y divide-(--border)">
-                {parsedData.map((row) => (
+                {parsedData.slice(0, 20).map((row) => (
                   <tr
                     key={row.rowNumber}
                     className={`border-b transition ${
diff --git a/frontend/src/components/EmployeeList.tsx b/frontend/src/components/EmployeeList.tsx
index 277684e5..222bf607 100644
--- a/frontend/src/components/EmployeeList.tsx
+++ b/frontend/src/components/EmployeeList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Avatar } from './Avatar';
 import { CSVUploader } from './CSVUploader';
 import type { CSVRow } from './CSVUploader';
@@ -15,10 +15,25 @@ interface Employee {
   status?: 'Active' | 'Inactive';
 }
 
+export interface BulkImportResponse {
+  message: string;
+  summary: {
+    totalRows: number;
+    successCount: number;
+    errorCount: number;
+  };
+  errors: Array<{
+    row: number;
+    email: string;
+    errors: string[];
+  }>;
+}
+
 interface EmployeeListProps {
   employees: Employee[];
   onEmployeeClick?: (employee: Employee) => void;
   onAddEmployee: (employee: Employee) => void;
+  onBulkImport?: (csvContent: string) => Promise<BulkImportResponse>;
   onEditEmployee?: (employee: Employee) => void;
   onRemoveEmployee?: (id: string) => void;
 }
@@ -26,10 +41,15 @@ interface EmployeeListProps {
 export const EmployeeList: React.FC<EmployeeListProps> = ({
   employees,
   onAddEmployee,
+  onBulkImport,
   onEditEmployee,
   onRemoveEmployee,
 }) => {
-  const [csvData, setCsvData] = useState<Employee[]>([]);
+  const [csvData, setCsvData] = useState<CSVRow[]>([]);
+  const [csvContent, setCsvContent] = useState('');
+  const [isImporting, setIsImporting] = useState(false);
+  const [importResult, setImportResult] = useState<BulkImportResponse | null>(null);
+  const [importError, setImportError] = useState<string | null>(null);
   const [showCSVUploader, setShowCSVUploader] = useState(false);
   const [showAddModal, setShowAddModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState<{ open: boolean; employee?: Employee }>({
@@ -40,26 +60,48 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
   });
   const [sortKey, setSortKey] = useState<keyof Employee>('name');
   const [sortAsc, setSortAsc] = useState(true);
+  const selectionGeneration = useRef(0);
+  const importPending = useRef(false);
+  const mounted = useRef(true);
 
-  const handleDataParsed = (data: CSVRow[]) => {
-    const newEmployees = data.map((row) => ({
-      id: String(Date.now() + Math.random()),
-      name: row.data.name,
-      email: row.data.email,
-      wallet: row.data.wallet,
-      position: row.data.position,
-      salary: Number(row.data.salary) || 0,
-      status: (row.data.status as 'Active' | 'Inactive') || 'Active',
-    }));
-    setCsvData(newEmployees);
+  // Modified 2026-10-05: bind import feedback to its selection, not a later preview.
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      selectionGeneration.current += 1;
+    };
+  }, []);
+
+  const handleDataParsed = (data: CSVRow[], rawCsv: string) => {
+    selectionGeneration.current += 1;
+    setCsvData(data);
+    setCsvContent(rawCsv);
+    setImportResult(null);
+    setImportError(null);
   };
 
-  const handleAddEmployees = () => {
-    csvData.forEach((employee) => {
-      onAddEmployee(employee);
-    });
-    setCsvData([]);
-    setShowCSVUploader(false);
+  const handleAddEmployees = async () => {
+    if (importPending.current || !onBulkImport || !csvContent || !csvData.some((row) => row.isValid)) return;
+
+    const generation = selectionGeneration.current;
+    importPending.current = true;
+    setIsImporting(true);
+    setImportError(null);
+    setImportResult(null);
+    try {
+      const result = await onBulkImport(csvContent);
+      if (mounted.current && generation === selectionGeneration.current) {
+        setImportResult(result);
+      }
+    } catch (error) {
+      if (mounted.current && generation === selectionGeneration.current) {
+        setImportError(error instanceof Error ? error.message : 'Employee import failed');
+      }
+    } finally {
+      importPending.current = false;
+      if (mounted.current) setIsImporting(false);
+    }
   };
 
   const handleSort = (key: keyof Employee) => {
@@ -362,8 +404,19 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
       {/* CSV Import */}
       <div className="p-4 md:p-6 w-full flex flex-col items-center justify-center text-center bg-black/10">
         <p className="text-muted mb-4 font-medium">Need to migrate your legacy payroll system?</p>
+        {isImporting && (
+          <div className="mb-4 w-full max-w-2xl" role="status" aria-live="polite">
+            <div className="h-2 w-full overflow-hidden rounded bg-(--surface-hi)">
+              <div className="h-full w-2/3 animate-pulse rounded bg-blue-500" />
+            </div>
+            <p className="mt-2 text-sm text-(--muted)">
+              Import in progress. Closing or changing this preview does not cancel submitted rows.
+            </p>
+          </div>
+        )}
         {!showCSVUploader && (
           <button
+            type="button"
             className="text-accent font-bold text-sm hover:underline touch-manipulation py-2 px-4"
             style={{ minHeight: '44px' }}
             onClick={() => setShowCSVUploader(true)}
@@ -374,29 +427,68 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
         {showCSVUploader && (
           <div className="w-full max-w-2xl mx-auto">
             <CSVUploader
-              requiredColumns={['name', 'email', 'wallet', 'position', 'salary', 'status']}
+              requiredColumns={['first_name', 'last_name', 'email']}
               onDataParsed={handleDataParsed}
+              validators={{
+                email: (value) =>
+                  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Invalid email address',
+                base_salary: (value) => {
+                  if (!value) return null;
+                  const salary = Number(value);
+                  return Number.isFinite(salary) && salary >= 0
+                    ? null
+                    : 'base_salary must be a non-negative number';
+                },
+              }}
             />
             <div className="flex gap-2 justify-center mt-4">
               <button
-                onClick={handleAddEmployees}
-                className="px-4 py-2 bg-blue-500 text-white rounded touch-manipulation"
+                type="button"
+                onClick={() => void handleAddEmployees()}
+                className="px-4 py-2 bg-blue-500 text-white rounded touch-manipulation disabled:opacity-50 disabled:cursor-not-allowed"
                 style={{ minHeight: '44px' }}
-                disabled={csvData.length === 0}
+                disabled={
+                  isImporting ||
+                  !onBulkImport ||
+                  csvData.length === 0 ||
+                  !csvData.some((row) => row.isValid)
+                }
+                aria-busy={isImporting}
               >
-                Add Employees from CSV
+                {isImporting
+                  ? 'Importing employees…'
+                  : `Import ${csvData.filter((row) => row.isValid).length} valid employees`}
               </button>
               <button
+                type="button"
                 onClick={() => {
                   setShowCSVUploader(false);
-                  setCsvData([]);
+                  handleDataParsed([], '');
                 }}
                 className="px-4 py-2 bg-(--surface-hi) text-(--text) rounded touch-manipulation"
                 style={{ minHeight: '44px' }}
               >
-                Cancel
+                {isImporting ? 'Close preview' : 'Cancel'}
               </button>
             </div>
+
+            {importResult && (
+              <div className="mt-4 rounded border border-(--border) p-3 text-left text-sm" role="status">
+                Imported {importResult.summary.successCount} of {importResult.summary.totalRows} rows.
+                {importResult.summary.errorCount > 0 && (
+                  <span className="ml-1 text-red-600">
+                    {importResult.summary.errorCount} row
+                    {importResult.summary.errorCount === 1 ? '' : 's'} rejected by the backend.
+                  </span>
+                )}
+              </div>
+            )}
+
+            {importError && (
+              <div className="mt-4 rounded border border-red-500/40 bg-red-500/10 p-3 text-left text-sm text-red-600" role="alert">
+                {importError}
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index b89a5c83..6fba6944 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect, useCallback } from 'react';
 import { Icon, Button, Card, Input, Select, Alert } from '@stellar/design-system';
-import { EmployeeList } from '../components/EmployeeList';
+import { EmployeeList, type BulkImportResponse } from '../components/EmployeeList';
 import { AutosaveIndicator } from '../components/AutosaveIndicator';
 import { WalletQRCode } from '../components/WalletQRCode';
 import { useAutosave } from '../hooks/useAutosave';
@@ -67,9 +67,9 @@ export default function EmployeeEntry() {
   );
   const { t } = useTranslation();
 
-  const fetchEmployees = useCallback(async () => {
+  const fetchEmployees = useCallback(async (showLoading = true) => {
     try {
-      setLoading(true);
+      if (showLoading) setLoading(true);
       const response = await api.get<{ data: BackendEmployee[] }>('/employees');
       const employeeRows = Array.isArray(response.data?.data) ? response.data.data : [];
       const mapped: EmployeeItem[] = employeeRows.map((emp: BackendEmployee) => ({
@@ -84,7 +84,7 @@ export default function EmployeeEntry() {
     } catch (err) {
       console.error('Failed to fetch employees:', err);
     } finally {
-      setLoading(false);
+      if (showLoading) setLoading(false);
     }
   }, []);
 
@@ -92,6 +92,25 @@ export default function EmployeeEntry() {
     void fetchEmployees();
   }, [fetchEmployees]);
 
+  const handleBulkImport = async (csvContent: string): Promise<BulkImportResponse> => {
+    const response = await api.post<BulkImportResponse>('/employees/bulk-import', {
+      csv: csvContent,
+    });
+
+    // Keep the uploader mounted so its selection-bound import result survives.
+    await fetchEmployees(false);
+
+    const { successCount, errorCount } = response.data.summary;
+    notifySuccess(
+      `${successCount} employee${successCount === 1 ? '' : 's'} imported`,
+      errorCount > 0
+        ? `${errorCount} row${errorCount === 1 ? '' : 's'} need correction.`
+        : undefined
+    );
+
+    return response.data;
+  };
+
   useEffect(() => {
     const saved = loadSavedData();
     if (saved) {
@@ -348,6 +367,7 @@ export default function EmployeeEntry() {
           employees={employees}
           onEmployeeClick={(employee: EmployeeItem) => console.log('Clicked:', employee.name)}
           onAddEmployee={(employee: EmployeeItem) => console.log('Added:', employee)}
+          onBulkImport={handleBulkImport}
         />
       )}
     </div>
diff --git a/frontend/src/utils/csvPreview.ts b/frontend/src/utils/csvPreview.ts
new file mode 100644
index 00000000..d8d94b66
--- /dev/null
+++ b/frontend/src/utils/csvPreview.ts
@@ -0,0 +1,109 @@
+export interface CSVRow {
+  rowNumber: number;
+  data: Record<string, string>;
+  errors: string[];
+  isValid: boolean;
+}
+
+// Read records rather than physical lines: quoted cells can contain delimiters
+// and newlines. Leave field whitespace intact, as the backend does by default.
+function parseRecords(content: string): string[][] {
+  const records: string[][] = [];
+  let record: string[] = [];
+  let value = '';
+  let quoted = false;
+  let quoteClosed = false;
+  const input = content.replace(/^\uFEFF/, '');
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+    if (quoted) {
+      if (char !== '"') {
+        value += char;
+      } else if (input[i + 1] === '"') {
+        value += '"';
+        i++;
+      } else {
+        quoted = false;
+        quoteClosed = true;
+      }
+    } else if (char === ',' || char === '\r' || char === '\n') {
+      record.push(value);
+      value = '';
+      quoteClosed = false;
+      if (char !== ',') {
+        records.push(record);
+        record = [];
+        if (char === '\r' && input[i + 1] === '\n') i++;
+      }
+    } else if (quoteClosed) {
+      if (!/\s/.test(char)) {
+        throw new Error(
+          `Invalid CSV: unexpected character after closing quote in row ${records.length + 1}`
+        );
+      }
+    } else if (char === '"') {
+      if (value.trim() !== '') {
+        throw new Error(`Invalid CSV: unexpected quote in row ${records.length + 1}`);
+      }
+      value = '';
+      quoted = true;
+    } else {
+      value += char;
+    }
+  }
+
+  if (quoted) {
+    throw new Error(`Invalid CSV: unclosed quoted field in row ${records.length + 1}`);
+  }
+  // A terminating record separator does not create another empty employee.
+  if (record.length > 0 || value !== '' || quoteClosed) {
+    record.push(value);
+    records.push(record);
+  }
+  return records;
+}
+
+export function parseCSVPreview(
+  content: string,
+  requiredColumns: string[],
+  validators: Record<string, (value: string) => string | null> = {}
+): CSVRow[] {
+  const records = parseRecords(content);
+  if (records.length === 0) return [];
+  const [headers, ...data] = records;
+  const missingColumns = requiredColumns.filter((col) => !headers.includes(col));
+  if (missingColumns.length > 0) {
+    throw new Error(`Missing required columns: ${missingColumns.join(', ')}`);
+  }
+  if (new Set(headers).size !== headers.length) {
+    throw new Error('Invalid CSV: duplicate column headers');
+  }
+
+  return data.map((values, index) => {
+    // The backend rejects excess columns; do not preview a silently truncated row.
+    if (values.length > headers.length) {
+      throw new Error(`Invalid CSV: too many columns in row ${index + 2}`);
+    }
+    const row: Record<string, string> = Object.fromEntries(
+      headers.map((header, column) => [header, values[column] ?? ''])
+    );
+    const errors: string[] = [];
+    requiredColumns.forEach((col) => {
+      if (!row[col]) errors.push(`Missing required field: ${col}`);
+    });
+    Object.entries(validators).forEach(([field, validator]) => {
+      if (row[field]) {
+        const error = validator(row[field]);
+        if (error) errors.push(error);
+      }
+    });
+    return {
+      // Match backend result rows, including when a quoted cell spans lines.
+      rowNumber: index + 2,
+      data: row,
+      errors,
+      isValid: errors.length === 0,
+    };
+  });
+}
diff --git a/frontend/tests/csv-import-evidence/README.md b/frontend/tests/csv-import-evidence/README.md
new file mode 100644
index 00000000..b5c9f73d
--- /dev/null
+++ b/frontend/tests/csv-import-evidence/README.md
@@ -0,0 +1,45 @@
+# CSV import browser and backend evidence
+
+Operation: `PAYD685-CSV-REAL-INTERFACE-20261005`, continuing the existing PayD #685 carrier and preserving its Kestrel/Nacre source attribution.
+
+## Mounted import feedback
+
+Product commit `9d01aa6961e96be78d006ed4bc2a2b7785a2bb5b` changes only `EmployeeEntry.tsx`: the employee refresh after a successful bulk import updates the list without replacing `EmployeeList` with the foreground spinner. Initial loading and refresh after a single employee is added keep their existing behavior. The awaited refresh, request payload, authentication interceptor, selection guards and backend contracts are preserved.
+
+The exact parent `bec05631342cd795b2bed626f2449a3b3006f7c0` fails the same real-browser assertion **after** the refresh GET completes: the expected `Imported 25 of 25 rows.` summary never appears. The fixed source passes all eight browser cases. [before.json](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/before.json) and [after.json](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/after.json) pin the actual source-file SHA-256 values, runtime and observed result; screenshots show the actual application.
+
+Actual runtime: Node 24.19.0, Chrome Headless Shell 151.0.7922.34, React and Vite from the unchanged frontend lockfile. Both parent and fixed source pass the full `npm run build` (`tsc -b && vite build`, 2,817 modules); the existing large-chunk warning remains. The eight existing CSV parser tests also pass.
+
+```sh
+cd frontend
+npm ci --ignore-scripts --no-audit --no-fund
+npm run build
+node --test tests/csvPreview.test.mjs
+npx playwright install chromium
+PAYD_EVIDENCE_DIR=/tmp/payd-csv-browser node tests/csvImport.browser.mjs
+```
+
+`PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH` can select an already installed Chromium executable. Run with ports 4000 and 5173 free. The harness closes its owned browser and servers in `finally`.
+
+The browser loads the real `/employee` app, React components, `FileReader`, and Axios interceptor. Its only backend is an explicitly labeled loopback HTTP fixture, with a dummy token and no database. Public network requests are blocked. Cases cover:
+
+- File selection with quoted commas and multiline fields; exactly 20 of 25 rows previewed.
+- Exactly one initial authenticated request with the unmodified CSV string.
+- Successful and partial-response summaries surviving the awaited employee refresh.
+- HTTP 400 preserving a retryable preview.
+- Replacement selection suppressing old feedback; closing the preview retaining progress.
+- Mobile 390 × 844 drag/drop through a real `DataTransfer`, `File`, and `FileReader`.
+
+The complete run makes five deliberately controlled import requests across those cases. It does not execute a live employee import, database transaction, signing or payment, or prove the entire application's behavior.
+
+## Actual backend differentials
+
+[parser-differential.json](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/parser-differential.json) records 48 preserved raw-byte fixtures against real `fast-csv` 5.0.5 with the backend's `{ headers: true }` options: 32 identical records and logical row numbers, eight shared file rejections, and eight differences. BOM, quoted headers/cells, commas, doubled quotes, multiline fields, CR/LF/CRLF, ordinary blank lines and short rows are represented. Differences include backend acceptance of unquoted internal quote characters, repeated empty headers, and differences for whitespace-only rows and `__proto__` extra headers. Missing required headers are rejected by the preview before backend row validation. Universal parser parity is **not** claimed.
+
+[backend-validation.json](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/backend-validation.json) records 73 cases against the actual `processCsv` and employee schema, using locked fast-csv 5.0.5, Zod 4.3.6, Stellar SDK 12.3.0 and TypeScript 5.9.3. Only the database pool, employee persistence and logger are replaced with in-memory recording stubs. There are 15 differences between preview-valid counts and actual backend success counts, including wallet/length/email constraints and salary parsing. Malformed complete files cause zero recorded employee creates, and errors after multiline records keep logical row numbering.
+
+These model checks ran on parent `bec0563`. The parser, preview validators, backend importer and employee schema are unchanged by the mounted-feedback fix, so their source hashes remain valid. Preview validity remains provisional; backend validation controls acceptance. Salary coercion and other schema differences are recorded findings, not represented as fixed by this lifecycle patch. A separate source lane is examining strict salary parsing.
+
+The JSON records preserve actual failures and mismatches. They establish neither a live database outcome nor a full backend suite, hosted CI, sponsor acceptance, reward or payment.
+
+Full [desktop screenshot](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/desktop-after-refresh.png), [mobile screenshot](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/mobile-drop-preview.png), [baseline screenshot](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/before-after-refresh.png), and [portable backend reproduction instructions](https://github.com/woahwhattheheck/PayD/blob/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence/reproduce/README.md) are retained on the isolated evidence commit. The feature branch carries this compact receipt and the real-browser regression harness.
diff --git a/frontend/tests/csv-import-evidence/receipt.json b/frontend/tests/csv-import-evidence/receipt.json
new file mode 100644
index 00000000..15788db9
--- /dev/null
+++ b/frontend/tests/csv-import-evidence/receipt.json
@@ -0,0 +1,91 @@
+{
+  "operation": "PAYD685-CSV-REAL-INTERFACE-20261005",
+  "product_commit": "9d01aa6961e96be78d006ed4bc2a2b7785a2bb5b",
+  "base_commit": "bec05631342cd795b2bed626f2449a3b3006f7c0",
+  "evidence_commit": "8ee71e238d1a7e538e51f7513e56934f967698d8",
+  "evidence_url": "https://github.com/woahwhattheheck/PayD/tree/8ee71e238d1a7e538e51f7513e56934f967698d8/frontend/tests/csv-import-evidence",
+  "browser_before": {
+    "sourceBase": "bec05631342cd795b2bed626f2449a3b3006f7c0",
+    "employeeEntrySha256": "79d86b0f424ce57a6166ff99cf56bbb66ad20f62a32b8773e1e35aae3aa9c00a",
+    "runtime": "v24.19.0",
+    "browser": "151.0.7922.34",
+    "transport": "Loopback HTTP fixture; no live database or credentials",
+    "previewRows": 20,
+    "totalRows": 25,
+    "rawCsvExact": true,
+    "oneAuthenticatedRequest": true,
+    "listReads": 3,
+    "resultVisible": false,
+    "pageErrors": []
+  },
+  "browser_after": {
+    "sourceBase": "bec05631342cd795b2bed626f2449a3b3006f7c0",
+    "employeeEntrySha256": "dd5291a794c13505b114a69c3bbcb7c94d8a649b0ec919b6aee331b3a8c98434",
+    "runtime": "v24.19.0",
+    "browser": "151.0.7922.34",
+    "transport": "Loopback HTTP fixture; no live database or credentials",
+    "previewRows": 20,
+    "totalRows": 25,
+    "rawCsvExact": true,
+    "oneAuthenticatedRequest": true,
+    "listReads": 6,
+    "resultVisible": true,
+    "pageErrors": [],
+    "cases": [
+      "file-picker quoted/multiline preview20-of25",
+      "byte-exact authenticated request",
+      "success survives awaited GET",
+      "partial summary survives awaited GET",
+      "rejected POST preserves retryable preview",
+      "replacement suppresses stale result",
+      "closed preview retains progress",
+      "mobile real FileReader drag/drop"
+    ],
+    "importRequests": 5
+  },
+  "frontend_build": {
+    "before": 0,
+    "after": 0,
+    "command": "npm run build",
+    "modules": 2817,
+    "warning": "existing large minified chunk"
+  },
+  "existing_csv_tests": {
+    "command": "node --test tests/csvPreview.test.mjs",
+    "pass": 8,
+    "fail": 0
+  },
+  "parser_differential": {
+    "cases": 48,
+    "counts": {
+      "same-records": 32,
+      "different-records": 2,
+      "same-acceptance": 8,
+      "different-acceptance": 6
+    },
+    "universal_parity": false
+  },
+  "backend_validation": {
+    "cases": 73,
+    "valid_count_mismatches": 15,
+    "mismatch_names": [
+      "salary-junk-suffix",
+      "salary-whitespace",
+      "invalid-wallet",
+      "overlong-first_name",
+      "overlong-last_name",
+      "overlong-position",
+      "overlong-department",
+      "overlong-currency",
+      "email-validation-0",
+      "email-validation-1",
+      "email-validation-2",
+      "salary-validation-0",
+      "salary-validation-2",
+      "salary-validation-9",
+      "mixed-valid-and-invalid-wallet"
+    ],
+    "live_database": false
+  },
+  "scope": "Actual frontend browser and build; actual locked backend parser/schema with memory recording stubs; no live backend import/database/signing/payment or complete hosted CI/acceptance claim"
+}
diff --git a/frontend/tests/csvImport.browser.mjs b/frontend/tests/csvImport.browser.mjs
new file mode 100644
index 00000000..34dcd9d7
--- /dev/null
+++ b/frontend/tests/csvImport.browser.mjs
@@ -0,0 +1,301 @@
+import { createServer as createHttpServer } from 'node:http';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import assert from 'node:assert/strict';
+import { createServer } from 'vite';
+import { chromium } from '@playwright/test';
+
+const root = dirname(fileURLToPath(new URL('../package.json', import.meta.url)));
+process.chdir(root);
+const evidence = process.env.PAYD_EVIDENCE_DIR || '/tmp/payd685-browser-before';
+await mkdir(evidence, { recursive: true });
+const csv =
+  'first_name,last_name,email,base_salary\r\n' +
+  Array.from(
+    { length: 25 },
+    (_, i) => `"Ada, ${i}","Lovelace\nByron",ada${i}@example.test,100`
+  ).join('\r\n') +
+  '\r\n';
+const requests = [];
+const errors = [];
+let listReads = 0;
+let mode = 'success';
+let releaseImport;
+const api = createHttpServer(async (req, res) => {
+  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5173');
+  res.setHeader('Access-Control-Allow-Headers', 'authorization,content-type');
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204).end();
+    return;
+  }
+  let body = '';
+  for await (const chunk of req) body += chunk;
+  requests.push({
+    method: req.method,
+    path: req.url,
+    authorization: req.headers.authorization,
+    body,
+  });
+  res.setHeader('Content-Type', 'application/json');
+  if (req.url === '/api/employees' && req.method === 'GET') {
+    listReads++;
+    if (listReads > 1) await new Promise((resolve) => setTimeout(resolve, 150));
+    res.end(JSON.stringify({ data: [] }));
+  } else if (req.url === '/api/employees/bulk-import' && req.method === 'POST') {
+    const requestMode = mode;
+    await new Promise((resolve) => {
+      releaseImport = resolve;
+    });
+    releaseImport = undefined;
+    if (requestMode === 'error') {
+      res.statusCode = 400;
+      res.end(JSON.stringify({ message: 'Fixture import rejected' }));
+    } else {
+      res.end(
+        JSON.stringify({
+          message: 'Fixture transport only',
+          summary: {
+            totalRows: 25,
+            successCount: requestMode === 'partial' ? 24 : 25,
+            errorCount: requestMode === 'partial' ? 1 : 0,
+          },
+          errors:
+            requestMode === 'partial'
+              ? [{ row: 3, email: 'ada1@example.test', errors: ['Fixture rejected row'] }]
+              : [],
+        })
+      );
+    }
+  } else {
+    res.statusCode = 404;
+    res.end(JSON.stringify({ error: 'No live service in this fixture' }));
+  }
+});
+await new Promise((resolve, reject) => {
+  api.once('error', reject);
+  api.listen(4000, '127.0.0.1', resolve);
+});
+const vite = await createServer({
+  root,
+  server: { host: '127.0.0.1', port: 5173, strictPort: true },
+});
+let browser;
+try {
+  await vite.listen();
+  browser = await chromium.launch({
+    ...(process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH
+      ? { executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH }
+      : {}),
+    headless: true,
+    args: ['--no-sandbox'],
+  });
+  const context = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
+  await context.route('**/*', (route) => {
+    const url = new URL(route.request().url());
+    if (
+      url.hostname === 'localhost' ||
+      url.hostname === '127.0.0.1' ||
+      url.protocol === 'data:' ||
+      url.protocol === 'blob:'
+    )
+      return route.continue();
+    return route.abort();
+  });
+  await context.addInitScript(() =>
+    localStorage.setItem('payd_auth_token', 'fixture-only-no-credentials')
+  );
+  const page = await context.newPage();
+  page.on('pageerror', (error) => errors.push(error.message));
+  await page.goto('http://127.0.0.1:5173/employee', { waitUntil: 'domcontentloaded' });
+  await page.waitForLoadState('networkidle');
+  await page
+    .getByRole('button', { name: 'Import from CSV', exact: true })
+    .click({ timeout: 60000 });
+  await page
+    .locator('input[type=file]')
+    .setInputFiles({
+      name: 'quoted-employees.csv',
+      mimeType: 'text/csv',
+      buffer: Buffer.from(csv),
+    });
+  await page.getByText('Showing first 20 of 25 rows', { exact: true }).waitFor();
+  const previewTable = page
+    .locator('table')
+    .filter({ has: page.getByRole('columnheader', { name: 'Row', exact: true }) });
+  assert.equal(await previewTable.locator('tbody tr').count(), 20);
+  await page.screenshot({ path: `${evidence}/desktop-preview.png`, fullPage: true });
+  const waitForImport = async () => {
+    const deadline = Date.now() + 10000;
+    while (!releaseImport && Date.now() < deadline)
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    assert.equal(
+      typeof releaseImport,
+      'function',
+      'Fixture must observe the actual HTTP import request'
+    );
+  };
+  const waitForRefresh = () =>
+    page.waitForResponse(
+      (response) =>
+        response.url().endsWith('/api/employees') && response.request().method() === 'GET'
+    );
+  const refreshed = waitForRefresh();
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).click();
+  await page
+    .getByText(
+      'Import in progress. Closing or changing this preview does not cancel submitted rows.',
+      { exact: true }
+    )
+    .waitFor();
+  await waitForImport();
+  releaseImport();
+  await (await refreshed).finished();
+  await page.waitForFunction(
+    () =>
+      !!document.querySelector('input[type=file]') ||
+      document.body.textContent.includes('Import from CSV')
+  );
+  await page.waitForFunction(() => !document.body.textContent.includes('Importing employees…'), {
+    timeout: 15000,
+  });
+  const posts = requests.filter(
+    (r) => r.method === 'POST' && r.path === '/api/employees/bulk-import'
+  );
+  assert.equal(posts.length, 1);
+  assert.deepEqual(JSON.parse(posts[0].body), { csv });
+  assert.equal(posts[0].authorization, 'Bearer fixture-only-no-credentials');
+  const resultVisible = await page
+    .getByText('Imported 25 of 25 rows.', { exact: true })
+    .isVisible();
+  await page.screenshot({ path: `${evidence}/desktop-after-import.png`, fullPage: true });
+  const report = {
+    sourceBase: 'bec05631342cd795b2bed626f2449a3b3006f7c0',
+    employeeEntrySha256: createHash('sha256')
+      .update(await readFile(`${root}/src/pages/EmployeeEntry.tsx`))
+      .digest('hex'),
+    runtime: process.version,
+    browser: await browser.version(),
+    transport: 'Loopback HTTP fixture; no live database or credentials',
+    previewRows: 20,
+    totalRows: 25,
+    rawCsvExact: true,
+    oneAuthenticatedRequest: true,
+    listReads,
+    resultVisible,
+    pageErrors: errors,
+  };
+  await writeFile(`${evidence}/receipt.json`, JSON.stringify(report, null, 2) + '\n');
+  assert.equal(
+    resultVisible,
+    true,
+    'Actual EmployeeEntry refresh must preserve the mounted import result'
+  );
+
+  // Actual partial response, not a mocked React callback.
+  mode = 'partial';
+  const partialRefresh = waitForRefresh();
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).click();
+  await waitForImport();
+  releaseImport();
+  await (await partialRefresh).finished();
+  await page.getByText('Imported 24 of 25 rows.', { exact: false }).waitFor();
+  await page.getByText('1 row rejected by the backend.', { exact: false }).waitFor();
+
+  // Rejected imports preserve preview and become retryable.
+  mode = 'error';
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).click();
+  await waitForImport();
+  releaseImport();
+  await page
+    .getByRole('alert')
+    .filter({ hasText: 'Request failed with status code 400' })
+    .waitFor();
+  assert.equal(await previewTable.locator('tbody tr').count(), 20);
+  assert.equal(
+    await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).isEnabled(),
+    true
+  );
+
+  // A replacement selection cannot receive the older in-flight result.
+  mode = 'success';
+  const replacementRefresh = waitForRefresh();
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).click();
+  await waitForImport();
+  await page
+    .locator('input[type=file]')
+    .setInputFiles({
+      name: 'replacement.csv',
+      mimeType: 'text/csv',
+      buffer: Buffer.from(csv.replaceAll('Ada', 'Grace')),
+    });
+  await page.getByText('File: replacement.csv', { exact: true }).waitFor();
+  releaseImport();
+  await (await replacementRefresh).finished();
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).waitFor();
+  assert.equal(await page.getByText('Imported 25 of 25 rows.', { exact: true }).count(), 0);
+
+  // Closing the preview retains progress and suppresses stale feedback.
+  const closedRefresh = waitForRefresh();
+  await page.getByRole('button', { name: 'Import 25 valid employees', exact: true }).click();
+  await waitForImport();
+  await page.getByRole('button', { name: 'Close preview', exact: true }).click();
+  assert.equal(
+    await page
+      .getByText(
+        'Import in progress. Closing or changing this preview does not cancel submitted rows.',
+        { exact: true }
+      )
+      .isVisible(),
+    true
+  );
+  releaseImport();
+  await (await closedRefresh).finished();
+  await page.getByRole('button', { name: 'Import from CSV', exact: true }).click();
+  assert.equal(await page.getByText('Imported 25 of 25 rows.', { exact: true }).count(), 0);
+
+  // Real mobile drag/drop invokes the existing FileReader and preview path.
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.locator('[class*="border-dashed"]').evaluate((zone, content) => {
+    const transfer = new DataTransfer();
+    transfer.items.add(new File([content], 'dropped.csv', { type: 'text/csv' }));
+    zone.dispatchEvent(
+      new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: transfer })
+    );
+  }, csv);
+  await page.getByText('Showing first 20 of 25 rows', { exact: true }).waitFor();
+  assert.equal(await previewTable.locator('tbody tr').count(), 20);
+  await page.screenshot({ path: `${evidence}/mobile-drop-preview.png`, fullPage: true });
+  report.cases = [
+    'file-picker quoted/multiline preview20-of25',
+    'byte-exact authenticated request',
+    'success survives awaited GET',
+    'partial summary survives awaited GET',
+    'rejected POST preserves retryable preview',
+    'replacement suppresses stale result',
+    'closed preview retains progress',
+    'mobile real FileReader drag/drop',
+  ];
+  report.importRequests = requests.filter(
+    (r) => r.method === 'POST' && r.path === '/api/employees/bulk-import'
+  ).length;
+  report.listReads = listReads;
+  assert.deepEqual(errors, []);
+  await writeFile(`${evidence}/receipt.json`, JSON.stringify(report, null, 2) + '\n');
+  console.log(
+    JSON.stringify({
+      evidence,
+      cases: report.cases.length,
+      resultVisible,
+      pageErrors: errors,
+      listReads,
+    })
+  );
+} finally {
+  releaseImport?.();
+  await browser?.close();
+  await vite.close();
+  await new Promise((resolve) => api.close(resolve));
+}
diff --git a/frontend/tests/csvPreview.test.mjs b/frontend/tests/csvPreview.test.mjs
new file mode 100644
index 00000000..d385d0c7
--- /dev/null
+++ b/frontend/tests/csvPreview.test.mjs
@@ -0,0 +1,91 @@
+// From frontend/: node --experimental-strip-types --test tests/csvPreview.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { parseCSVPreview } from '../src/utils/csvPreview.ts';
+
+const required = ['first_name', 'last_name', 'email'];
+const header = required.join(',');
+const validators = {
+  email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Invalid email address',
+};
+
+test('ordinary LF, CRLF and CR records retain validation and logical row numbers', () => {
+  for (const newline of ['\n', '\r\n', '\r']) {
+    const rows = parseCSVPreview(
+      [header, 'Ada,Lovelace,ada@example.com', 'Grace,,invalid', ''].join(newline),
+      required,
+      validators
+    );
+    assert.equal(rows.length, 2);
+    assert.equal(rows[0].isValid, true);
+    assert.equal(rows[1].rowNumber, 3);
+    assert.deepEqual(rows[1].errors, ['Missing required field: last_name', 'Invalid email address']);
+  }
+});
+
+test('BOM, quoted headers, embedded commas and escaped quotes map to the right fields', () => {
+  const [row] = parseCSVPreview(
+    '\uFEFF"first_name","last_name","email"\r\n"Ada, Augusta","Love""lace",ada@example.com\r\n',
+    required,
+    validators
+  );
+  assert.deepEqual(row.data, {
+    first_name: 'Ada, Augusta', last_name: 'Love"lace', email: 'ada@example.com',
+  });
+  assert.equal(row.isValid, true);
+});
+
+test('multiline quoted values are one record and whitespace is not trimmed', () => {
+  const rows = parseCSVPreview(
+    `${header},position\r\nAda,Lovelace,ada@example.com,"Lead,\r\nResearcher"\r\n Grace , Hopper ,grace@example.com,Engineer`,
+    required,
+    validators
+  );
+  assert.equal(rows.length, 2);
+  assert.equal(rows[0].data.position, 'Lead,\r\nResearcher');
+  assert.equal(rows[1].rowNumber, 3);
+  assert.equal(rows[1].data.first_name, ' Grace ');
+  assert.equal(rows[1].data.last_name, ' Hopper ');
+});
+
+test('empty/header-only files do not produce data, and shorter rows pad empty fields', () => {
+  assert.deepEqual(parseCSVPreview('', required), []);
+  assert.deepEqual(parseCSVPreview('\uFEFF', required), []);
+  assert.deepEqual(parseCSVPreview(`${header}\n`, required), []);
+  const rows = parseCSVPreview(`${header}\nAda,Lovelace\n,,`, required);
+  assert.equal(rows[0].data.email, '');
+  assert.equal(rows[0].isValid, false);
+  assert.equal(rows[1].errors.length, 3);
+});
+
+test('malformed quotes reject the complete file instead of publishing a valid prefix', () => {
+  for (const badRow of ['"Ada,Lovelace,ada@example.com', '"Ada"x,Lovelace,ada@example.com', 'A"da,Lovelace,ada@example.com']) {
+    assert.throws(
+      () => parseCSVPreview(`${header}\nGrace,Hopper,grace@example.com\n${badRow}`, required),
+      /Invalid CSV:/
+    );
+  }
+});
+
+test('missing/duplicate headers and excess columns cannot appear importable', () => {
+  assert.throws(() => parseCSVPreview('name,email\nAda,a@example.com', required), /Missing required columns:/);
+  assert.throws(() => parseCSVPreview(`${header},email\nAda,Lovelace,a@example.com,b@example.com`, required), /duplicate column headers/);
+  assert.throws(() => parseCSVPreview(`${header}\nAda,Lovelace,a@example.com,extra`, required), /too many columns in row 2/);
+  assert.throws(() => parseCSVPreview(` first_name,last_name,email\nAda,Lovelace,a@example.com`, required), /Missing required columns: first_name/);
+});
+
+test('whitespace around quoted fields and a final quoted empty cell are handled', () => {
+  const [row] = parseCSVPreview(`${header},position\n  "Ada"  ,Lovelace,ada@example.com,""`, required);
+  assert.equal(row.data.first_name, 'Ada');
+  assert.equal(row.data.position, '');
+  assert.equal(row.isValid, true);
+});
+
+test('all 1000 records are validated although the component previews only the first 20', () => {
+  const content = `${header}\n${Array.from({ length: 1000 }, (_, i) => `"Employee, ${i}",Example,user${i}@example.com`).join('\n')}`;
+  const rows = parseCSVPreview(content, required, validators);
+  assert.equal(rows.length, 1000);
+  assert.equal(rows.at(-1).rowNumber, 1001);
+  assert.equal(rows.at(-1).data.first_name, 'Employee, 999');
+  assert.equal(rows.every((row) => row.isValid), true);
+});