feat: edit parsed records before importing

The import preview only showed counts + skipped-row errors with no way to
fix anything. Now every parsed record is editable before import:

- backend: shared validatePatientImport() (used by the previewImport tool)
  + POST /api/ai/import/validate for dry-run re-validation; the import
  preview payload now carries the original records (and the source record on
  each invalid row) so the UI can edit them.
- frontend: the import card gets a "Review & edit" dialog listing every
  record with a ready / needs-fixing badge; opening one reuses the full
  PatientFormDialog in a new non-persisting review mode (editable file
  number) and re-validates on save, so skipped rows can be fixed and
  included.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/chat/import-preview-card.tsx

@@ -1,33 +1,166 @@
 "use client";
 
-import { AlertTriangle, Check, Database, X } from "lucide-react";
-import { useState } from "react";
+import { AlertTriangle, Check, Database, Pencil, X } from "lucide-react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { PatientFormDialog } from "@/components/chat/patient-form-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import type { ImportPreviewData } from "@/lib/ai-chat";
-import { commitImport } from "@/lib/ai-settings";
+import { commitImport, validateImport } from "@/lib/ai-settings";
+import type { AllergySeverity, LabFlag, Patient } from "@/lib/patients";
 import { notify } from "@/lib/toast";
 
 type Status = "pending" | "committing" | "done" | "rejected";
 
+const str = (v: unknown): string => (v == null ? "" : String(v));
+const arr = (v: unknown): unknown[] => (Array.isArray(v) ? v : []);
+
+// Coerce an arbitrary parsed record (a normalized valid row, or a raw invalid
+// one with bare-string lists / gender words) into a complete Patient the form
+// can render and edit. Mirrors the backend's tolerant normalization.
+function toPatientDraft(rec: unknown): Patient {
+  const r = (rec ?? {}) as Record<string, unknown>;
+  const sx = str(r.sex).trim().toLowerCase();
+  const sex: Patient["sex"] = sx.startsWith("f") || sx.startsWith("w") ? "F" : "M";
+  const status = (["active", "inpatient", "discharged"] as const).includes(
+    r.status as Patient["status"],
+  )
+    ? (r.status as Patient["status"])
+    : "active";
+  const obj = (v: unknown) => (v ?? {}) as Record<string, unknown>;
+
+  return {
+    fileNumber: str(r.fileNumber).replace(/\D/g, ""),
+    name: str(r.name),
+    age: Number(r.age) || 0,
+    sex,
+    pcp: str(r.pcp),
+    primaryProviderId: (r.primaryProviderId as string | null) ?? null,
+    status,
+    initials: str(r.initials),
+    alerts: arr(r.alerts).map(str),
+    allergies: arr(r.allergies).map((a) =>
+      typeof a === "string"
+        ? { substance: a, reaction: "", severity: "mild" as AllergySeverity }
+        : {
+            substance: str(obj(a).substance),
+            reaction: str(obj(a).reaction),
+            severity: (["mild", "moderate", "severe"].includes(
+              obj(a).severity as string,
+            )
+              ? obj(a).severity
+              : "mild") as AllergySeverity,
+          },
+    ),
+    medications: arr(r.medications).map((m) =>
+      typeof m === "string"
+        ? { name: m, dose: "", frequency: "" }
+        : {
+            name: str(obj(m).name),
+            dose: str(obj(m).dose),
+            frequency: str(obj(m).frequency),
+          },
+    ),
+    problems: arr(r.problems).map((p) =>
+      typeof p === "string"
+        ? { label: p, since: "" }
+        : { label: str(obj(p).label), since: str(obj(p).since) },
+    ),
+    vitals: {
+      bp: str(obj(r.vitals).bp),
+      hr: str(obj(r.vitals).hr),
+      temp: str(obj(r.vitals).temp),
+      spo2: str(obj(r.vitals).spo2),
+      takenAt: str(obj(r.vitals).takenAt),
+    },
+    vitalsTrend: { label: "", unit: "", points: [] },
+    labs: arr(r.labs).map((l) => ({
+      name: str(obj(l).name),
+      value: str(obj(l).value),
+      flag: (["normal", "high", "low", "critical"].includes(
+        obj(l).flag as string,
+      )
+        ? obj(l).flag
+        : "normal") as LabFlag,
+      takenAt: str(obj(l).takenAt),
+    })),
+    labTrend: { label: "", unit: "", points: [] },
+    encounters: arr(r.encounters).map((e) => ({
+      type: str(obj(e).type) || "Visit",
+      date: str(obj(e).date),
+      provider: str(obj(e).provider),
+      summary: str(obj(e).summary),
+    })),
+  };
+}
+
 // The human approval gate for the migration import. The agent proposes records
-// (dry run, nothing written); the clinician reviews counts + issues here and
-// must approve before anything is inserted via POST /api/ai/import.
+// (dry run, nothing written); the clinician reviews counts, can open and edit
+// any record (fixing skipped rows), and must approve before anything is
+// inserted via POST /api/ai/import.
 export function ImportPreviewCard({ data }: { data: ImportPreviewData }) {
   const { t } = useTranslation();
   const [status, setStatus] = useState<Status>("pending");
   const [result, setResult] = useState<{ created: number; failed: number } | null>(
     null,
   );
+  // Working set of records (editable). Older threads may lack `records`; fall
+  // back to the valid set so the card still works.
+  const [records, setRecords] = useState<unknown[]>(
+    () => data.records ?? data.valid ?? [],
+  );
+  // index → errors for rows that still fail validation.
+  const [invalid, setInvalid] = useState<
+    { index: number; errors: string[] }[]
+  >(() => data.invalid ?? []);
+  const [reviewOpen, setReviewOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+  const invalidByIndex = useMemo(
+    () => new Map(invalid.map((i) => [i.index, i.errors])),
+    [invalid],
+  );
+  const validCount = records.length - invalidByIndex.size;
+
+  // Re-validate the working set server-side after an edit.
+  const revalidate = async (next: unknown[]) => {
+    try {
+      const res = await validateImport(next);
+      setInvalid(res.invalid.map((i) => ({ index: i.index, errors: i.errors })));
+    } catch {
+      /* keep prior validation state */
+    }
+  };
+
+  const saveEdit = (index: number, record: Patient) => {
+    const next = records.map((r, i) => (i === index ? record : r));
+    setRecords(next);
+    setEditingIndex(null);
+    void revalidate(next);
+  };
 
   const approve = async () => {
     setStatus("committing");
     try {
-      const res = await commitImport(data.valid);
+      // Send the whole working set; the backend re-validates and skips any
+      // still-invalid rows, returning created/failed.
+      const res = await commitImport(records);
       setResult({ created: res.created.length, failed: res.failed.length });
       setStatus("done");
+      setReviewOpen(false);
       notify.success(
         t("chat.importCard.importedTitle"),
         t("chat.importCard.importedBody", { count: res.created.length }),
@@ -46,41 +179,41 @@ export function ImportPreviewCard({ data }: { data: ImportPreviewData }) {
       <div className="flex items-center gap-2">
         <Database className="size-4 text-muted-foreground" />
         <span className="text-sm font-medium">{t("chat.importCard.title")}</span>
+        {status === "pending" && records.length > 0 ? (
+          <Button
+            className="ml-auto"
+            onClick={() => setReviewOpen(true)}
+            size="sm"
+            variant="ghost"
+          >
+            <Pencil className="size-3.5" />
+            {t("chat.importCard.reviewEdit")}
+          </Button>
+        ) : null}
       </div>
 
       <div className="flex flex-wrap gap-4 text-sm">
         <span>
           {t("chat.importCard.ready")}{" "}
-          <strong className="tabular-nums">{data.valid.length}</strong>
+          <strong className="tabular-nums">{validCount}</strong>
         </span>
-        {data.invalid.length > 0 ? (
+        {invalidByIndex.size > 0 ? (
           <span className="flex items-center gap-1 text-warning-foreground">
             <AlertTriangle className="size-3.5" />
             {t("chat.importCard.skipped")}{" "}
-            <strong className="tabular-nums">{data.invalid.length}</strong>
+            <strong className="tabular-nums">{invalidByIndex.size}</strong>
           </span>
         ) : null}
         <span className="text-muted-foreground">
           {t("chat.importCard.total")}{" "}
-          <span className="tabular-nums">{data.total}</span>
+          <span className="tabular-nums">{records.length}</span>
         </span>
       </div>
 
-      {data.invalid.length > 0 ? (
-        <ul className="max-h-40 space-y-1 overflow-y-auto rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground">
-          {data.invalid.slice(0, 5).map((issue) => (
-            <li className="truncate" key={issue.index}>
-              {t("chat.importCard.row", { index: issue.index + 1 })}:{" "}
-              {issue.errors[0]}
-              {issue.errors.length > 1 ? ` (+${issue.errors.length - 1})` : ""}
-            </li>
-          ))}
-          {data.invalid.length > 5 ? (
-            <li className="text-muted-foreground/70">
-              {t("chat.importCard.more", { count: data.invalid.length - 5 })}
-            </li>
-          ) : null}
-        </ul>
+      {invalidByIndex.size > 0 && status === "pending" ? (
+        <p className="text-xs text-muted-foreground">
+          {t("chat.importCard.fixHint")}
+        </p>
       ) : null}
 
       {status === "done" && result ? (
@@ -98,13 +231,13 @@ export function ImportPreviewCard({ data }: { data: ImportPreviewData }) {
       ) : (
         <div className="flex items-center gap-2">
           <Button
-            disabled={status === "committing" || data.valid.length === 0}
+            disabled={status === "committing" || validCount === 0}
             onClick={approve}
             size="sm"
           >
             {status === "committing"
               ? t("chat.importCard.importing")
-              : t("chat.importCard.approve", { count: data.valid.length })}
+              : t("chat.importCard.approve", { count: validCount })}
           </Button>
           <Button
             disabled={status === "committing"}
@@ -117,6 +250,86 @@ export function ImportPreviewCard({ data }: { data: ImportPreviewData }) {
           </Button>
         </div>
       )}
+
+      {/* Review list: every parsed record, editable. */}
+      <Dialog onOpenChange={setReviewOpen} open={reviewOpen}>
+        <DialogPopup className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t("chat.importCard.reviewTitle")}</DialogTitle>
+            <DialogDescription>
+              {t("chat.importCard.reviewDescription")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogPanel className="flex max-h-[60vh] flex-col gap-2 overflow-y-auto">
+            {records.map((rec, index) => {
+              const errors = invalidByIndex.get(index);
+              const name =
+                str((rec as Record<string, unknown>).name) ||
+                t("chat.importCard.unnamed");
+              return (
+                <button
+                  className="flex items-start gap-2 rounded-xl border bg-card/30 p-3 text-left transition-colors hover:bg-accent"
+                  key={index}
+                  onClick={() => setEditingIndex(index)}
+                  type="button"
+                >
+                  <div className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium text-foreground text-sm">
+                      {name}
+                    </span>
+                    {errors ? (
+                      <span className="mt-0.5 flex items-center gap-1 text-warning-foreground text-xs">
+                        <AlertTriangle className="size-3 shrink-0" />
+                        <span className="truncate">{errors[0]}</span>
+                      </span>
+                    ) : (
+                      <span className="mt-0.5 text-muted-foreground text-xs">
+                        {t("chat.importCard.rowReady")}
+                      </span>
+                    )}
+                  </div>
+                  {errors ? (
+                    <Badge variant="outline">
+                      {t("chat.importCard.needsFix")}
+                    </Badge>
+                  ) : (
+                    <Badge variant="secondary">
+                      {t("chat.importCard.ready")}
+                    </Badge>
+                  )}
+                  <Pencil className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                </button>
+              );
+            })}
+          </DialogPanel>
+          <DialogFooter>
+            <DialogClose render={<Button type="button" variant="outline" />}>
+              {t("chat.importCard.reviewClose")}
+            </DialogClose>
+            <Button
+              disabled={status === "committing" || validCount === 0}
+              onClick={approve}
+              type="button"
+            >
+              {t("chat.importCard.approve", { count: validCount })}
+            </Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
+
+      {/* Edit one record in the full patient form (review mode — no write). */}
+      {editingIndex !== null ? (
+        <PatientFormDialog
+          key={editingIndex}
+          mode="edit"
+          onDraft={(record) => saveEdit(editingIndex, record)}
+          onOpenChange={(o) => {
+            if (!o) setEditingIndex(null);
+          }}
+          open={editingIndex !== null}
+          patient={toPatientDraft(records[editingIndex])}
+        />
+      ) : null}
     </Card>
   );
 }

frontend/components/chat/patient-form-dialog.tsx

@@ -46,6 +46,10 @@ type PatientFormDialogProps = {
   patient?: Patient;
   onCreated?: (fileNumber: string) => void;
   onSaved?: (patient: Patient) => void;
+  // Review mode: when provided, the form does NOT persist — it emits the edited
+  // record so a caller (e.g. the import review dialog) can stage it. The file
+  // number becomes editable so a clinician can fix an import row.
+  onDraft?: (record: Patient) => void;
 };
 
 type AllergyDraft = { substance: string; reaction: string; severity: AllergySeverity };
@@ -206,9 +210,12 @@ export function PatientFormDialog({
   patient,
   onCreated,
   onSaved,
+  onDraft,
 }: PatientFormDialogProps) {
   const { t } = useTranslation();
   const isEdit = mode === "edit";
+  // Review mode stages an edited record instead of writing it (import flow).
+  const isReview = Boolean(onDraft);
   // Reception registers demographics only — clinical sections are hidden (the
   // backend also redacts/ignores clinical data for this role). Show everything
   // while the role is still loading to avoid a flash for clinical users.
@@ -333,6 +340,13 @@ export function PatientFormDialog({
         })),
     };
 
+    // Review mode: hand the edited record back to the caller, don't persist.
+    if (onDraft) {
+      onDraft(built);
+      onOpenChange(false);
+      return;
+    }
+
     setSubmitting(true);
     setError(null);
     try {
@@ -386,14 +400,20 @@ export function PatientFormDialog({
       <DialogPopup className="max-h-[85dvh] sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>
-            {isEdit ? t("patientForm.editTitle") : t("patientForm.createTitle")}
+            {isReview
+              ? t("patientForm.reviewTitle")
+              : isEdit
+                ? t("patientForm.editTitle")
+                : t("patientForm.createTitle")}
           </DialogTitle>
           <DialogDescription>
-            {isEdit
-              ? t("patientForm.editDescription", {
-                  name: patient?.name ?? "this",
-                })
-              : t("patientForm.createDescription")}
+            {isReview
+              ? t("patientForm.reviewDescription")
+              : isEdit
+                ? t("patientForm.editDescription", {
+                    name: patient?.name ?? "this",
+                  })
+                : t("patientForm.createDescription")}
           </DialogDescription>
         </DialogHeader>
 
@@ -404,8 +424,17 @@ export function PatientFormDialog({
           >
             <Field label={t("patientForm.fileNumber")}>
               <div className="flex items-center gap-2">
-                <Input readOnly value={fileNumber} />
-                {!isEdit && (
+                <Input
+                  onChange={
+                    isReview
+                      ? (event) =>
+                          setFileNumber(event.target.value.replace(/\D/g, ""))
+                      : undefined
+                  }
+                  readOnly={!isReview}
+                  value={fileNumber}
+                />
+                {!isEdit && !isReview && (
                   <Button
                     aria-label={t("patientForm.regenerate")}
                     onClick={() => setFileNumber(generateFileNumber())}
@@ -703,9 +732,11 @@ export function PatientFormDialog({
             <Button disabled={!name.trim() || submitting} type="submit">
               {submitting
                 ? t("patientForm.saving")
-                : isEdit
-                  ? t("patientForm.saveChanges")
-                  : t("patientForm.savePatient")}
+                : isReview
+                  ? t("patientForm.saveDraft")
+                  : isEdit
+                    ? t("patientForm.saveChanges")
+                    : t("patientForm.savePatient")}
             </Button>
           </DialogFooter>
         </form>