@libredb/studio 0.9.7

package/src/components/QueryHistory.tsx

@@ -0,0 +1,344 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { storage } from '@/lib/storage';
+import { QueryHistoryItem } from '@/lib/types';
+import { 
+  CheckCircle2, AlertCircle, 
+  RotateCcw, Trash2, Search, Download,
+  ArrowUpDown, Hash,
+  Database, History as HistoryIcon, X
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { cn } from '@/lib/utils';
+import { format } from 'date-fns';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface QueryHistoryProps {
+  onSelectQuery: (query: string) => void;
+  activeConnectionId?: string;
+  refreshTrigger?: number;
+}
+
+type SortField = 'executedAt' | 'executionTime' | 'rowCount';
+type SortOrder = 'asc' | 'desc';
+
+export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger }: QueryHistoryProps) {
+  const [history, setHistory] = useState<QueryHistoryItem[]>([]);
+  const [search, setSearch] = useState('');
+  const [filterStatus, setFilterStatus] = useState<'all' | 'success' | 'error'>('all');
+  const [isGlobal, setIsGlobal] = useState(false);
+  const [sortField, setSortField] = useState<SortField>('executedAt');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+
+  // Refresh history when refreshTrigger changes (replaces key-based re-mount)
+  useEffect(() => {
+    setHistory(storage.getHistory());
+  }, [refreshTrigger]);
+
+  const filteredHistory = useMemo(() => {
+    return history.filter(item => {
+      const matchesSearch = item.query.toLowerCase().includes(search.toLowerCase()) || 
+                           item.connectionName?.toLowerCase().includes(search.toLowerCase()) ||
+                           item.tabName?.toLowerCase().includes(search.toLowerCase());
+      const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
+      const matchesConnection = isGlobal || !activeConnectionId || item.connectionId === activeConnectionId;
+      return matchesSearch && matchesStatus && matchesConnection;
+    }).sort((a, b) => {
+      let valA: number = 0;
+      let valB: number = 0;
+      
+      if (sortField === 'executedAt') {
+        valA = a.executedAt ? new Date(a.executedAt).getTime() : 0;
+        valB = b.executedAt ? new Date(b.executedAt).getTime() : 0;
+      } else {
+        valA = (a[sortField] as number) || 0;
+        valB = (b[sortField] as number) || 0;
+      }
+
+      if (sortOrder === 'asc') return valA > valB ? 1 : -1;
+      return valA < valB ? 1 : -1;
+    });
+  }, [history, search, filterStatus, isGlobal, activeConnectionId, sortField, sortOrder]);
+
+  const handleClearHistory = () => {
+    if (confirm('Are you sure you want to clear all history?')) {
+      storage.clearHistory();
+      setHistory([]);
+    }
+  };
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('desc');
+    }
+  };
+
+  const exportHistory = (format: 'csv' | 'json') => {
+    let content = '';
+    let mimeType = '';
+    const fileName = `query_history_${new Date().getTime()}.${format}`;
+
+    if (format === 'csv') {
+      const headers = ['Executed At', 'Status', 'Connection', 'Tab', 'Execution Time (ms)', 'Rows', 'Query', 'Error'];
+      const rows = filteredHistory.map(item => [
+        item.executedAt,
+        item.status,
+        item.connectionName || item.connectionId,
+        item.tabName || '',
+        item.executionTime,
+        item.rowCount || 0,
+        `"${item.query.replace(/"/g, '""')}"`,
+        `"${(item.errorMessage || '').replace(/"/g, '""')}"`
+      ].join(','));
+      content = [headers.join(','), ...rows].join('\n');
+      mimeType = 'text/csv';
+    } else {
+      content = JSON.stringify(filteredHistory, null, 2);
+      mimeType = 'application/json';
+    }
+
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      <div className="p-4 border-b border-white/5 bg-[#0a0a0a]/50 backdrop-blur-sm sticky top-0 z-10 space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
+              <HistoryIcon className="w-4 h-4 text-emerald-400" />
+            </div>
+            <div>
+              <h3 className="text-sm font-bold text-zinc-100 uppercase tracking-widest flex items-center gap-2">
+                Query History
+              </h3>
+              <p className="text-[10px] text-zinc-500 font-medium">
+                Showing {filteredHistory.length} executions
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 text-[10px] font-bold uppercase tracking-widest text-zinc-400 hover:text-white gap-2">
+                  <Download className="w-3.5 h-3.5" /> Export
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10 text-zinc-300">
+                <DropdownMenuItem onClick={() => exportHistory('csv')} className="text-xs cursor-pointer">
+                  Export as CSV
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => exportHistory('json')} className="text-xs cursor-pointer">
+                  Export as JSON
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={handleClearHistory} 
+              className="h-8 text-[10px] font-bold uppercase tracking-widest text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
+            >
+              <Trash2 className="w-3.5 h-3.5 mr-2" /> Clear
+            </Button>
+          </div>
+        </div>
+        
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="relative flex-1 min-w-[240px]">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
+            <Input 
+              placeholder="Search by query, connection or tab..." 
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9 h-9 bg-white/5 border-white/10 text-xs focus:ring-emerald-500/20 rounded-lg"
+            />
+            {search && (
+              <button 
+                onClick={() => setSearch('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-white"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
+          
+          <div className="flex items-center gap-2 bg-white/5 rounded-lg p-1 border border-white/10">
+            <button
+              onClick={() => setIsGlobal(false)}
+              className={cn(
+                "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                !isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
+              )}
+            >
+              Active Conn
+            </button>
+            <button
+              onClick={() => setIsGlobal(true)}
+              className={cn(
+                "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
+              )}
+            >
+              All Connections
+            </button>
+          </div>
+
+          <div className="flex bg-white/5 rounded-lg p-1 border border-white/10">
+            {(['all', 'success', 'error'] as const).map((status) => (
+              <button
+                key={status}
+                onClick={() => setFilterStatus(status)}
+                className={cn(
+                  "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                  filterStatus === status ? "bg-white/10 text-white" : "text-zinc-500 hover:text-zinc-300"
+                )}
+              >
+                {status}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto custom-scrollbar">
+        {filteredHistory.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
+            <HistoryIcon className="w-16 h-16 mb-4 text-zinc-600" />
+            <p className="text-sm font-medium">No history items found</p>
+            <p className="text-xs text-zinc-500 mt-1 uppercase tracking-widest">Run some queries to see them here</p>
+          </div>
+        ) : (
+          <div className="min-w-[800px]">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-white/[0.02] border-b border-white/5 text-[10px] font-bold uppercase tracking-wider text-zinc-500">
+                  <th className="px-4 py-3 w-10 text-center">Status</th>
+                  <th className="px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group" onClick={() => handleSort('executedAt')}>
+                    <div className="flex items-center gap-2">
+                      Executed At
+                      <ArrowUpDown className={cn("w-3 h-3 transition-opacity", sortField === 'executedAt' ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100")} />
+                    </div>
+                  </th>
+                  <th className="px-4 py-3">Source</th>
+                  <th className="px-4 py-3">SQL Query</th>
+                  <th className="px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group" onClick={() => handleSort('executionTime')}>
+                    <div className="flex items-center gap-2">
+                      Duration
+                      <ArrowUpDown className={cn("w-3 h-3 transition-opacity", sortField === 'executionTime' ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100")} />
+                    </div>
+                  </th>
+                  <th className="px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group" onClick={() => handleSort('rowCount')}>
+                    <div className="flex items-center gap-2">
+                      Rows
+                      <ArrowUpDown className={cn("w-3 h-3 transition-opacity", sortField === 'rowCount' ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100")} />
+                    </div>
+                  </th>
+                  <th className="px-4 py-3 w-20"></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-white/5">
+                {filteredHistory.map((item) => (
+                  <tr 
+                    key={item.id}
+                    className="hover:bg-white/[0.03] transition-colors group text-xs border-b border-white/5"
+                  >
+                    <td className="px-4 py-4 text-center">
+                      <div className="flex justify-center">
+                        {item.status === 'success' ? (
+                          <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+                            <CheckCircle2 className="w-3 h-3 text-emerald-500" />
+                          </div>
+                        ) : (
+                          <div className="w-5 h-5 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20">
+                            <AlertCircle className="w-3 h-3 text-red-500" />
+                          </div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-4 whitespace-nowrap">
+                      <div className="flex flex-col">
+                        <span className="text-zinc-200 font-medium">
+                          {item.executedAt ? format(new Date(item.executedAt), 'MMM d, HH:mm:ss') : '-'}
+                        </span>
+                        <span className="text-[10px] text-zinc-500 font-mono mt-0.5">
+                          {item.executedAt ? format(new Date(item.executedAt), 'yyyy') : ''}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4 whitespace-nowrap">
+                      <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-1.5 text-zinc-300">
+                          <Database className="w-3 h-3 text-blue-400" />
+                          <span className="font-semibold">{item.connectionName || 'Unknown'}</span>
+                        </div>
+                        <div className="flex items-center gap-1.5 text-zinc-500 text-[10px]">
+                          <Hash className="w-2.5 h-2.5" />
+                          <span>{item.tabName || 'Default Tab'}</span>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4 max-w-md">
+                      <div className="bg-[#050505] border border-white/5 rounded-md p-2 relative group-hover:border-white/10 transition-colors">
+                        <pre className="text-[11px] font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed">
+                          {item.query}
+                        </pre>
+                        {item.errorMessage && (
+                          <div className="mt-2 pt-2 border-t border-red-500/10 text-[10px] text-red-400/80 font-mono italic">
+                            {item.errorMessage}
+                          </div>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-4 whitespace-nowrap">
+                      <span className={cn(
+                        "px-2 py-0.5 rounded text-[10px] font-mono font-bold",
+                        item.executionTime > 500 ? "text-amber-400 bg-amber-400/10" : "text-zinc-400 bg-white/5"
+                      )}>
+                        {item.executionTime}ms
+                      </span>
+                    </td>
+                    <td className="px-4 py-4 whitespace-nowrap">
+                      <span className="text-zinc-400 font-mono text-xs">
+                        {item.rowCount != null ? item.rowCount.toLocaleString() : '-'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-4 text-right">
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        className="h-8 w-8 p-0 hover:bg-emerald-500/10 hover:text-emerald-400"
+                        onClick={() => onSelectQuery(item.query)}
+                        title="Restore Query"
+                      >
+                        <RotateCcw className="w-3.5 h-3.5" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/QuerySafetyDialog.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { ShieldAlert, ShieldCheck, AlertTriangle, Loader2, Play, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface SafetyAnalysis {
+  riskLevel: 'safe' | 'low' | 'medium' | 'high' | 'critical';
+  summary: string;
+  warnings: {
+    type: string;
+    severity: string;
+    message: string;
+    detail: string;
+  }[];
+  affectedRows: string;
+  cascadeEffects: string;
+  recommendation: string;
+}
+
+interface QuerySafetyDialogProps {
+  isOpen: boolean;
+  query: string;
+  schemaContext: string;
+  databaseType?: string;
+  onClose: () => void;
+  onProceed: () => void;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/query-safety fetch. */
+  onAnalyzeSafety?: (params: { query: string; schemaContext: string }) => Promise<SafetyAnalysis>;
+}
+
+function parseSafetyResponse(text: string): SafetyAnalysis | null {
+  try {
+    const match = text.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+    if (match) {
+      return JSON.parse(match[1].trim());
+    }
+    // Try parsing the entire text as JSON
+    return JSON.parse(text.trim());
+  } catch {
+    return null;
+  }
+}
+
+const RISK_CONFIG = {
+  safe: { color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', icon: ShieldCheck, label: 'Safe' },
+  low: { color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/20', icon: ShieldCheck, label: 'Low Risk' },
+  medium: { color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20', icon: AlertTriangle, label: 'Medium Risk' },
+  high: { color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/20', icon: ShieldAlert, label: 'High Risk' },
+  critical: { color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/20', icon: ShieldAlert, label: 'Critical Risk' },
+};
+
+export function QuerySafetyDialog({
+  isOpen,
+  query,
+  schemaContext,
+  databaseType,
+  onClose,
+  onProceed,
+  onAnalyzeSafety,
+}: QuerySafetyDialogProps) {
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [analysis, setAnalysis] = useState<SafetyAnalysis | null>(null);
+  const [rawResponse, setRawResponse] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen && query) {
+      analyzeQuery();
+    }
+    return () => {
+      setAnalysis(null);
+      setRawResponse('');
+      setError(null);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, query]);
+
+  const analyzeQuery = async () => {
+    setIsAnalyzing(true);
+    setError(null);
+
+    try {
+      let filteredSchema = '';
+      if (schemaContext) {
+        try {
+          const tables = JSON.parse(schemaContext);
+          filteredSchema = tables.slice(0, 30).map((t: { name: string; rowCount?: number; columns?: { name: string; type: string }[] }) => {
+            const cols = t.columns?.slice(0, 8).map(c => `${c.name} (${c.type})`).join(', ') || '';
+            return `${t.name} (${t.rowCount || 0} rows): ${cols}`;
+          }).join('\n');
+        } catch {
+          filteredSchema = schemaContext.substring(0, 2000);
+        }
+      }
+
+      if (onAnalyzeSafety) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onAnalyzeSafety({ query, schemaContext: filteredSchema });
+        setAnalysis(result);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/query-safety', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query, schemaContext: filteredSchema, databaseType }),
+        });
+
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || 'Analysis failed');
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No reader');
+
+        let fullResponse = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          fullResponse += new TextDecoder().decode(value);
+          setRawResponse(fullResponse);
+        }
+
+        const parsed = parseSafetyResponse(fullResponse);
+        if (parsed) {
+          setAnalysis(parsed);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const risk = analysis ? RISK_CONFIG[analysis.riskLevel] || RISK_CONFIG.medium : null;
+  const RiskIcon = risk?.icon || ShieldAlert;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="bg-[#111] border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
+          <div className="flex items-center gap-2">
+            <ShieldAlert className="w-4 h-4 text-amber-400" />
+            <span className="text-sm font-bold text-zinc-200">Query Safety Check</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Query Preview */}
+        <div className="px-5 py-3 bg-[#0a0a0a] border-b border-white/5">
+          <pre className="text-[11px] font-mono text-zinc-400 whitespace-pre-wrap max-h-24 overflow-auto">
+            {query.length > 300 ? query.substring(0, 300) + '...' : query}
+          </pre>
+        </div>
+
+        {/* Analysis */}
+        <div className="px-5 py-4 max-h-80 overflow-auto">
+          {isAnalyzing && (
+            <div className="flex items-center justify-center gap-2 py-8 text-zinc-500">
+              <Loader2 className="w-5 h-5 animate-spin" />
+              <span className="text-sm">Analyzing query safety...</span>
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400">
+              {error}
+            </div>
+          )}
+
+          {analysis && risk && (
+            <div className="space-y-3">
+              {/* Risk Badge */}
+              <div className={cn("flex items-center gap-2 px-3 py-2 rounded-lg", risk.bg, "border", risk.border)}>
+                <RiskIcon className={cn("w-5 h-5", risk.color)} />
+                <div>
+                  <span className={cn("text-sm font-bold", risk.color)}>{risk.label}</span>
+                  <p className="text-xs text-zinc-400 mt-0.5">{analysis.summary}</p>
+                </div>
+              </div>
+
+              {/* Warnings */}
+              {analysis.warnings?.length > 0 && (
+                <div className="space-y-2">
+                  {analysis.warnings.map((w, i) => (
+                    <div key={i} className={cn(
+                      "px-3 py-2 rounded-lg border text-xs",
+                      w.severity === 'critical' ? 'bg-red-500/5 border-red-500/20' :
+                      w.severity === 'warning' ? 'bg-amber-500/5 border-amber-500/20' :
+                      'bg-blue-500/5 border-blue-500/20'
+                    )}>
+                      <p className="font-bold text-zinc-300">{w.message}</p>
+                      <p className="text-zinc-500 mt-0.5">{w.detail}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Affected Rows */}
+              {analysis.affectedRows && analysis.affectedRows !== 'none' && (
+                <div className="text-xs">
+                  <span className="text-zinc-500">Affected rows: </span>
+                  <span className="text-zinc-300 font-mono">{analysis.affectedRows}</span>
+                </div>
+              )}
+
+              {/* Cascade */}
+              {analysis.cascadeEffects && analysis.cascadeEffects !== 'none' && (
+                <div className="text-xs">
+                  <span className="text-zinc-500">Cascade effects: </span>
+                  <span className="text-zinc-300">{analysis.cascadeEffects}</span>
+                </div>
+              )}
+
+              {/* Recommendation */}
+              {analysis.recommendation && (
+                <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
+                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">Recommendation</p>
+                  <p className="text-xs text-zinc-300">{analysis.recommendation}</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Show raw response if parsing failed */}
+          {!isAnalyzing && !analysis && rawResponse && !error && (
+            <div className="text-xs text-zinc-400 whitespace-pre-wrap">{rawResponse}</div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onProceed}
+            disabled={isAnalyzing}
+            className={cn(
+              "px-4 py-2 rounded-lg text-white text-xs font-bold transition-colors flex items-center gap-1.5",
+              analysis?.riskLevel === 'critical' || analysis?.riskLevel === 'high'
+                ? "bg-red-600 hover:bg-red-500"
+                : "bg-blue-600 hover:bg-blue-500",
+              isAnalyzing && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <Play className="w-3 h-3 fill-current" />
+            {analysis?.riskLevel === 'critical' ? 'Execute Anyway' :
+             analysis?.riskLevel === 'high' ? 'Proceed with Caution' :
+             'Execute Query'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Detect if a query is potentially dangerous and should trigger safety analysis.
+ */
+export function isDangerousQuery(query: string): boolean {
+  const normalized = query.trim().toUpperCase();
+
+  // Dangerous patterns
+  const patterns = [
+    /^\s*DELETE\b/i,
+    /^\s*DROP\b/i,
+    /^\s*TRUNCATE\b/i,
+    /^\s*ALTER\b/i,
+    /\bUPDATE\b[\s\S]*?\bSET\b/i,
+    /^\s*GRANT\b/i,
+    /^\s*REVOKE\b/i,
+  ];
+
+  // Check for UPDATE/DELETE without WHERE (most dangerous)
+  if (/^\s*DELETE\b/i.test(normalized) && !/\bWHERE\b/.test(normalized)) return true;
+  if (/\bUPDATE\b[\s\S]*?\bSET\b/i.test(normalized) && !/\bWHERE\b/.test(normalized)) return true;
+
+  return patterns.some(p => p.test(query));
+}