@libredb/studio 0.9.7

package/src/components/DataProfiler.tsx

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

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