@libredb/studio 0.9.7 → 0.9.13

package/src/components/AIAutopilotPanel.tsx

@@ -1,238 +0,0 @@
-"use client";
-
-import React, { useState, useRef } from 'react';
-import { Loader2, Sparkles, RefreshCw, Play, Copy, Check } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { DatabaseConnection } from '@/lib/types';
-
-interface AIAutopilotPanelProps {
-  connection: DatabaseConnection | null;
-  schemaContext: string;
-  onExecuteQuery?: (query: string) => void;
-}
-
-export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }: AIAutopilotPanelProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [report, setReport] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
-  const reportRef = useRef<HTMLDivElement>(null);
-
-  const runAutopilot = async () => {
-    if (!connection) return;
-    setIsLoading(true);
-    setError(null);
-    setReport('');
-
-    try {
-      // Fetch monitoring data in parallel
-      const [monitoringRes] = await Promise.all([
-        fetch('/api/db/monitoring', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            connection,
-            options: {
-              includeTables: true,
-              includeIndexes: true,
-              slowQueryLimit: 20,
-            },
-          }),
-        }),
-      ]);
-
-      let monitoringData = null;
-      if (monitoringRes.ok) {
-        monitoringData = await monitoringRes.json();
-      }
-
-      // Build filtered schema
-      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, 6).map(c => `${c.name} (${c.type})`).join(', ') || '';
-            return `${t.name} (${t.rowCount || 0} rows): ${cols}`;
-          }).join('\n');
-        } catch {
-          filteredSchema = schemaContext.substring(0, 2000);
-        }
-      }
-
-      // Call autopilot AI
-      const response = await fetch('/api/ai/autopilot', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          slowQueries: monitoringData?.slowQueries,
-          indexStats: monitoringData?.indexes,
-          tableStats: monitoringData?.tables,
-          performanceMetrics: monitoringData?.performance,
-          overview: monitoringData?.overview,
-          schemaContext: filteredSchema,
-          databaseType: connection.type,
-        }),
-      });
-
-      if (!response.ok) {
-        const errData = await response.json();
-        throw new Error(errData.error || 'Autopilot 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);
-        setReport(fullResponse);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const copyToClipboard = (text: string, index: number) => {
-    navigator.clipboard.writeText(text);
-    setCopiedIndex(index);
-    setTimeout(() => setCopiedIndex(null), 2000);
-  };
-
-  // Simple markdown rendering (headers, bold, lists)
-  const renderMarkdown = (text: string) => {
-    const lines = text.split('\n');
-    const elements: React.ReactNode[] = [];
-    let inCodeBlock = false;
-    let codeContent = '';
-    let codeBlockIdx = 0;
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-
-      if (line.startsWith('```')) {
-        if (inCodeBlock) {
-          // End of code block
-          const blockIndex = codeBlockIdx++;
-          const sql = codeContent.trim();
-          elements.push(
-            <div key={`code-${i}`} className="relative group my-2">
-              <pre className="bg-[#050505] rounded-lg p-3 text-[11px] font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
-                {sql}
-              </pre>
-              <div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button
-                  onClick={() => copyToClipboard(sql, blockIndex)}
-                  className="p-1 rounded bg-white/10 hover:bg-white/20 text-zinc-400"
-                  title="Copy"
-                >
-                  {copiedIndex === blockIndex ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
-                </button>
-                {onExecuteQuery && (
-                  <button
-                    onClick={() => onExecuteQuery(sql)}
-                    className="p-1 rounded bg-blue-600/20 hover:bg-blue-600/30 text-blue-400"
-                    title="Execute"
-                  >
-                    <Play className="w-3 h-3 fill-current" />
-                  </button>
-                )}
-              </div>
-            </div>
-          );
-          codeContent = '';
-          inCodeBlock = false;
-        } else {
-          inCodeBlock = true;
-        }
-        continue;
-      }
-
-      if (inCodeBlock) {
-        codeContent += line + '\n';
-        continue;
-      }
-
-      // Headers
-      if (line.startsWith('## ')) {
-        elements.push(<h2 key={i} className="text-sm font-bold text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>);
-      } else if (line.startsWith('### ')) {
-        elements.push(<h3 key={i} className="text-xs font-bold text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>);
-      } else if (line.startsWith('- ')) {
-        const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        elements.push(<li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />);
-      } else if (line.match(/^\d+\.\s/)) {
-        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        elements.push(<li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed list-decimal" dangerouslySetInnerHTML={{ __html: content }} />);
-      } else if (line.trim()) {
-        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        elements.push(<p key={i} className="text-xs text-zinc-400 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />);
-      } else {
-        elements.push(<div key={i} className="h-2" />);
-      }
-    }
-
-    return elements;
-  };
-
-  return (
-    <div className="h-full flex flex-col bg-[#080808]">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
-        <div className="flex items-center gap-2">
-          <div className="p-1 rounded bg-cyan-500/10">
-            <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
-          </div>
-          <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest">
-            AI Performance Autopilot
-          </span>
-        </div>
-        <button
-          onClick={runAutopilot}
-          disabled={isLoading || !connection}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-bold transition-colors",
-            isLoading
-              ? "bg-cyan-600/20 text-cyan-400 cursor-wait"
-              : "bg-cyan-600 hover:bg-cyan-500 text-white"
-          )}
-        >
-          {isLoading ? (
-            <><Loader2 className="w-3 h-3 animate-spin" /> Analyzing...</>
-          ) : (
-            <><RefreshCw className="w-3 h-3" /> {report ? 'Re-analyze' : 'Run Analysis'}</>
-          )}
-        </button>
-      </div>
-
-      {/* Content */}
-      <div ref={reportRef} className="flex-1 overflow-auto p-4">
-        {!report && !isLoading && !error && (
-          <div className="flex flex-col items-center justify-center h-full opacity-40">
-            <Sparkles className="w-8 h-8 mb-3" />
-            <p className="text-sm font-medium">AI Performance Autopilot</p>
-            <p className="text-[10px] text-zinc-500 mt-1">
-              Click &quot;Run Analysis&quot; to get AI-powered optimization recommendations
-            </p>
-          </div>
-        )}
-
-        {error && (
-          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400">
-            {error}
-          </div>
-        )}
-
-        {report && (
-          <div className="prose prose-invert prose-xs max-w-none">
-            {renderMarkdown(report)}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/CodeGenerator.tsx

@@ -1,271 +0,0 @@
-"use client";
-
-import React, { useState, useMemo } from 'react';
-import { Code, X, Copy, Check, ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { TableSchema } from '@/lib/types';
-
-interface CodeGeneratorProps {
-  isOpen: boolean;
-  onClose: () => void;
-  tableName: string;
-  tableSchema: TableSchema | null;
-  databaseType?: string;
-}
-
-type Language = 'typescript' | 'zod' | 'prisma' | 'go' | 'python' | 'java';
-
-const LANGUAGES: { id: Language; label: string; ext: string }[] = [
-  { id: 'typescript', label: 'TypeScript Interface', ext: 'ts' },
-  { id: 'zod', label: 'Zod Schema', ext: 'ts' },
-  { id: 'prisma', label: 'Prisma Model', ext: 'prisma' },
-  { id: 'go', label: 'Go Struct', ext: 'go' },
-  { id: 'python', label: 'Python Dataclass', ext: 'py' },
-  { id: 'java', label: 'Java POJO', ext: 'java' },
-];
-
-export function toPascalCase(str: string): string {
-  return str
-    .replace(/[_-](\w)/g, (_, c) => c.toUpperCase())
-    .replace(/^\w/, c => c.toUpperCase())
-    .replace(/s$/, ''); // Remove trailing 's' (pluralized table name)
-}
-
-export function toCamelCase(str: string): string {
-  const pascal = toPascalCase(str);
-  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
-}
-
-export function toSnakeCase(str: string): string {
-  return str.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
-}
-
-export function mapSqlTypeToTS(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('int') || t.includes('float') || t.includes('double') || t.includes('decimal') || t.includes('numeric') || t.includes('real') || t.includes('serial')) return 'number';
-  if (t.includes('bool')) return 'boolean';
-  if (t.includes('date') || t.includes('time')) return 'Date';
-  if (t.includes('json')) return 'Record<string, unknown>';
-  if (t.includes('uuid')) return 'string';
-  if (t.includes('array')) return 'unknown[]';
-  return 'string';
-}
-
-export function mapSqlTypeToZod(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('int') || t.includes('float') || t.includes('double') || t.includes('decimal') || t.includes('numeric') || t.includes('real') || t.includes('serial')) return 'z.number()';
-  if (t.includes('bool')) return 'z.boolean()';
-  if (t.includes('date') || t.includes('time')) return 'z.date()';
-  if (t.includes('json')) return 'z.record(z.unknown())';
-  if (t.includes('uuid')) return 'z.string().uuid()';
-  return 'z.string()';
-}
-
-export function mapSqlTypeToPrisma(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('serial') || t === 'integer' || t === 'int' || t === 'int4') return 'Int';
-  if (t.includes('bigint') || t.includes('int8')) return 'BigInt';
-  if (t.includes('float') || t.includes('double') || t.includes('decimal') || t.includes('numeric') || t.includes('real')) return 'Float';
-  if (t.includes('bool')) return 'Boolean';
-  if (t.includes('timestamp') || t.includes('datetime')) return 'DateTime';
-  if (t.includes('date')) return 'DateTime';
-  if (t.includes('json')) return 'Json';
-  return 'String';
-}
-
-export function mapSqlTypeToGo(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('serial') || t === 'integer' || t === 'int' || t === 'int4') return 'int';
-  if (t.includes('bigint') || t.includes('int8')) return 'int64';
-  if (t.includes('float') || t.includes('real')) return 'float32';
-  if (t.includes('double') || t.includes('decimal') || t.includes('numeric')) return 'float64';
-  if (t.includes('bool')) return 'bool';
-  if (t.includes('date') || t.includes('time')) return 'time.Time';
-  return 'string';
-}
-
-export function mapSqlTypeToPython(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('int') || t.includes('serial')) return 'int';
-  if (t.includes('float') || t.includes('double') || t.includes('decimal') || t.includes('numeric') || t.includes('real')) return 'float';
-  if (t.includes('bool')) return 'bool';
-  if (t.includes('date') || t.includes('time')) return 'datetime';
-  if (t.includes('json')) return 'dict';
-  return 'str';
-}
-
-export function mapSqlTypeToJava(sqlType: string): string {
-  const t = sqlType.toLowerCase();
-  if (t.includes('serial') || t === 'integer' || t === 'int' || t === 'int4') return 'Integer';
-  if (t.includes('bigint') || t.includes('int8')) return 'Long';
-  if (t.includes('float') || t.includes('real')) return 'Float';
-  if (t.includes('double') || t.includes('decimal') || t.includes('numeric')) return 'Double';
-  if (t.includes('bool')) return 'Boolean';
-  if (t.includes('date') || t.includes('time')) return 'LocalDateTime';
-  return 'String';
-}
-
-export function generateCode(lang: Language, table: TableSchema): string {
-  const name = toPascalCase(table.name);
-  const columns = table.columns || [];
-
-  switch (lang) {
-    case 'typescript': {
-      const fields = columns.map(c => {
-        const tsType = mapSqlTypeToTS(c.type);
-        const nullable = c.nullable ? ' | null' : '';
-        return `  ${toCamelCase(c.name)}: ${tsType}${nullable};`;
-      });
-      return `export interface ${name} {\n${fields.join('\n')}\n}`;
-    }
-    case 'zod': {
-      const fields = columns.map(c => {
-        let zodType = mapSqlTypeToZod(c.type);
-        if (c.nullable) zodType += '.nullable()';
-        return `  ${toCamelCase(c.name)}: ${zodType},`;
-      });
-      return `import { z } from 'zod';\n\nexport const ${name}Schema = z.object({\n${fields.join('\n')}\n});\n\nexport type ${name} = z.infer<typeof ${name}Schema>;`;
-    }
-    case 'prisma': {
-      const fields = columns.map(c => {
-        const prismaType = mapSqlTypeToPrisma(c.type);
-        const nullable = c.nullable ? '?' : '';
-        const pk = c.isPrimary ? ' @id' : '';
-        const auto = c.type.toLowerCase().includes('serial') ? ' @default(autoincrement())' : '';
-        return `  ${c.name}  ${prismaType}${nullable}${pk}${auto}`;
-      });
-      return `model ${name} {\n${fields.join('\n')}\n\n  @@map("${table.name}")\n}`;
-    }
-    case 'go': {
-      const fields = columns.map(c => {
-        const goType = mapSqlTypeToGo(c.type);
-        const nullable = c.nullable ? '*' : '';
-        const fieldName = toPascalCase(c.name);
-        return `\t${fieldName} ${nullable}${goType} \`json:"${c.name}" db:"${c.name}"\``;
-      });
-      const needsTime = columns.some(c => c.type.toLowerCase().includes('date') || c.type.toLowerCase().includes('time'));
-      const imports = needsTime ? '\nimport "time"\n' : '';
-      return `package models${imports}\n\ntype ${name} struct {\n${fields.join('\n')}\n}`;
-    }
-    case 'python': {
-      const fields = columns.map(c => {
-        const pyType = mapSqlTypeToPython(c.type);
-        const optional = c.nullable ? `Optional[${pyType}]` : pyType;
-        return `    ${toSnakeCase(c.name)}: ${optional}`;
-      });
-      const needsOptional = columns.some(c => c.nullable);
-      const needsDatetime = columns.some(c => c.type.toLowerCase().includes('date') || c.type.toLowerCase().includes('time'));
-      const imports: string[] = ['from dataclasses import dataclass'];
-      if (needsOptional) imports.push('from typing import Optional');
-      if (needsDatetime) imports.push('from datetime import datetime');
-      return `${imports.join('\n')}\n\n\n@dataclass\nclass ${name}:\n${fields.join('\n')}`;
-    }
-    case 'java': {
-      const fields = columns.map(c => {
-        const javaType = mapSqlTypeToJava(c.type);
-        return `    private ${javaType} ${toCamelCase(c.name)};`;
-      });
-      const needsLocalDateTime = columns.some(c => c.type.toLowerCase().includes('date') || c.type.toLowerCase().includes('time'));
-      const imports = needsLocalDateTime ? 'import java.time.LocalDateTime;\n\n' : '';
-      return `${imports}public class ${name} {\n${fields.join('\n')}\n}`;
-    }
-  }
-}
-
-export function CodeGenerator({
-  isOpen,
-  onClose,
-  tableName,
-  tableSchema,
-  databaseType,
-}: CodeGeneratorProps) {
-  const [language, setLanguage] = useState<Language>('typescript');
-  const [copied, setCopied] = useState(false);
-  const [showLangDropdown, setShowLangDropdown] = useState(false);
-
-  const code = useMemo(() => {
-    if (!tableSchema) return '// No schema available';
-    return generateCode(language, tableSchema);
-  }, [language, tableSchema]);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  if (!isOpen) return null;
-
-  const currentLang = LANGUAGES.find(l => l.id === language)!;
-
-  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-xl 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">
-            <Code className="w-4 h-4 text-purple-400" />
-            <span className="text-sm font-bold text-zinc-200">Code Generator</span>
-            <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
-            {databaseType && (
-              <span className="text-[10px] text-zinc-600 font-mono uppercase">{databaseType}</span>
-            )}
-          </div>
-          <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-5 py-2 border-b border-white/5 bg-[#0a0a0a]">
-          <div className="relative">
-            <button
-              onClick={() => setShowLangDropdown(!showLangDropdown)}
-              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-zinc-300 hover:bg-white/10 transition-colors"
-            >
-              {currentLang.label}
-              <ChevronDown className="w-3 h-3 text-zinc-500" />
-            </button>
-            {showLangDropdown && (
-              <div className="absolute top-full left-0 mt-1 bg-[#111] border border-white/10 rounded-lg shadow-xl z-10 py-1 w-48">
-                {LANGUAGES.map(lang => (
-                  <button
-                    key={lang.id}
-                    onClick={() => { setLanguage(lang.id); setShowLangDropdown(false); }}
-                    className={cn(
-                      "w-full text-left px-3 py-1.5 text-xs hover:bg-white/5 transition-colors",
-                      language === lang.id ? "text-purple-400" : "text-zinc-400"
-                    )}
-                  >
-                    {lang.label}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Code Preview */}
-        <div className="relative">
-          <pre className="p-5 text-[11px] font-mono text-zinc-300 overflow-auto max-h-[50vh] bg-[#050505] leading-relaxed whitespace-pre">
-            {code}
-          </pre>
-          <button
-            onClick={handleCopy}
-            className="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-xs text-zinc-400 transition-colors"
-          >
-            {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
-            {copied ? 'Copied!' : 'Copy'}
-          </button>
-        </div>
-
-        {/* Footer */}
-        <div className="px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
-          <p className="text-[10px] text-zinc-600">
-            Generated from <span className="text-zinc-500">{tableName}</span> • {tableSchema?.columns?.length || 0} columns • {currentLang.ext} format
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}