@gravito/zenith 1.1.2 → 1.1.6

package/src/client/components/ConfirmDialog.tsx

@@ -1,126 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion'
-import { createPortal } from 'react-dom'
-import { cn } from '../utils'
-
-/**
- * Props for the ConfirmDialog component.
- *
- * @public
- * @since 3.0.0
- */
-export interface ConfirmDialogProps {
-  /** Whether the dialog is visible. */
-  open: boolean
-  /** Dialog title text. */
-  title: string
-  /** Detailed confirmation message. */
-  message: string
-  /** Text for the confirmation button. @default 'Confirm' */
-  confirmText?: string
-  /** Text for the cancel button. @default 'Cancel' */
-  cancelText?: string
-  /** Callback triggered when user confirms the action. */
-  onConfirm: () => void
-  /** Callback triggered when user cancels the action. */
-  onCancel: () => void
-  /** Visual style of the confirmation button. @default 'danger' */
-  variant?: 'danger' | 'warning' | 'info'
-  /** Whether an action is currently in progress (shows a spinner). @default false */
-  isProcessing?: boolean
-}
-
-/**
- * A modal dialog used for user confirmation before performing sensitive actions.
- *
- * It provides a consistent UI for confirmations across the Zenith dashboard
- * and supports different visual variants.
- *
- * @public
- * @since 3.0.0
- */
-export function ConfirmDialog({
-  open,
-  title,
-  message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  onConfirm,
-  onCancel,
-  variant = 'danger',
-  isProcessing = false,
-}: ConfirmDialogProps) {
-  return createPortal(
-    <AnimatePresence>
-      {open && (
-        // biome-ignore lint/a11y/noStaticElementInteractions: Backdrop needs click handler to stop propagation
-        <div
-          role="presentation"
-          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[5000] pointer-events-auto"
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-        >
-          <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-            className="bg-card border rounded-2xl p-6 max-w-md shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h3 className="text-xl font-black mb-2">{title}</h3>
-            <p className="text-sm text-muted-foreground mb-6 whitespace-pre-line">{message}</p>
-            <div className="flex gap-3 justify-end">
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onCancel()
-                }}
-                disabled={isProcessing}
-                className="px-4 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {cancelText}
-              </button>
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onConfirm()
-                }}
-                disabled={isProcessing}
-                className={cn(
-                  'px-4 py-2 rounded-lg text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2',
-                  variant === 'danger' && 'bg-red-500 hover:bg-red-600',
-                  variant === 'warning' && 'bg-amber-500 hover:bg-amber-600',
-                  variant === 'info' && 'bg-blue-500 hover:bg-blue-600'
-                )}
-              >
-                {isProcessing && (
-                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" aria-label="Loading">
-                    <title>Loading</title>
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                      fill="none"
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    />
-                  </svg>
-                )}
-                {isProcessing ? 'Processing...' : confirmText}
-              </button>
-            </div>
-          </motion.div>
-        </div>
-      )}
-    </AnimatePresence>,
-    document.body
-  )
-}

package/src/client/components/JobInspector.tsx

@@ -1,554 +0,0 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { motion } from 'framer-motion'
-import { AlertCircle, ArrowRight, CheckCircle2, Clock, Search } from 'lucide-react'
-import React from 'react'
-import { createPortal } from 'react-dom'
-import { cn } from '../utils'
-import { ConfirmDialog } from './ConfirmDialog'
-
-interface Job {
-  id: string
-  name?: string
-  data?: any
-  status?: string
-  timestamp?: number
-  scheduledAt?: string
-  error?: string
-  failedAt?: number
-  _raw?: string
-  _archived?: boolean
-  _status?: 'completed' | 'failed'
-  _archivedAt?: string
-}
-
-/**
- * Props for the JobInspector component.
- *
- * @public
- * @since 3.0.0
- */
-export interface JobInspectorProps {
-  /** The name of the queue to inspect. */
-  queueName: string
-  /** Callback triggered when the inspector is closed. */
-  onClose: () => void
-}
-
-/**
- * A detailed view for inspecting jobs within a specific queue.
- *
- * It provides tabs for viewing waiting, delayed, and failed jobs,
- * as well as an archive search. Users can perform bulk actions like
- * deleting or retrying jobs.
- *
- * @public
- * @since 3.0.0
- */
-export function JobInspector({ queueName, onClose }: JobInspectorProps) {
-  const [view, setView] = React.useState<'waiting' | 'delayed' | 'failed' | 'archive'>('waiting')
-  const [page, setPage] = React.useState(1)
-  const [selectedIndices, setSelectedIndices] = React.useState<Set<number>>(new Set())
-  const [totalCount, setTotalCount] = React.useState<number>(0)
-  const [isProcessing, setIsProcessing] = React.useState(false)
-  const [confirmDialog, setConfirmDialog] = React.useState<{
-    open: boolean
-    title: string
-    message: string
-    action: () => void
-    variant?: 'danger' | 'warning' | 'info'
-  } | null>(null)
-
-  const queryClient = useQueryClient()
-
-  const { isPending, error, data } = useQuery<{ jobs: Job[]; total?: number }>({
-    queryKey: ['jobs', queueName, view, page],
-    queryFn: () => {
-      const url =
-        view === 'archive'
-          ? `/api/queues/${queueName}/archive?page=${page}&limit=50`
-          : `/api/queues/${queueName}/jobs?type=${view}`
-      return fetch(url).then((res) => res.json())
-    },
-  })
-
-  // Fetch total count for non-archive views
-  React.useEffect(() => {
-    if (view !== 'archive') {
-      fetch(`/api/queues/${queueName}/jobs/count?type=${view}`)
-        .then((res) => res.json())
-        .then((data) => setTotalCount(data.count))
-        .catch(() => setTotalCount(0))
-    } else {
-      setTotalCount(data?.total || 0)
-    }
-  }, [queueName, view, data?.total])
-
-  // Reset selection when view changes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when view changes
-  React.useEffect(() => {
-    setSelectedIndices(new Set())
-    setPage(1)
-  }, [view])
-
-  const toggleSelection = (index: number) => {
-    const next = new Set(selectedIndices)
-    if (next.has(index)) {
-      next.delete(index)
-    } else {
-      next.add(index)
-    }
-    setSelectedIndices(next)
-  }
-
-  const toggleSelectAll = React.useCallback(() => {
-    if (!data?.jobs) {
-      return
-    }
-    const availableCount = data.jobs.filter((j) => j._raw && !j._archived).length
-    if (selectedIndices.size === availableCount && availableCount > 0) {
-      setSelectedIndices(new Set())
-    } else {
-      const indices = new Set<number>()
-      data.jobs.forEach((j, i) => {
-        if (j._raw && !j._archived) {
-          indices.add(i)
-        }
-      })
-      setSelectedIndices(indices)
-    }
-  }, [data?.jobs, selectedIndices])
-
-  // Keyboard shortcuts
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
-        e.preventDefault()
-        toggleSelectAll()
-      }
-      if (e.key === 'Escape') {
-        if (confirmDialog?.open) {
-          setConfirmDialog(null)
-        } else if (selectedIndices.size > 0) {
-          setSelectedIndices(new Set())
-        } else {
-          onClose()
-        }
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedIndices, confirmDialog, toggleSelectAll, onClose])
-
-  // Lock body scroll when modal opens
-  React.useEffect(() => {
-    const originalOverflow = document.body.style.overflow
-    const originalPaddingRight = document.body.style.paddingRight
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
-
-    document.body.style.overflow = 'hidden'
-    document.body.style.paddingRight = `${scrollbarWidth}px`
-
-    return () => {
-      document.body.style.overflow = originalOverflow
-      document.body.style.paddingRight = originalPaddingRight
-    }
-  }, [])
-
-  const handleAction = async (action: 'delete' | 'retry', job: Job) => {
-    if (!job._raw) {
-      return
-    }
-    const endpoint = action === 'delete' ? 'delete' : 'retry'
-    const body: any = { raw: job._raw }
-    if (action === 'delete') {
-      body.type = view
-    }
-
-    await fetch(`/api/queues/${queueName}/jobs/${endpoint}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    })
-
-    queryClient.invalidateQueries({ queryKey: ['jobs', queueName] })
-    queryClient.invalidateQueries({ queryKey: ['queues'] })
-  }
-
-  const handleBulkAction = async (action: 'delete' | 'retry') => {
-    if (selectedIndices.size === 0 || !data?.jobs) {
-      return
-    }
-
-    const count = selectedIndices.size
-    setConfirmDialog({
-      open: true,
-      title: `${action === 'delete' ? 'Delete' : 'Retry'} ${count} Jobs?`,
-      message: `Are you sure you want to ${action} ${count} selected ${view} jobs in "${queueName}"?\n\nThis action cannot be undone.`,
-      variant: action === 'delete' ? 'danger' : 'warning',
-      action: async () => {
-        setIsProcessing(true)
-        try {
-          const endpoint = action === 'delete' ? 'bulk-delete' : 'bulk-retry'
-          const raws = Array.from(selectedIndices)
-            .map((i) => data?.jobs[i]?._raw)
-            .filter(Boolean) as string[]
-
-          await fetch(`/api/queues/${queueName}/jobs/${endpoint}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ type: view, raws }),
-          })
-
-          setSelectedIndices(new Set())
-          queryClient.invalidateQueries({ queryKey: ['jobs', queueName] })
-          queryClient.invalidateQueries({ queryKey: ['queues'] })
-          setConfirmDialog(null)
-        } catch (err) {
-          console.error(`Failed to ${action} jobs:`, err)
-        } finally {
-          setIsProcessing(false)
-        }
-      },
-    })
-  }
-
-  const handleBulkActionAll = async (action: 'delete' | 'retry') => {
-    if (view === 'archive') {
-      return
-    }
-
-    setConfirmDialog({
-      open: true,
-      title: `${action === 'delete' ? 'Delete' : 'Retry'} ALL ${totalCount} Jobs?`,
-      message: `⚠️ WARNING: This will ${action} ALL ${totalCount} ${view} jobs in "${queueName}".\n\nThis is a destructive operation that cannot be undone.`,
-      variant: 'danger',
-      action: async () => {
-        setIsProcessing(true)
-        try {
-          const endpoint = action === 'delete' ? 'bulk-delete-all' : 'bulk-retry-all'
-          await fetch(`/api/queues/${queueName}/jobs/${endpoint}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ type: view }),
-          })
-
-          setSelectedIndices(new Set())
-          queryClient.invalidateQueries({ queryKey: ['jobs', queueName] })
-          queryClient.invalidateQueries({ queryKey: ['queues'] })
-          setConfirmDialog(null)
-        } catch (err) {
-          console.error(`Failed to ${action} all jobs:`, err)
-        } finally {
-          setIsProcessing(false)
-        }
-      },
-    })
-  }
-
-  return createPortal(
-    <div className="fixed inset-0 z-[1001] flex items-center justify-end p-4 sm:p-6 outline-none pointer-events-none">
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        className="absolute inset-0 bg-black/60 backdrop-blur-md cursor-default pointer-events-auto"
-        onClick={onClose}
-      />
-
-      <motion.div
-        initial={{ x: '100%', opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: '100%', opacity: 0 }}
-        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-        className="bg-card border border-border/50 h-[85vh] w-full max-w-2xl shadow-2xl flex flex-col overflow-hidden rounded-2xl relative z-[1002] pointer-events-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="p-6 border-b flex justify-between items-center bg-muted/20 flex-shrink-0">
-          <div>
-            <h2 className="text-xl font-bold flex items-center gap-2">
-              <Search className="text-primary" size={20} />
-              Queue Insight: <span className="text-primary">{queueName}</span>
-            </h2>
-            <div className="flex items-center gap-4 mt-2">
-              {(['waiting', 'delayed', 'failed', 'archive'] as const).map((v) => (
-                <button
-                  type="button"
-                  key={v}
-                  onClick={() => setView(v)}
-                  className={cn(
-                    'text-[9px] font-black px-3 py-1 rounded-sm transition-all border shrink-0 uppercase tracking-widest',
-                    view === v
-                      ? v === 'failed'
-                        ? 'bg-red-500 text-white border-red-500 shadow-lg shadow-red-500/20'
-                        : v === 'delayed'
-                          ? 'bg-amber-500 text-white border-amber-500 shadow-lg shadow-amber-500/20'
-                          : v === 'archive'
-                            ? 'bg-indigo-500 text-white border-indigo-500 shadow-lg shadow-indigo-500/20'
-                            : 'bg-primary text-primary-foreground border-primary shadow-lg shadow-primary/20'
-                      : 'bg-muted text-muted-foreground border-transparent hover:bg-muted/80'
-                  )}
-                >
-                  {v}
-                </button>
-              ))}
-            </div>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="w-10 h-10 rounded-full hover:bg-muted flex items-center justify-center transition-colors"
-          >
-            ✕
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto bg-muted/5 min-h-0">
-          {isPending && (
-            <div className="p-12 text-center text-muted-foreground font-medium animate-pulse">
-              Loading jobs...
-            </div>
-          )}
-          {error && (
-            <div className="p-12 text-center text-red-500 font-bold">Error loading jobs</div>
-          )}
-
-          {data?.jobs && data.jobs.length > 0 && (
-            <>
-              <div className="px-6 py-3 border-b bg-muted/5 flex items-center gap-3">
-                <input
-                  type="checkbox"
-                  className="w-4 h-4 rounded border-border"
-                  checked={
-                    selectedIndices.size ===
-                      data.jobs.filter((j) => j._raw && !j._archived).length &&
-                    selectedIndices.size > 0
-                  }
-                  onChange={toggleSelectAll}
-                />
-                <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
-                  Select All (Page)
-                </span>
-                {view !== 'archive' && totalCount > 0 && (
-                  <span className="text-[9px] text-muted-foreground/60 ml-2">
-                    {data.jobs.filter((j) => !j._archived).length} of {totalCount} total
-                  </span>
-                )}
-                {selectedIndices.size > 0 && (
-                  <div className="ml-auto flex items-center gap-2">
-                    <span className="text-[10px] font-black uppercase text-primary mr-2">
-                      {selectedIndices.size} items selected
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => handleBulkAction('delete')}
-                      className="px-3 py-1 bg-red-500/10 text-red-500 rounded-md text-[10px] font-black uppercase hover:bg-red-500 hover:text-white transition-all"
-                    >
-                      Delete Selected
-                    </button>
-                    {(view === 'delayed' || view === 'failed') && (
-                      <button
-                        type="button"
-                        onClick={() => handleBulkAction('retry')}
-                        className="px-3 py-1 bg-primary/10 text-primary rounded-md text-[10px] font-black uppercase hover:bg-primary hover:text-primary-foreground transition-all"
-                      >
-                        Retry Selected
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-              {view !== 'archive' && totalCount > data.jobs.filter((j) => !j._archived).length && (
-                <div className="px-6 py-3 border-b bg-amber-500/5 flex items-center justify-between">
-                  <span className="text-xs font-bold text-amber-600 flex items-center gap-2">
-                    <AlertCircle size={14} />
-                    Showing {data.jobs.filter((j) => !j._archived).length} of {totalCount} total{' '}
-                    {view} jobs
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={() => handleBulkActionAll('delete')}
-                      className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-md text-[10px] font-black uppercase hover:bg-red-500 hover:text-white transition-all"
-                    >
-                      Delete All {totalCount}
-                    </button>
-                    {(view === 'delayed' || view === 'failed') && (
-                      <button
-                        type="button"
-                        onClick={() => handleBulkActionAll('retry')}
-                        className="px-3 py-1.5 bg-amber-500/10 text-amber-600 rounded-md text-[10px] font-black uppercase hover:bg-amber-500 hover:text-white transition-all"
-                      >
-                        Retry All {totalCount}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-
-          {data?.jobs && data.jobs.length === 0 && (
-            <div className="p-12 text-center text-muted-foreground flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-muted/50 rounded-full flex items-center justify-center text-muted-foreground/30">
-                <CheckCircle2 size={32} />
-              </div>
-              <p className="text-lg font-bold">Clear Sky!</p>
-              <p className="text-sm opacity-60">No jobs found in this queue.</p>
-            </div>
-          )}
-          {data?.jobs && (
-            <div className="p-6 space-y-4">
-              {data.jobs.map((job, i) => (
-                <div
-                  key={i}
-                  className={cn(
-                    'bg-card border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all group border-border/50',
-                    selectedIndices.has(i) && 'ring-2 ring-primary border-primary'
-                  )}
-                >
-                  <div className="p-4 border-b bg-muted/10 flex justify-between items-center text-[10px]">
-                    <div className="flex items-center gap-3">
-                      {job._raw && !job._archived && (
-                        <input
-                          type="checkbox"
-                          className="w-4 h-4 rounded border-border"
-                          checked={selectedIndices.has(i)}
-                          onChange={() => toggleSelection(i)}
-                        />
-                      )}
-                      <span className="font-mono bg-primary/10 text-primary px-2 py-1 rounded-md font-bold uppercase tracking-wider flex items-center gap-2">
-                        ID: {job.id || 'N/A'}
-                        {job._archived && (
-                          <span
-                            className={cn(
-                              'px-1.5 py-0.5 rounded text-[8px] border',
-                              job._status === 'completed'
-                                ? 'bg-green-500/20 text-green-500 border-green-500/20'
-                                : 'bg-red-500/20 text-red-500 border-red-500/20'
-                            )}
-                          >
-                            Archive: {job._status}
-                          </span>
-                        )}
-                      </span>
-                    </div>
-                    <span className="text-muted-foreground font-semibold flex items-center gap-3">
-                      {view === 'delayed' && job.scheduledAt && (
-                        <span className="text-amber-500 flex items-center gap-1 font-bold">
-                          <Clock size={12} /> {new Date(job.scheduledAt).toLocaleString()}
-                        </span>
-                      )}
-                      {view === 'failed' && job.failedAt && (
-                        <span className="text-red-500 flex items-center gap-1 font-bold">
-                          <AlertCircle size={12} /> {new Date(job.failedAt).toLocaleString()}
-                        </span>
-                      )}
-                      {job._archivedAt && (
-                        <span className="text-indigo-400 flex items-center gap-1 font-bold">
-                          <ArrowRight size={12} /> {new Date(job._archivedAt).toLocaleString()}
-                        </span>
-                      )}
-                      {job.timestamp &&
-                        !job._archivedAt &&
-                        new Date(job.timestamp).toLocaleString()}
-                    </span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => job._raw && !job._archived && toggleSelection(i)}
-                    className="w-full text-left cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset"
-                  >
-                    {job.error && (
-                      <div className="p-4 bg-red-500/10 text-red-500 text-xs font-semibold border-b border-red-500/10 flex items-start gap-2">
-                        <AlertCircle size={14} className="mt-0.5 shrink-0" />
-                        <p>{job.error}</p>
-                      </div>
-                    )}
-                    <pre className="text-[11px] font-mono p-4 overflow-x-auto text-foreground/80 leading-relaxed bg-muted/5">
-                      {JSON.stringify(job, null, 2)}
-                    </pre>
-                  </button>
-                  <div className="p-3 bg-muted/5 border-t border-border/50 flex justify-end gap-2">
-                    {!job._archived && (
-                      <button
-                        type="button"
-                        onClick={() => handleAction('delete', job)}
-                        className="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors"
-                      >
-                        Terminate
-                      </button>
-                    )}
-                    {!job._archived && (view === 'delayed' || view === 'failed') && (
-                      <button
-                        type="button"
-                        onClick={() => handleAction('retry', job)}
-                        className={cn(
-                          'text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-lg text-white shadow-sm transition-all',
-                          view === 'delayed'
-                            ? 'bg-amber-500 hover:bg-amber-600'
-                            : 'bg-blue-500 hover:bg-blue-600'
-                        )}
-                      >
-                        {view === 'delayed' ? 'Process Now' : 'Retry Job'}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              ))}
-
-              {view === 'archive' && data?.total && data.total > 50 && (
-                <div className="flex items-center justify-between py-6 border-t border-border/30">
-                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">
-                    Total {data.total} archived jobs
-                  </p>
-                  <div className="flex items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={() => setPage((p) => Math.max(1, p - 1))}
-                      disabled={page === 1}
-                      className="p-2 rounded-lg bg-muted text-muted-foreground disabled:opacity-30 hover:bg-primary hover:text-white transition-all"
-                    >
-                      ←
-                    </button>
-                    <span className="text-xs font-bold px-4">{page}</span>
-                    <button
-                      type="button"
-                      onClick={() => setPage((p) => p + 1)}
-                      disabled={page * 50 >= (data.total || 0)}
-                      className="p-2 rounded-lg bg-muted text-muted-foreground disabled:opacity-30 hover:bg-primary hover:text-white transition-all"
-                    >
-                      →
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="p-4 border-t bg-card text-right flex-shrink-0">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-8 py-3 bg-muted text-foreground rounded-xl hover:bg-muted/80 text-sm font-bold transition-all active:scale-95 uppercase tracking-widest"
-          >
-            Dismiss
-          </button>
-        </div>
-      </motion.div>
-
-      {confirmDialog && (
-        <ConfirmDialog
-          open={confirmDialog.open}
-          title={confirmDialog.title}
-          message={confirmDialog.message}
-          variant={confirmDialog.variant}
-          isProcessing={isProcessing}
-          onConfirm={confirmDialog.action}
-          onCancel={() => setConfirmDialog(null)}
-        />
-      )}
-    </div>,
-    document.body
-  )
-}