@libredb/studio 0.9.7 → 0.9.13

package/src/components/QueryHistory.tsx

@@ -1,344 +0,0 @@
-"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

@@ -1,290 +0,0 @@
-"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));
-}