feat(studio): replace native window.confirm with styled useConfirm dialog

studio/src/components/artifact/ArtifactTopicDetail.tsx

@@ -4,9 +4,11 @@ import { useArtifactStore } from "@/stores/artifactStore";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { OpenAgentsContext } from "@/context/OpenAgentsProvider";
+import { useConfirm } from "@/context/ConfirmContext";
 
 const ArtifactTopicDetail: React.FC = () => {
   const { t } = useTranslation('artifact');
+  const { confirm } = useConfirm();
   const context = useContext(OpenAgentsContext);
   const { artifactId } = useParams<{ artifactId: string }>();
   const navigate = useNavigate();
@@ -107,14 +109,22 @@ const ArtifactTopicDetail: React.FC = () => {
   const handleDelete = async () => {
     if (!selectedArtifact) return;
 
-    if (window.confirm(t('detail.deleteConfirm', { name: selectedArtifact.name }))) {
-      const success = await deleteArtifact(selectedArtifact.artifact_id);
-      if (success) {
-        toast.success(t('detail.deleteSuccess'));
-        navigate("/artifact");
-      } else {
-        toast.error(t('detail.deleteFailed'));
+    const confirmed = await confirm(
+      t('detail.delete'),
+      t('detail.deleteConfirm', { name: selectedArtifact.name }),
+      {
+        confirmText: t('detail.delete'),
+        type: "danger",
       }
+    );
+    if (!confirmed) return;
+
+    const success = await deleteArtifact(selectedArtifact.artifact_id);
+    if (success) {
+      toast.success(t('detail.deleteSuccess'));
+      navigate("/artifact");
+    } else {
+      toast.error(t('detail.deleteFailed'));
     }
   };
 

studio/src/pages/profile/EventLogs.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react"
 import { useTranslation } from "react-i18next"
+import { useConfirm } from "@/context/ConfirmContext"
 import { ColumnDef } from "@tanstack/react-table"
 import {
   eventLogService,
@@ -27,6 +28,7 @@ type TabType = "events" | "http"
 
 const EventLogs: React.FC = () => {
   const { t } = useTranslation("admin")
+  const { confirm } = useConfirm()
   const [logs, setLogs] = useState<LogEntry[]>([])
   const [activeTab, setActiveTab] = useState<TabType>("events")
   const [refreshing, setRefreshing] = useState(false)
@@ -73,11 +75,18 @@ const EventLogs: React.FC = () => {
   }, [loadLogs])
 
   // Clear logs
-  const handleClearLogs = () => {
-    if (window.confirm(t("eventLogs.clearConfirm"))) {
-      eventLogService.clearLogs()
-      setSelectedLog(null)
-    }
+  const handleClearLogs = async () => {
+    const confirmed = await confirm(
+      t("eventLogs.clearLogs"),
+      t("eventLogs.clearConfirm"),
+      {
+        confirmText: t("eventLogs.clearLogs"),
+        type: "warning",
+      }
+    )
+    if (!confirmed) return
+    eventLogService.clearLogs()
+    setSelectedLog(null)
   }
 
   // Format time