@libredb/studio 0.9.7 → 0.9.12

package/src/components/DataProfiler.tsx

@@ -1,335 +0,0 @@
-"use client";
-
-import { useState, useEffect, useMemo } from 'react';
-import { Loader2, BarChart3, X, Hash, AlertCircle, Sparkles, Lock } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { TableSchema, DatabaseConnection } from '@/lib/types';
-import { detectSensitiveColumns, maskValue } from '@/lib/data-masking';
-
-interface ColumnProfile {
-  name: string;
-  type?: string;
-  totalRows: number;
-  nullCount: number;
-  nullPercent: number;
-  distinctCount: number;
-  minValue?: string;
-  maxValue?: string;
-  sampleValues?: string[];
-  error?: string;
-}
-
-interface ProfileData {
-  tableName: string;
-  totalRows: number;
-  columns: ColumnProfile[];
-}
-
-interface DataProfilerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  tableName: string;
-  tableSchema: TableSchema | null;
-  connection: DatabaseConnection | null;
-  schemaContext?: string;
-  databaseType?: string;
-  /** Optional API adapter: when provided, bypasses the built-in /api/db/profile fetch. */
-  onProfile?: (params: { connectionId: string; tableName: string }) => Promise<ProfileData>;
-  /** Optional API adapter: when provided, bypasses the built-in /api/ai/describe-schema fetch. */
-  onDescribeSchema?: (params: { tableName: string; schemaContext: string }) => Promise<string>;
-}
-
-export function DataProfiler({
-  isOpen,
-  onClose,
-  tableName,
-  tableSchema,
-  connection,
-  schemaContext,
-  databaseType,
-  onProfile,
-  onDescribeSchema,
-}: DataProfilerProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [profile, setProfile] = useState<ProfileData | null>(null);
-  const [aiSummary, setAiSummary] = useState('');
-  const [isAiLoading, setIsAiLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Detect sensitive columns for masking sample values in profiler
-  const sensitiveColumnNames = useMemo(() => {
-    if (!tableSchema?.columns) return new Map();
-    return detectSensitiveColumns(tableSchema.columns.map(c => c.name));
-  }, [tableSchema]);
-
-  useEffect(() => {
-    if (isOpen && tableName && connection) {
-      fetchProfile();
-    }
-    return () => {
-      setProfile(null);
-      setAiSummary('');
-      setError(null);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, tableName]);
-
-  const fetchProfile = async () => {
-    if (!connection || !tableSchema) return;
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      let data: ProfileData;
-
-      if (onProfile) {
-        // Platform adapter: use callback instead of fetch
-        data = await onProfile({ connectionId: connection.id, tableName });
-      } else {
-        // Default: existing fetch behavior
-        const columns = tableSchema.columns?.map(c => c.name) || [];
-        const response = await fetch('/api/db/profile', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ connection, tableName, columns }),
-        });
-
-        if (!response.ok) {
-          const err = await response.json();
-          throw new Error(err.error || 'Profile failed');
-        }
-
-        data = await response.json();
-      }
-
-      setProfile(data);
-
-      // Trigger AI summary
-      fetchAiSummary(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const fetchAiSummary = async (data: ProfileData) => {
-    setIsAiLoading(true);
-    try {
-      const profileSummary = data.columns.map(c =>
-        `${c.name}: ${c.nullPercent}% null, ${c.distinctCount} distinct, min=${c.minValue || 'N/A'}, max=${c.maxValue || 'N/A'}`
-      ).join('\n');
-
-      const fullSchemaContext = `Table: ${tableName} (${data.totalRows} rows)\n\nColumn Profiles:\n${profileSummary}\n\nSchema:\n${schemaContext || ''}`;
-
-      if (onDescribeSchema) {
-        // Platform adapter: use callback instead of fetch
-        const result = await onDescribeSchema({ tableName, schemaContext: fullSchemaContext });
-        setAiSummary(result);
-      } else {
-        // Default: existing fetch behavior
-        const response = await fetch('/api/ai/describe-schema', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            schemaContext: fullSchemaContext,
-            databaseType,
-            mode: 'table',
-          }),
-        });
-
-        if (!response.ok) return;
-
-        const reader = response.body?.getReader();
-        if (!reader) return;
-
-        let full = '';
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          full += new TextDecoder().decode(value);
-          setAiSummary(full);
-        }
-      }
-    } catch {
-      // AI summary is optional, don't show error
-    } finally {
-      setIsAiLoading(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  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-2xl mx-4 max-h-[85vh] flex flex-col 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">
-            <BarChart3 className="w-4 h-4 text-cyan-400" />
-            <span className="text-sm font-bold text-zinc-200">Data Profiler</span>
-            <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
-          </div>
-          <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-auto p-5 space-y-4">
-          {isLoading && (
-            <div className="flex items-center justify-center gap-2 py-12 text-zinc-500">
-              <Loader2 className="w-5 h-5 animate-spin" />
-              <span className="text-sm">Profiling {tableName}...</span>
-            </div>
-          )}
-
-          {error && (
-            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400 flex items-center gap-2">
-              <AlertCircle className="w-4 h-4 shrink-0" />
-              {error}
-            </div>
-          )}
-
-          {profile && (
-            <>
-              {/* Summary Stats */}
-              <div className="grid grid-cols-3 gap-3">
-                <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Total Rows</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">{profile.totalRows.toLocaleString()}</p>
-                </div>
-                <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Columns</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">{profile.columns.length}</p>
-                </div>
-                <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Avg Null %</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">
-                    {profile.columns.length > 0
-                      ? Math.round(profile.columns.reduce((sum, c) => sum + c.nullPercent, 0) / profile.columns.length)
-                      : 0}%
-                  </p>
-                </div>
-              </div>
-
-              {/* Column Profiles */}
-              <div className="space-y-2">
-                <h3 className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Column Profiles</h3>
-                {profile.columns.map((col) => (
-                  <div key={col.name} className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="flex items-center gap-2">
-                        <Hash className="w-3 h-3 text-blue-400" />
-                        <span className="text-xs font-bold text-zinc-200">{col.name}</span>
-                        {col.type && (
-                          <span className="text-[10px] text-zinc-500 font-mono">{col.type}</span>
-                        )}
-                        {sensitiveColumnNames.has(col.name) && (
-                          <span title="Sensitive column - values masked"><Lock className="w-3 h-3 text-purple-400" /></span>
-                        )}
-                      </div>
-                      <span className="text-[10px] text-zinc-500">
-                        {col.distinctCount.toLocaleString()} distinct
-                      </span>
-                    </div>
-
-                    {col.error ? (
-                      <p className="text-[10px] text-amber-400">{col.error}</p>
-                    ) : (
-                      <>
-                        {/* Null bar */}
-                        <div className="flex items-center gap-2 mb-1.5">
-                          <div className="flex-1 h-1.5 bg-zinc-800 rounded-full overflow-hidden">
-                            <div
-                              className={cn(
-                                "h-full rounded-full transition-all",
-                                col.nullPercent > 50 ? "bg-red-500" :
-                                col.nullPercent > 20 ? "bg-amber-500" :
-                                "bg-emerald-500"
-                              )}
-                              style={{ width: `${100 - col.nullPercent}%` }}
-                            />
-                          </div>
-                          <span className={cn(
-                            "text-[10px] font-mono w-10 text-right",
-                            col.nullPercent > 50 ? "text-red-400" :
-                            col.nullPercent > 20 ? "text-amber-400" :
-                            "text-emerald-400"
-                          )}>
-                            {col.nullPercent}% null
-                          </span>
-                        </div>
-
-                        {/* Min/Max */}
-                        <div className="flex gap-4 text-[10px]">
-                          {col.minValue && (() => {
-                            const rule = sensitiveColumnNames.get(col.name);
-                            const display = rule
-                              ? maskValue(col.minValue, rule)
-                              : col.minValue.substring(0, 30);
-                            return (
-                              <span className="text-zinc-500">
-                                min: <span className={cn("font-mono", rule ? "text-zinc-500 italic" : "text-zinc-400")}>{display}</span>
-                              </span>
-                            );
-                          })()}
-                          {col.maxValue && (() => {
-                            const rule = sensitiveColumnNames.get(col.name);
-                            const display = rule
-                              ? maskValue(col.maxValue, rule)
-                              : col.maxValue.substring(0, 30);
-                            return (
-                              <span className="text-zinc-500">
-                                max: <span className={cn("font-mono", rule ? "text-zinc-500 italic" : "text-zinc-400")}>{display}</span>
-                              </span>
-                            );
-                          })()}
-                        </div>
-
-                        {/* Sample Values */}
-                        {col.sampleValues && col.sampleValues.length > 0 && (
-                          <div className="flex flex-wrap gap-1 mt-1.5">
-                            {col.sampleValues.map((val, i) => {
-                              const rule = sensitiveColumnNames.get(col.name);
-                              const display = rule
-                                ? maskValue(val, rule)
-                                : val.substring(0, 20);
-                              return (
-                                <span key={i} className={cn("text-[10px] px-1.5 py-0.5 bg-zinc-800 rounded font-mono", rule ? "text-zinc-500 italic" : "text-zinc-400")}>
-                                  {display}
-                                </span>
-                              );
-                            })}
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </div>
-                ))}
-              </div>
-
-              {/* AI Summary */}
-              {(aiSummary || isAiLoading) && (
-                <div className="bg-cyan-500/5 border border-cyan-500/10 rounded-lg p-4">
-                  <div className="flex items-center gap-2 mb-2">
-                    <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
-                    <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-wider">
-                      AI Analysis
-                    </span>
-                    {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />}
-                  </div>
-                  {aiSummary && (
-                    <div className="text-xs text-zinc-400 leading-relaxed whitespace-pre-wrap">
-                      {aiSummary}
-                    </div>
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/DatabaseDocs.tsx

@@ -1,251 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-import { FileText, Loader2, Search, Sparkles, Download } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { TableSchema } from '@/lib/types';
-
-interface DatabaseDocsProps {
-  schema: TableSchema[];
-  schemaContext: string;
-  databaseType?: string;
-}
-
-export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDocsProps) {
-  const [search, setSearch] = useState('');
-  const [aiDocs, setAiDocs] = useState('');
-  const [isAiLoading, setIsAiLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const filteredSchema = schema.filter(t =>
-    t.name.toLowerCase().includes(search.toLowerCase()) ||
-    t.columns?.some(c => c.name.toLowerCase().includes(search.toLowerCase()))
-  );
-
-  const generateAiDocs = async () => {
-    setIsAiLoading(true);
-    setError(null);
-    setAiDocs('');
-
-    try {
-      let filteredSchemaStr = '';
-      if (schemaContext) {
-        try {
-          const tables = JSON.parse(schemaContext);
-          filteredSchemaStr = tables.slice(0, 50).map((t: { name: string; rowCount?: number; columns?: { name: string; type: string; isPrimary?: boolean; isNullable?: boolean }[] }) => {
-            const cols = t.columns?.map(c =>
-              `${c.name} (${c.type}${c.isPrimary ? ', PK' : ''}${c.isNullable === false ? ', NOT NULL' : ''})`
-            ).join(', ') || '';
-            return `Table: ${t.name} (${t.rowCount || 0} rows)\nColumns: ${cols}`;
-          }).join('\n\n');
-        } catch {
-          filteredSchemaStr = schemaContext.substring(0, 5000);
-        }
-      }
-
-      const response = await fetch('/api/ai/describe-schema', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          schemaContext: filteredSchemaStr,
-          databaseType,
-          mode: 'full',
-        }),
-      });
-
-      if (!response.ok) {
-        const err = await response.json();
-        throw new Error(err.error || 'Documentation generation failed');
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No reader');
-
-      let full = '';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        full += new TextDecoder().decode(value);
-        setAiDocs(full);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
-    } finally {
-      setIsAiLoading(false);
-    }
-  };
-
-  const exportMarkdown = () => {
-    let md = `# Database Documentation\n\n`;
-    md += `**Type:** ${databaseType || 'Unknown'}\n`;
-    md += `**Tables:** ${schema.length}\n\n`;
-
-    if (aiDocs) {
-      md += `## AI Analysis\n\n${aiDocs}\n\n---\n\n`;
-    }
-
-    md += `## Table Reference\n\n`;
-
-    for (const table of schema) {
-      md += `### ${table.name}\n\n`;
-      if (table.rowCount !== undefined) md += `Rows: ${table.rowCount.toLocaleString()}\n\n`;
-
-      if (table.columns && table.columns.length > 0) {
-        md += `| Column | Type | Primary | Nullable |\n|--------|------|---------|----------|\n`;
-        for (const col of table.columns) {
-          md += `| ${col.name} | ${col.type} | ${col.isPrimary ? 'Yes' : ''} | ${col.nullable !== false ? 'Yes' : 'No'} |\n`;
-        }
-        md += '\n';
-      }
-    }
-
-    const blob = new Blob([md], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'database-docs.md';
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  // Simple markdown rendering for AI docs
-  const renderMarkdown = (text: string) => {
-    return text.split('\n').map((line, i) => {
-      if (line.startsWith('## ')) return <h2 key={i} className="text-sm font-bold text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>;
-      if (line.startsWith('### ')) return <h3 key={i} className="text-xs font-bold text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>;
-      if (line.startsWith('- ')) {
-        const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        return <li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />;
-      }
-      if (line.match(/^\d+\.\s/)) {
-        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        return <li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed list-decimal" dangerouslySetInnerHTML={{ __html: content }} />;
-      }
-      if (line.trim()) {
-        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
-        return <p key={i} className="text-xs text-zinc-400 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />;
-      }
-      return <div key={i} className="h-1.5" />;
-    });
-  };
-
-  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-teal-500/10">
-            <FileText className="w-3.5 h-3.5 text-teal-400" />
-          </div>
-          <span className="text-[10px] font-bold text-teal-400 uppercase tracking-widest">
-            Database Docs
-          </span>
-          <span className="text-[9px] text-zinc-500 font-mono">{schema.length} tables</span>
-        </div>
-        <div className="flex items-center gap-1.5">
-          <button
-            onClick={generateAiDocs}
-            disabled={isAiLoading}
-            className={cn(
-              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-bold transition-colors",
-              isAiLoading
-                ? "bg-teal-600/20 text-teal-400 cursor-wait"
-                : "bg-teal-600 hover:bg-teal-500 text-white"
-            )}
-          >
-            {isAiLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
-            {aiDocs ? 'Regenerate' : 'AI Describe'}
-          </button>
-          <button
-            onClick={exportMarkdown}
-            className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
-          >
-            <Download className="w-3 h-3" /> Export MD
-          </button>
-        </div>
-      </div>
-
-      {/* Search */}
-      <div className="px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
-        <div className="relative">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" />
-          <input
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            placeholder="Search tables or columns..."
-            className="w-full bg-[#111] border border-white/10 rounded-lg pl-7 pr-3 py-1.5 text-xs text-zinc-200 placeholder:text-zinc-600 outline-none focus:border-teal-500/30"
-          />
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-auto p-4 space-y-3">
-        {error && (
-          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400">
-            {error}
-          </div>
-        )}
-
-        {/* AI Documentation Section */}
-        {(aiDocs || isAiLoading) && (
-          <div className="bg-teal-500/5 border border-teal-500/10 rounded-lg p-4 mb-4">
-            <div className="flex items-center gap-2 mb-3">
-              <Sparkles className="w-3.5 h-3.5 text-teal-400" />
-              <span className="text-[10px] font-bold text-teal-400 uppercase tracking-wider">
-                AI-Generated Documentation
-              </span>
-              {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-teal-400" />}
-            </div>
-            {aiDocs && (
-              <div className="prose prose-invert prose-xs max-w-none">
-                {renderMarkdown(aiDocs)}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Table Reference */}
-        <h3 className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Table Reference</h3>
-        {filteredSchema.map(table => (
-          <div key={table.name} className="bg-[#0a0a0a] border border-white/5 rounded-lg overflow-hidden">
-            <div className="px-3 py-2 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-bold text-zinc-200">{table.name}</span>
-                {table.rowCount !== undefined && (
-                  <span className="text-[10px] text-zinc-500 font-mono">{table.rowCount.toLocaleString()} rows</span>
-                )}
-              </div>
-              <span className="text-[10px] text-zinc-600">{table.columns?.length || 0} columns</span>
-            </div>
-            {table.columns && table.columns.length > 0 && (
-              <div className="border-t border-white/5">
-                <table className="w-full text-[11px]">
-                  <thead>
-                    <tr className="text-zinc-500">
-                      <th className="text-left px-3 py-1 font-normal">Column</th>
-                      <th className="text-left px-3 py-1 font-normal">Type</th>
-                      <th className="text-left px-3 py-1 font-normal">PK</th>
-                      <th className="text-left px-3 py-1 font-normal">Nullable</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {table.columns.map(col => (
-                      <tr key={col.name} className="border-t border-white/[0.03] hover:bg-white/[0.02]">
-                        <td className="px-3 py-1 text-zinc-300 font-mono">{col.name}</td>
-                        <td className="px-3 py-1 text-zinc-500 font-mono">{col.type}</td>
-                        <td className="px-3 py-1">
-                          {col.isPrimary && <span className="text-amber-400 text-[9px] font-bold">PK</span>}
-                        </td>
-                        <td className="px-3 py-1 text-zinc-600">{col.nullable !== false ? 'Yes' : 'No'}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}