feat(confidence-engine): confirm destructive investigation restart

app/page.jsx

@@ -8,6 +8,7 @@ const INVESTIGATION_ID = "case-1";
 
 function Portfolio() {
   const [existing, setExisting] = React.useState(null);
+  const [showRestartConfirm, setShowRestartConfirm] = React.useState(false);
 
   React.useEffect(() => {
     setExisting(loadInvestigation());
@@ -54,13 +55,51 @@ function Portfolio() {
               </Link>
 
               <button
-                onClick={() => {
-                  try { clearInvestigation(); } catch (_) { /* storage must not crash caller */ }
-                }}
+                onClick={() => setShowRestartConfirm(true)}
                 className="rounded-lg border border-red-400 bg-white px-4 py-2 font-medium text-red-700 hover:bg-red-50 transition"
               >
                 Restart investigation
               </button>
+
+              {showRestartConfirm && (
+                <div
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="restart-title"
+                  className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+                  onClick={() => setShowRestartConfirm(false)}
+                >
+                  <div
+                    className="w-[420px] rounded-xl border border-gray-200 bg-white p-6 shadow-lg"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <h2 id="restart-title" className="mb-3 text-lg font-semibold">
+                      Restart this investigation?
+                    </h2>
+                    <p className="mb-5 text-sm text-gray-600">
+                      Your current investigation, findings, clarified questions, and report will be lost. Are you sure you want to continue?
+                    </p>
+                    <div className="flex justify-end gap-3">
+                      <button
+                        onClick={() => setShowRestartConfirm(false)}
+                        className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          setShowRestartConfirm(false);
+                          try { clearInvestigation(); } catch (_) { /* storage must not crash caller */ }
+                          setExisting(null);
+                        }}
+                        className="rounded-lg border border-red-400 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50 transition"
+                      >
+                        Restart investigation
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </section>