fix(ui): use custom ConfirmDialog for deletions to prevent input blocking on Windows (#282)

src/components/layout/Sidebar.tsx

@@ -3,6 +3,7 @@
  * Navigation sidebar with menu items.
  * No longer fixed - sits inside the flex layout below the title bar.
  */
+import { useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import {
   Home,
@@ -22,6 +23,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useChatStore } from '@/stores/chat';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { useTranslation } from 'react-i18next';
 
 interface NavItemProps {
@@ -104,6 +106,7 @@ export function Sidebar() {
   };
 
   const { t } = useTranslation();
+  const [sessionToDelete, setSessionToDelete] = useState<{ key: string; label: string } | null>(null);
 
   const navItems = [
     { to: '/cron', icon: <Clock className="h-5 w-5" />, label: t('sidebar.cronTasks') },
@@ -170,12 +173,12 @@ export function Sidebar() {
                 {!s.key.endsWith(':main') && (
                   <button
                     aria-label="Delete session"
-                    onClick={async (e) => {
+                    onClick={(e) => {
                       e.stopPropagation();
-                      const label = getSessionLabel(s.key, s.displayName, s.label);
+                      setSessionToDelete({
-                      if (!window.confirm(`Delete "${label}"?`)) return;
+                        key: s.key,
-                      await deleteSession(s.key);
+                        label: getSessionLabel(s.key, s.displayName, s.label),
-                      if (currentSessionKey === s.key) navigate('/');
+                      });
                     }}
                     className={cn(
                       'absolute right-1 flex items-center justify-center rounded p-0.5 transition-opacity',
@@ -220,6 +223,22 @@ export function Sidebar() {
           )}
         </Button>
       </div>
+
+      <ConfirmDialog
+        open={!!sessionToDelete}
+        title={t('common.confirm', 'Confirm')}
+        message={sessionToDelete ? t('sidebar.deleteSessionConfirm', `Delete "${sessionToDelete.label}"?`) : ''}
+        confirmLabel={t('common.delete', 'Delete')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+        variant="destructive"
+        onConfirm={async () => {
+          if (!sessionToDelete) return;
+          await deleteSession(sessionToDelete.key);
+          if (currentSessionKey === sessionToDelete.key) navigate('/');
+          setSessionToDelete(null);
+        }}
+        onCancel={() => setSessionToDelete(null)}
+      />
     </aside>
   );
 }

src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,84 @@
+/**
+ * ConfirmDialog - In-DOM confirmation dialog (replaces window.confirm)
+ * Keeps focus within the renderer to avoid Windows focus loss after native dialogs.
+ */
+import { useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'default' | 'destructive';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'OK',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-dialog-title"
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        className={cn(
+          'mx-4 max-w-md rounded-lg border bg-card p-6 shadow-lg',
+          'focus:outline-none'
+        )}
+        tabIndex={-1}
+      >
+        <h2 id="confirm-dialog-title" className="text-lg font-semibold">
+          {title}
+        </h2>
+        <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+        <div className="mt-6 flex justify-end gap-2">
+          <Button
+            ref={cancelRef}
+            variant="outline"
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={variant === 'destructive' ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Channels/index.tsx

@@ -2,7 +2,7 @@
  * Channels Page
  * Manage messaging channel connections with configuration UI
  */
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   Plus,
   Radio,
@@ -28,6 +28,7 @@ import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { useChannelsStore } from '@/stores/channels';
 import { useGatewayStore } from '@/stores/gateway';
 import { StatusBadge, type Status } from '@/components/common/StatusBadge';
@@ -53,6 +54,7 @@ export function Channels() {
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [selectedChannelType, setSelectedChannelType] = useState<ChannelType | null>(null);
   const [configuredTypes, setConfiguredTypes] = useState<string[]>([]);
+  const [channelToDelete, setChannelToDelete] = useState<{ id: string } | null>(null);
 
   // Fetch channels on mount
   useEffect(() => {
@@ -204,11 +206,7 @@ export function Channels() {
                 <ChannelCard
                   key={channel.id}
                   channel={channel}
-                  onDelete={() => {
+                  onDelete={() => setChannelToDelete({ id: channel.id })}
-                    if (confirm(t('deleteConfirm'))) {
-                      deleteChannel(channel.id);
-                    }
-                  }}
                 />
               ))}
             </div>
@@ -281,6 +279,22 @@ export function Channels() {
           }}
         />
       )}
+
+      <ConfirmDialog
+        open={!!channelToDelete}
+        title={t('common.confirm', 'Confirm')}
+        message={t('deleteConfirm')}
+        confirmLabel={t('common.delete', 'Delete')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+        variant="destructive"
+        onConfirm={async () => {
+          if (channelToDelete) {
+            await deleteChannel(channelToDelete.id);
+            setChannelToDelete(null);
+          }
+        }}
+        onCancel={() => setChannelToDelete(null)}
+      />
     </div>
   );
 }
@@ -350,6 +364,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
   const [validating, setValidating] = useState(false);
   const [loadingConfig, setLoadingConfig] = useState(false);
   const [isExistingConfig, setIsExistingConfig] = useState(false);
+  const firstInputRef = useRef<HTMLInputElement>(null);
   const [validationResult, setValidationResult] = useState<{
     valid: boolean;
     errors: string[];
@@ -403,6 +418,13 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
     return () => { cancelled = true; };
   }, [selectedType]);
 
+  // Focus first input when form is ready (avoids Windows focus loss after native dialogs)
+  useEffect(() => {
+    if (selectedType && !loadingConfig && firstInputRef.current) {
+      firstInputRef.current.focus();
+    }
+  }, [selectedType, loadingConfig]);
+
   // Listen for WhatsApp QR events
   useEffect(() => {
     if (selectedType !== 'whatsapp') return;
@@ -753,6 +775,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
               <div className="space-y-2">
                 <Label htmlFor="name">{t('dialog.channelName')}</Label>
                 <Input
+                  ref={firstInputRef}
                   id="name"
                   placeholder={t('dialog.channelNamePlaceholder', { name: meta?.name })}
                   value={channelName}

src/pages/Chat/ChatInput.tsx

@@ -89,6 +89,13 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
     }
   }, [input]);
 
+  // Focus textarea on mount (avoids Windows focus loss after session delete + native dialog)
+  useEffect(() => {
+    if (!disabled && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, []);
+
   // ── File staging via native dialog ─────────────────────────────
 
   const pickFiles = useCallback(async () => {

src/pages/Cron/index.tsx

@@ -28,6 +28,7 @@ import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { useCronStore } from '@/stores/cron';
 import { useGatewayStore } from '@/stores/gateway';
 import { LoadingSpinner } from '@/components/common/LoadingSpinner';
@@ -318,9 +319,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
   };
 
   const handleDelete = () => {
-    if (confirm(t('card.deleteConfirm'))) {
+    onDelete();
-      onDelete();
-    }
   };
 
   return (
@@ -442,6 +441,7 @@ export function Cron() {
   const gatewayStatus = useGatewayStore((state) => state.status);
   const [showDialog, setShowDialog] = useState(false);
   const [editingJob, setEditingJob] = useState<CronJob | undefined>();
+  const [jobToDelete, setJobToDelete] = useState<{ id: string } | null>(null);
 
   const isGatewayRunning = gatewayStatus.state === 'running';
 
@@ -474,14 +474,7 @@ export function Cron() {
     }
   }, [toggleJob, t]);
 
-  const handleDelete = useCallback(async (id: string) => {
+
-    try {
-      await deleteJob(id);
-      toast.success(t('toast.deleted'));
-    } catch {
-      toast.error(t('toast.failedDelete'));
-    }
-  }, [deleteJob, t]);
 
   if (loading) {
     return (
@@ -629,7 +622,7 @@ export function Cron() {
                 setEditingJob(job);
                 setShowDialog(true);
               }}
-              onDelete={() => handleDelete(job.id)}
+              onDelete={() => setJobToDelete({ id: job.id })}
               onTrigger={() => triggerJob(job.id)}
             />
           ))}
@@ -647,6 +640,23 @@ export function Cron() {
           onSave={handleSave}
         />
       )}
+
+      <ConfirmDialog
+        open={!!jobToDelete}
+        title={t('common.confirm', 'Confirm')}
+        message={t('card.deleteConfirm')}
+        confirmLabel={t('common.delete', 'Delete')}
+        cancelLabel={t('common.cancel', 'Cancel')}
+        variant="destructive"
+        onConfirm={async () => {
+          if (jobToDelete) {
+            await deleteJob(jobToDelete.id);
+            setJobToDelete(null);
+            toast.success(t('toast.deleted'));
+          }
+        }}
+        onCancel={() => setJobToDelete(null)}
+      />
     </div>
   );
 }