Add modal confirm dialog for delete

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

src/app/ai/page.tsx

@@ -26,6 +26,7 @@ export default function AIChatPage() {
   const [loading, setLoading] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [error, setError] = useState<string>("");
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
 
   useEffect(() => {
     console.log("AI page: childId from useFamily:", childId);
@@ -153,6 +154,7 @@ export default function AIChatPage() {
     try {
       await fetch(`/api/chat?id=${id}`, { method: "DELETE" });
       setSessions(sessions.filter(s => s.id !== id));
+      setDeleteConfirm(null);
     } catch (err) {
       console.error("Failed to delete:", err);
     }
@@ -184,11 +186,22 @@ export default function AIChatPage() {
                   <div className="text-xs text-gray-400">{new Date(session.updatedAt).toLocaleDateString()}</div>
                 </div>
                 <button
-                  onClick={(e) => { e.stopPropagation(); if (confirm("Delete this conversation?")) deleteSession(session.id); }}
+                  onClick={(e) => { e.stopPropagation(); setDeleteConfirm(session.id); }}
                   className="text-red-400 text-xs p-1"
                 >
                   🗑️
                 </button>
+                {deleteConfirm === session.id && (
+                  <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                    <div className="bg-white p-4 rounded-lg">
+                      <p className="mb-4">Delete this conversation?</p>
+                      <div className="flex gap-2">
+                        <button onClick={() => deleteSession(session.id)} className="bg-red-500 text-white px-3 py-1 rounded">Delete</button>
+                        <button onClick={() => setDeleteConfirm(null)} className="bg-gray-200 px-3 py-1 rounded">Cancel</button>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             ))}
           </div>