feat: add delete confirmation for sessions, skills, and MCP unmount

Replace browser native window.confirm with styled inline confirmation
dialogs matching the app theme. Session delete, clear-all sessions, and
skill/MCP unmount from agents all now require explicit confirmation.

Author: JeffGuo7

src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, type KeyboardEvent, type MouseEvent } from 'react'
+import { useCallback, useEffect, useState, type KeyboardEvent, type MouseEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   MessageSquare,
@@ -71,14 +71,46 @@ export function Sidebar({
     [activeSessionId, setActiveSession, onNavigate],
   )
 
+  const [confirmDeleteSessionId, setConfirmDeleteSessionId] = useState<string | null>(null)
+  const [confirmClearAll, setConfirmClearAll] = useState(false)
+
   const handleDelete = useCallback(
+    (e: MouseEvent, id: string) => {
+      e.stopPropagation()
+      setConfirmDeleteSessionId(id)
+    },
+    [],
+  )
+
+  const handleConfirmDelete = useCallback(
     (e: MouseEvent, id: string) => {
       e.stopPropagation()
       deleteSession(id)
+      setConfirmDeleteSessionId(null)
     },
     [deleteSession],
   )
 
+  const handleCancelDelete = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation()
+      setConfirmDeleteSessionId(null)
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!confirmDeleteSessionId && !confirmClearAll) return
+    const onKey = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setConfirmDeleteSessionId(null)
+        setConfirmClearAll(false)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [confirmDeleteSessionId, confirmClearAll])
+
   const applyWorkspaceDir = useCallback((dir: string) => {
     setWorkspaceDir(dir)
     setShowPathInput(false)
@@ -192,17 +224,33 @@ export function Sidebar({
                 </div>
                 <div className="flex items-center gap-1.5">
                   {!isFilesMode && (
-                    <button
-                      onClick={() => {
-                        if (window.confirm(t('sidebar.clearConfirm'))) {
-                          useAppStore.getState().clearSessions()
-                        }
-                      }}
-                      className="flex h-7 w-7 items-center justify-center rounded-md text-text-quaternary transition-all duration-300 hover:bg-red-500/10 hover:text-red-500"
-                      title={t('sidebar.clearTitle')}
-                    >
-                      <Trash2 size={11} strokeWidth={2} />
-                    </button>
+                    confirmClearAll ? (
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => {
+                            useAppStore.getState().clearSessions()
+                            setConfirmClearAll(false)
+                          }}
+                          className="rounded-md bg-red-500 px-2 py-1 text-[10px] font-black text-white transition-all duration-300 hover:bg-red-600"
+                        >
+                          {t('common.confirm')}
+                        </button>
+                        <button
+                          onClick={() => setConfirmClearAll(false)}
+                          className="rounded-md bg-white/75 px-2 py-1 text-[10px] font-black text-text-tertiary transition-all duration-300 hover:text-text dark:bg-white/10"
+                        >
+                          {t('common.cancel')}
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setConfirmClearAll(true)}
+                        className="flex h-7 w-7 items-center justify-center rounded-md text-text-quaternary transition-all duration-300 hover:bg-red-500/10 hover:text-red-500"
+                        title={t('sidebar.clearTitle')}
+                      >
+                        <Trash2 size={11} strokeWidth={2} />
+                      </button>
+                    )
                   )}
                   <motion.button
                     whileHover={{ scale: 1.05, x: -2 }}
@@ -327,27 +375,41 @@ export function Sidebar({
                 )}
               </div>
 
-              <div
-                onClick={(e) => {
-                  e.stopPropagation()
-                  handleDelete(e, session.id)
-                }}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.stopPropagation()
-                    handleDelete(e as unknown as MouseEvent, session.id)
-                  }
-                }}
-                className={`cursor-pointer rounded-md p-1 transition-all duration-300 ${
-                  isActive
-                    ? 'text-accent/60 hover:text-red-500 hover:bg-red-500/10'
-                    : 'text-text-quaternary hover:text-red-500 hover:bg-red-500/10 opacity-0 group-hover:opacity-100'
-                }`}
-              >
-                <Trash2 size={12} strokeWidth={1.5} />
-              </div>
+              {confirmDeleteSessionId === session.id ? (
+                <div className="flex shrink-0 items-center gap-1">
+                  <button
+                    onClick={(e) => handleConfirmDelete(e, session.id)}
+                    className="rounded-md bg-red-500 px-2 py-1 text-[10px] font-black text-white transition-all duration-300 hover:bg-red-600"
+                  >
+                    {t('common.confirm')}
+                  </button>
+                  <button
+                    onClick={handleCancelDelete}
+                    className="rounded-md bg-white/75 px-2 py-1 text-[10px] font-black text-text-tertiary transition-all duration-300 hover:text-text dark:bg-white/10"
+                  >
+                    {t('common.cancel')}
+                  </button>
+                </div>
+              ) : (
+                <div
+                  onClick={(e) => handleDelete(e, session.id)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.stopPropagation()
+                      handleDelete(e as unknown as MouseEvent, session.id)
+                    }
+                  }}
+                  className={`cursor-pointer rounded-md p-1 transition-all duration-300 ${
+                    isActive
+                      ? 'text-accent/60 hover:text-red-500 hover:bg-red-500/10'
+                      : 'text-text-quaternary hover:text-red-500 hover:bg-red-500/10 opacity-0 group-hover:opacity-100'
+                  }`}
+                >
+                  <Trash2 size={12} strokeWidth={1.5} />
+                </div>
+              )}
 
               {isActive && (
                 <div className="absolute left-0 top-2 bottom-2 z-20 w-1 rounded-r-full bg-accent shadow-[2px_0_8px_rgba(var(--color-accent-rgb),0.3)]" />

src/components/workspace/WorkspacePanel.tsx

@@ -20,6 +20,8 @@ export function WorkspacePanel() {
   const [showCreateAdvanced, setShowCreateAdvanced] = useState(false)
   const [showDetailAdvanced, setShowDetailAdvanced] = useState(false)
   const [confirmDeleteAgentId, setConfirmDeleteAgentId] = useState<string | null>(null)
+  const [confirmRemoveSkillName, setConfirmRemoveSkillName] = useState<string | null>(null)
+  const [confirmRemoveMcpServer, setConfirmRemoveMcpServer] = useState<string | null>(null)
   const [busyInstallKey, setBusyInstallKey] = useState<string | null>(null)
   const [remoteSkillsLoading, setRemoteSkillsLoading] = useState(false)
   const [remoteSkillsError, setRemoteSkillsError] = useState<string | null>(null)
@@ -533,8 +535,7 @@ export function WorkspacePanel() {
                         key: name,
                         label: `${skillMeta[name]?.emoji || '✦'} ${name}`,
                         onRemove: () => {
-                          removeSkillFromAgent(activeAgent.id, name)
-                          setFeedback(t('agentStudio.feedback.skillRemoved', { name }))
+                          setConfirmRemoveSkillName(name)
                         },
                       })) : undefined}
                     />
@@ -546,8 +547,7 @@ export function WorkspacePanel() {
                         key: name,
                         label: name,
                         onRemove: () => {
-                          removeMCPServerFromAgent(activeAgent.id, name)
-                          setFeedback(t('agentStudio.feedback.mcpRemoved', { name }))
+                          setConfirmRemoveMcpServer(name)
                         },
                       })) : undefined}
                     />
@@ -705,6 +705,34 @@ export function WorkspacePanel() {
           onSubmit={handleCreateAgent}
         />
       )}
+
+      {(confirmRemoveSkillName || confirmRemoveMcpServer) && (
+        <ConfirmRemoveModal
+          title={confirmRemoveSkillName
+            ? t('agentStudio.confirm.removeSkillTitle', { name: confirmRemoveSkillName })
+            : t('agentStudio.confirm.removeMcpTitle', { name: confirmRemoveMcpServer })
+          }
+          message={confirmRemoveSkillName
+            ? t('agentStudio.confirm.removeSkillMessage')
+            : t('agentStudio.confirm.removeMcpMessage')
+          }
+          onConfirm={() => {
+            if (confirmRemoveSkillName && activeAgent) {
+              removeSkillFromAgent(activeAgent.id, confirmRemoveSkillName)
+              setFeedback(t('agentStudio.feedback.skillRemoved', { name: confirmRemoveSkillName }))
+              setConfirmRemoveSkillName(null)
+            } else if (confirmRemoveMcpServer && activeAgent) {
+              removeMCPServerFromAgent(activeAgent.id, confirmRemoveMcpServer)
+              setFeedback(t('agentStudio.feedback.mcpRemoved', { name: confirmRemoveMcpServer }))
+              setConfirmRemoveMcpServer(null)
+            }
+          }}
+          onCancel={() => {
+            setConfirmRemoveSkillName(null)
+            setConfirmRemoveMcpServer(null)
+          }}
+        />
+      )}
     </aside>
   )
 }
@@ -820,6 +848,53 @@ function TagPanel({
   )
 }
 
+function ConfirmRemoveModal({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+}: {
+  title: string
+  message: string
+  onConfirm: () => void
+  onCancel: () => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
+      onClick={onCancel}
+    >
+      <div
+        className="mx-4 w-full max-w-xs rounded-2xl border border-border-light/70 bg-white/95 p-6 shadow-2xl backdrop-blur-xl dark:bg-gray-900/95"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <p className="text-[13px] font-bold tracking-tight text-text">
+          {title}
+        </p>
+        <p className="mt-2 text-[11px] leading-relaxed text-text-tertiary">
+          {message}
+        </p>
+        <div className="mt-5 flex items-center gap-3">
+          <button
+            onClick={onConfirm}
+            className="flex-1 rounded-full bg-red-500 px-4 py-2 text-[11px] font-black text-white transition-all duration-300 hover:bg-red-600"
+          >
+            {t('common.confirm')}
+          </button>
+          <button
+            onClick={onCancel}
+            className="flex-1 rounded-full bg-white/75 px-4 py-2 text-[11px] font-black text-text-tertiary transition-all duration-300 hover:text-text dark:bg-white/10"
+          >
+            {t('common.cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function PickerModal({
   title,
   emptyText,

src/i18n/locales/en.ts

@@ -511,6 +511,12 @@ const en = {
       instructionsPlaceholder: 'Add extra instructions or style rules for this agent',
       modelPlaceholder: 'Optional model override, for example deepseek-chat',
     },
+    confirm: {
+      removeSkillTitle: 'Remove skill "{{name}}"?',
+      removeSkillMessage: 'This skill will be unmounted from the current agent.',
+      removeMcpTitle: 'Remove MCP server "{{name}}"?',
+      removeMcpMessage: 'This MCP server will be unmounted from the current agent.',
+    },
     feedback: {
       skillInstalled: 'Installed skill: {{name}}',
       skillRemoved: 'Removed skill: {{name}}',

src/i18n/locales/zh.ts

@@ -511,6 +511,12 @@ const zh = {
       instructionsPlaceholder: '补充这套智能体的额外指令或风格要求',
       modelPlaceholder: '可选覆盖模型，例如 deepseek-chat',
     },
+    confirm: {
+      removeSkillTitle: '移除 Skill "{{name}}"?',
+      removeSkillMessage: '该 Skill 将从当前智能体卸载。',
+      removeMcpTitle: '移除 MCP 服务 "{{name}}"?',
+      removeMcpMessage: '该 MCP 服务将从当前智能体卸载。',
+    },
     feedback: {
       skillInstalled: '已安装 Skill：{{name}}',
       skillRemoved: '已移除 Skill：{{name}}',