fix(compiler): key-based remount on hard-delete dialogs

Replaces the `if (open) { setStage(...); setCode(''); ... }` reset
useEffect with a key-based remount of the dialog body. The body now
mounts fresh each time the dialog opens; useState initialisers
run naturally instead of being chased by an effect.

Pattern (apply to remaining dialogs in the same shape):

```tsx
export function MyDialog(props) {
  return (
    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
      <DialogContent>
        {props.open && <MyDialogBody key={props.id} {...props} />}
      </DialogContent>
    </Dialog>
  );
}
```

Applied to:
- hard-delete-dialog (keyed on clientId)
- bulk-hard-delete-dialog (keyed on joined clientIds)

set-state-in-effect: 43 → 41.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/clients/bulk-hard-delete-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Loader2, Mail } from 'lucide-react';
 import { toast } from 'sonner';
@@ -32,7 +32,21 @@ interface SkippedRow {
   reason: string;
 }
 
-export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted }: Props) {
+/**
+ * Key-based remount of the body when the dialog opens — fresh state per
+ * open without an open→reset useEffect (React Compiler-safe).
+ */
+export function BulkHardDeleteDialog(props: Props) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {props.open && <BulkHardDeleteDialogBody key={props.clientIds.join(',')} {...props} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function BulkHardDeleteDialogBody({ onOpenChange, clientIds, onDeleted }: Props) {
   const qc = useQueryClient();
   const [stage, setStage] = useState<Stage>('intent');
   const [code, setCode] = useState('');
@@ -43,17 +57,6 @@ export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted
 
   const expectedPhrase = `DELETE ${clientIds.length} CLIENT${clientIds.length === 1 ? '' : 'S'}`;
 
-  useEffect(() => {
-    if (open) {
-      setStage('intent');
-      setCode('');
-      setTypedPhrase('');
-      setMaskedEmail(null);
-      setSkipped([]);
-      setPartialDeleted(0);
-    }
-  }, [open]);
-
   const requestCode = useMutation({
     mutationFn: () =>
       apiFetch<{ data: { count: number; sentToMaskedEmail: string } }>(
@@ -105,147 +108,145 @@ export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted
   const codeValid = /^\d{4}$/.test(code.trim());
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-destructive">
-            <AlertTriangle className="h-5 w-5" />
-            Permanently delete {clientIds.length} client{clientIds.length === 1 ? '' : 's'}
-          </DialogTitle>
-          <DialogDescription>
-            All selected clients must already be archived. This cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="h-5 w-5" />
+          Permanently delete {clientIds.length} client{clientIds.length === 1 ? '' : 's'}
+        </DialogTitle>
+        <DialogDescription>
+          All selected clients must already be archived. This cannot be undone.
+        </DialogDescription>
+      </DialogHeader>
 
-        {stage === 'intent' && (
-          <div className="space-y-3 text-sm text-muted-foreground">
-            <p>
-              We&rsquo;ll email a 4-digit confirmation code to your account address. The code is
-              tied to this exact set of clients and expires in 10 minutes.
-            </p>
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs">
-              For each client we delete: client record + addresses, contacts, notes, tags, portal
-              user, GDPR records, all interests, all reservations. Signed documents, email threads,
-              files and reminders are detached but kept.
+      {stage === 'intent' && (
+        <div className="space-y-3 text-sm text-muted-foreground">
+          <p>
+            We&rsquo;ll email a 4-digit confirmation code to your account address. The code is tied
+            to this exact set of clients and expires in 10 minutes.
+          </p>
+          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs">
+            For each client we delete: client record + addresses, contacts, notes, tags, portal
+            user, GDPR records, all interests, all reservations. Signed documents, email threads,
+            files and reminders are detached but kept.
+          </div>
+        </div>
+      )}
+
+      {stage === 'confirm' && (
+        <div className="space-y-3">
+          <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
+            <Mail className="h-4 w-4 shrink-0 mt-0.5" />
+            <div>
+              Code sent to <span className="font-mono">{maskedEmail}</span>. Enter both fields
+              below.
             </div>
           </div>
-        )}
-
-        {stage === 'confirm' && (
-          <div className="space-y-3">
-            <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
-              <Mail className="h-4 w-4 shrink-0 mt-0.5" />
-              <div>
-                Code sent to <span className="font-mono">{maskedEmail}</span>. Enter both fields
-                below.
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="bhd-code">4-digit code from email</Label>
-              <Input
-                id="bhd-code"
-                inputMode="numeric"
-                maxLength={4}
-                value={code}
-                onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
-                placeholder="0000"
-                className="font-mono tracking-[0.4em] text-center text-lg"
-                autoComplete="off"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="bhd-phrase">
-                Type <span className="font-mono font-semibold">{expectedPhrase}</span> to confirm
-              </Label>
-              <Input
-                id="bhd-phrase"
-                value={typedPhrase}
-                onChange={(e) => setTypedPhrase(e.target.value)}
-                placeholder={expectedPhrase}
-                autoComplete="off"
-                className="font-mono"
-              />
-            </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="bhd-code">4-digit code from email</Label>
+            <Input
+              id="bhd-code"
+              inputMode="numeric"
+              maxLength={4}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+              placeholder="0000"
+              className="font-mono tracking-[0.4em] text-center text-lg"
+              autoComplete="off"
+            />
           </div>
-        )}
+          <div className="space-y-1.5">
+            <Label htmlFor="bhd-phrase">
+              Type <span className="font-mono font-semibold">{expectedPhrase}</span> to confirm
+            </Label>
+            <Input
+              id="bhd-phrase"
+              value={typedPhrase}
+              onChange={(e) => setTypedPhrase(e.target.value)}
+              placeholder={expectedPhrase}
+              autoComplete="off"
+              className="font-mono"
+            />
+          </div>
+        </div>
+      )}
 
-        {stage === 'partial' && (
-          <div className="space-y-3 text-sm">
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
-              {partialDeleted} of {clientIds.length} permanently deleted. {skipped.length} skipped —
-              see below.
-            </div>
-            <div className="rounded-md border max-h-60 overflow-y-auto">
-              <table className="w-full text-xs">
-                <thead className="bg-muted/50 sticky top-0">
-                  <tr>
-                    <th className="text-left px-2 py-1.5 font-medium">Client ID</th>
-                    <th className="text-left px-2 py-1.5 font-medium">Reason</th>
+      {stage === 'partial' && (
+        <div className="space-y-3 text-sm">
+          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
+            {partialDeleted} of {clientIds.length} permanently deleted. {skipped.length} skipped —
+            see below.
+          </div>
+          <div className="rounded-md border max-h-60 overflow-y-auto">
+            <table className="w-full text-xs">
+              <thead className="bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left px-2 py-1.5 font-medium">Client ID</th>
+                  <th className="text-left px-2 py-1.5 font-medium">Reason</th>
+                </tr>
+              </thead>
+              <tbody>
+                {skipped.map((row) => (
+                  <tr key={row.clientId} className="border-t">
+                    <td className="px-2 py-1.5 font-mono text-[11px]">
+                      {row.clientId.slice(0, 8)}…
+                    </td>
+                    <td className="px-2 py-1.5">{row.reason}</td>
                   </tr>
-                </thead>
-                <tbody>
-                  {skipped.map((row) => (
-                    <tr key={row.clientId} className="border-t">
-                      <td className="px-2 py-1.5 font-mono text-[11px]">
-                        {row.clientId.slice(0, 8)}…
-                      </td>
-                      <td className="px-2 py-1.5">{row.reason}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                ))}
+              </tbody>
+            </table>
           </div>
-        )}
+        </div>
+      )}
 
-        <DialogFooter>
-          {stage !== 'partial' && (
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-          )}
-          {stage === 'intent' && (
-            <Button
-              variant="destructive"
-              onClick={() => requestCode.mutate()}
-              disabled={requestCode.isPending}
-            >
-              {requestCode.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
-                </>
-              ) : (
-                'Send confirmation code'
-              )}
-            </Button>
-          )}
-          {stage === 'confirm' && (
-            <Button
-              variant="destructive"
-              onClick={() => bulkDelete.mutate()}
-              disabled={!codeValid || !phraseMatches || bulkDelete.isPending}
-            >
-              {bulkDelete.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
-                </>
-              ) : (
-                `Permanently delete ${clientIds.length}`
-              )}
-            </Button>
-          )}
-          {stage === 'partial' && (
-            <Button
-              onClick={() => {
-                onOpenChange(false);
-                onDeleted?.(partialDeleted);
-              }}
-            >
-              Done
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      <DialogFooter>
+        {stage !== 'partial' && (
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+        )}
+        {stage === 'intent' && (
+          <Button
+            variant="destructive"
+            onClick={() => requestCode.mutate()}
+            disabled={requestCode.isPending}
+          >
+            {requestCode.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
+              </>
+            ) : (
+              'Send confirmation code'
+            )}
+          </Button>
+        )}
+        {stage === 'confirm' && (
+          <Button
+            variant="destructive"
+            onClick={() => bulkDelete.mutate()}
+            disabled={!codeValid || !phraseMatches || bulkDelete.isPending}
+          >
+            {bulkDelete.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
+              </>
+            ) : (
+              `Permanently delete ${clientIds.length}`
+            )}
+          </Button>
+        )}
+        {stage === 'partial' && (
+          <Button
+            onClick={() => {
+              onOpenChange(false);
+              onDeleted?.(partialDeleted);
+            }}
+          >
+            Done
+          </Button>
+        )}
+      </DialogFooter>
+    </>
   );
 }

src/components/clients/hard-delete-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Loader2, Mail } from 'lucide-react';
 import { toast } from 'sonner';
@@ -29,22 +29,30 @@ interface Props {
 
 type Stage = 'intent' | 'confirm';
 
-export function HardDeleteDialog({ open, onOpenChange, clientId, clientName, onDeleted }: Props) {
+/**
+ * Outer wrapper keeps the Dialog mounted (so its close animation runs);
+ * the body only mounts when `open` is true and remounts on each
+ * open via the `clientId` key. This avoids the open→reset-state
+ * useEffect that React Compiler flags — fresh state per open is just
+ * the natural mount.
+ */
+export function HardDeleteDialog(props: Props) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {props.open && <HardDeleteDialogBody key={props.clientId} {...props} />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function HardDeleteDialogBody({ onOpenChange, clientId, clientName, onDeleted }: Props) {
   const qc = useQueryClient();
   const [stage, setStage] = useState<Stage>('intent');
   const [code, setCode] = useState('');
   const [typedName, setTypedName] = useState('');
   const [maskedEmail, setMaskedEmail] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (open) {
-      setStage('intent');
-      setCode('');
-      setTypedName('');
-      setMaskedEmail(null);
-    }
-  }, [open]);
-
   const requestCode = useMutation({
     mutationFn: () =>
       apiFetch<{ data: { sentToMaskedEmail: string } }>(
@@ -82,127 +90,125 @@ export function HardDeleteDialog({ open, onOpenChange, clientId, clientName, onD
   const codeValid = /^\d{4}$/.test(code.trim());
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-destructive">
-            <AlertTriangle className="h-5 w-5" />
-            Permanently delete {clientName}
-          </DialogTitle>
-          <DialogDescription>
-            This permanently removes the client record and detaches all related history (signed
-            documents, emails, files). It cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="h-5 w-5" />
+          Permanently delete {clientName}
+        </DialogTitle>
+        <DialogDescription>
+          This permanently removes the client record and detaches all related history (signed
+          documents, emails, files). It cannot be undone.
+        </DialogDescription>
+      </DialogHeader>
 
-        {stage === 'intent' ? (
-          <div className="space-y-3 text-sm">
-            <p className="text-muted-foreground">
-              Permanent deletion is reserved for archived clients only. We&rsquo;ll email a 4-digit
-              confirmation code to your account address. The code expires in 10 minutes.
+      {stage === 'intent' ? (
+        <div className="space-y-3 text-sm">
+          <p className="text-muted-foreground">
+            Permanent deletion is reserved for archived clients only. We&rsquo;ll email a 4-digit
+            confirmation code to your account address. The code expires in 10 minutes.
+          </p>
+          <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
+            <p className="font-medium flex items-center gap-2">
+              <AlertTriangle className="h-4 w-4" /> What gets deleted
             </p>
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
-              <p className="font-medium flex items-center gap-2">
-                <AlertTriangle className="h-4 w-4" /> What gets deleted
-              </p>
-              <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
-                <li>Client record + addresses, contacts, notes, tags</li>
-                <li>Portal user account + GDPR consent records</li>
-                <li>All pipeline interests + reservations for this client</li>
-              </ul>
-              <p className="font-medium mt-2 flex items-center gap-2">What is preserved</p>
-              <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
-                <li>Signed documents (detached from client, kept for legal history)</li>
-                <li>Email threads, files, reminders (detached)</li>
-                <li>Audit log entries</li>
-              </ul>
-            </div>
+            <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
+              <li>Client record + addresses, contacts, notes, tags</li>
+              <li>Portal user account + GDPR consent records</li>
+              <li>All pipeline interests + reservations for this client</li>
+            </ul>
+            <p className="font-medium mt-2 flex items-center gap-2">What is preserved</p>
+            <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
+              <li>Signed documents (detached from client, kept for legal history)</li>
+              <li>Email threads, files, reminders (detached)</li>
+              <li>Audit log entries</li>
+            </ul>
           </div>
-        ) : (
-          <div className="space-y-3">
-            <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
-              <Mail className="h-4 w-4 shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <div>
-                  Code sent to <span className="font-mono">{maskedEmail}</span>. It expires in 10
-                  minutes.
-                </div>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setCode('');
-                    requestCode.mutate();
-                  }}
-                  disabled={requestCode.isPending}
-                  className="mt-1 text-blue-700 underline-offset-2 hover:underline disabled:opacity-60"
-                >
-                  {requestCode.isPending ? 'Sending…' : 'Send a new code'}
-                </button>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
+            <Mail className="h-4 w-4 shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <div>
+                Code sent to <span className="font-mono">{maskedEmail}</span>. It expires in 10
+                minutes.
               </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="hd-code">4-digit code from email</Label>
-              <Input
-                id="hd-code"
-                inputMode="numeric"
-                maxLength={4}
-                value={code}
-                onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
-                placeholder="0000"
-                className="font-mono tracking-[0.4em] text-center text-lg"
-                autoComplete="off"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="hd-name">
-                Type <span className="font-semibold">{clientName}</span> to confirm
-              </Label>
-              <Input
-                id="hd-name"
-                value={typedName}
-                onChange={(e) => setTypedName(e.target.value)}
-                placeholder={clientName}
-                autoComplete="off"
-              />
+              <button
+                type="button"
+                onClick={() => {
+                  setCode('');
+                  requestCode.mutate();
+                }}
+                disabled={requestCode.isPending}
+                className="mt-1 text-blue-700 underline-offset-2 hover:underline disabled:opacity-60"
+              >
+                {requestCode.isPending ? 'Sending…' : 'Send a new code'}
+              </button>
             </div>
           </div>
-        )}
+          <div className="space-y-1.5">
+            <Label htmlFor="hd-code">4-digit code from email</Label>
+            <Input
+              id="hd-code"
+              inputMode="numeric"
+              maxLength={4}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+              placeholder="0000"
+              className="font-mono tracking-[0.4em] text-center text-lg"
+              autoComplete="off"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="hd-name">
+              Type <span className="font-semibold">{clientName}</span> to confirm
+            </Label>
+            <Input
+              id="hd-name"
+              value={typedName}
+              onChange={(e) => setTypedName(e.target.value)}
+              placeholder={clientName}
+              autoComplete="off"
+            />
+          </div>
+        </div>
+      )}
 
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+      <DialogFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        {stage === 'intent' ? (
+          <Button
+            variant="destructive"
+            onClick={() => requestCode.mutate()}
+            disabled={requestCode.isPending}
+          >
+            {requestCode.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
+              </>
+            ) : (
+              'Send confirmation code'
+            )}
           </Button>
-          {stage === 'intent' ? (
-            <Button
-              variant="destructive"
-              onClick={() => requestCode.mutate()}
-              disabled={requestCode.isPending}
-            >
-              {requestCode.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
-                </>
-              ) : (
-                'Send confirmation code'
-              )}
-            </Button>
-          ) : (
-            <Button
-              variant="destructive"
-              onClick={() => hardDelete.mutate()}
-              disabled={!codeValid || !nameMatches || hardDelete.isPending}
-            >
-              {hardDelete.isPending ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
-                </>
-              ) : (
-                'Permanently delete'
-              )}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        ) : (
+          <Button
+            variant="destructive"
+            onClick={() => hardDelete.mutate()}
+            disabled={!codeValid || !nameMatches || hardDelete.isPending}
+          >
+            {hardDelete.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
+              </>
+            ) : (
+              'Permanently delete'
+            )}
+          </Button>
+        )}
+      </DialogFooter>
+    </>
   );
 }