@libredb/studio 0.9.7

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import Studio from '@/components/Studio';
+
+export default function Page() {
+  return <Studio />;
+}

package/src/components/AIAutopilotPanel.tsx

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

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