@libredb/studio 0.9.7 → 0.9.12

package/src/components/monitoring/tabs/TablesTab.tsx

@@ -1,300 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import {
-  Table2,
-  Search,
-  AlertTriangle,
-  Loader2,
-  RefreshCw,
-  Zap,
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import type { MonitoringData } from '@/lib/db/types';
-
-interface TablesTabProps {
-  data: MonitoringData | null;
-  loading: boolean;
-  onRunMaintenance: (type: string, target?: string) => Promise<boolean>;
-  isAdmin?: boolean;
-}
-
-export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: TablesTabProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-
-  if (loading && !data) {
-    return <TablesSkeleton />;
-  }
-
-  const tables = data?.tables ?? [];
-
-  const filteredTables = tables.filter((t) =>
-    t.tableName.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  // Calculate totals
-  const totalRows = tables.reduce((sum, t) => sum + t.rowCount, 0);
-  const totalSize = tables.reduce((sum, t) => sum + t.totalSizeBytes, 0);
-  const tablesNeedingVacuum = tables.filter((t) => (t.bloatRatio ?? 0) > 10).length;
-
-  const formatBytes = (bytes: number) => {
-    if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(2)} GB`;
-    if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(2)} MB`;
-    if (bytes >= 1024) return `${(bytes / 1024).toFixed(2)} KB`;
-    return `${bytes} B`;
-  };
-
-  const formatNumber = (n: number) => {
-    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
-    return n.toString();
-  };
-
-  const formatDate = (date?: Date) => {
-    if (!date) return 'Never';
-    return new Date(date).toLocaleDateString();
-  };
-
-  const handleMaintenance = async (type: string, tableName: string) => {
-    setActionLoading(`${type}-${tableName}`);
-    await onRunMaintenance(type, tableName);
-    setActionLoading(null);
-  };
-
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      {/* Stats Cards */}
-      <div className="grid grid-cols-3 gap-2 sm:gap-4">
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Tables
-            </CardTitle>
-            <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{tables.length}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {formatNumber(totalRows)} rows
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Size
-            </CardTitle>
-            <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{formatBytes(totalSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              Total
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Vacuum
-            </CardTitle>
-            <AlertTriangle
-              className={`h-3 w-3 sm:h-4 sm:w-4 ${tablesNeedingVacuum > 0 ? 'text-yellow-500' : 'text-green-500'}`}
-            />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{tablesNeedingVacuum}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {tablesNeedingVacuum > 0 ? 'Need' : 'OK'}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Tables List */}
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4">
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Table2 className="h-3 w-3 sm:h-4 sm:w-4" />
-              Table Statistics
-            </CardTitle>
-            <Input
-              placeholder="Search..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full sm:w-[200px] h-8 text-sm"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="p-0 sm:p-4 sm:pt-0">
-          {filteredTables.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <Table2 className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No tables found.</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="text-xs">Table</TableHead>
-                    <TableHead className="text-right text-xs">Rows</TableHead>
-                    <TableHead className="text-right text-xs">Size</TableHead>
-                    <TableHead className="text-right text-xs hidden md:table-cell">Index</TableHead>
-                    <TableHead className="text-right text-xs hidden sm:table-cell">Bloat</TableHead>
-                    <TableHead className="text-xs hidden lg:table-cell">Vacuum</TableHead>
-                    <TableHead className="text-right text-xs w-20">Act</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredTables.map((table) => (
-                    <TableRow key={`${table.schemaName}.${table.tableName}`}>
-                      <TableCell className="py-2">
-                        <div className="flex flex-col">
-                          <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">
-                            {table.tableName}
-                          </span>
-                          <span className="text-[10px] sm:text-xs text-muted-foreground">
-                            {table.schemaName}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell className="text-right font-mono text-xs py-2">
-                        {formatNumber(table.rowCount)}
-                        {table.deadRowCount ? (
-                          <span className="text-[10px] text-muted-foreground block">
-                            {formatNumber(table.deadRowCount)} dead
-                          </span>
-                        ) : null}
-                      </TableCell>
-                      <TableCell className="text-right text-xs py-2">
-                        {table.tableSize}
-                      </TableCell>
-                      <TableCell className="text-right text-xs hidden md:table-cell py-2">
-                        {table.indexSize || '-'}
-                      </TableCell>
-                      <TableCell className="text-right hidden sm:table-cell py-2">
-                        <Badge
-                          variant={
-                            (table.bloatRatio ?? 0) > 20
-                              ? 'destructive'
-                              : (table.bloatRatio ?? 0) > 10
-                                ? 'outline'
-                                : 'secondary'
-                          }
-                          className="text-[10px] sm:text-xs"
-                        >
-                          {(table.bloatRatio ?? 0).toFixed(1)}%
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-xs text-muted-foreground hidden lg:table-cell py-2">
-                        {formatDate(table.lastVacuum)}
-                      </TableCell>
-                      <TableCell className="text-right py-2">
-                        {isAdmin ? (
-                          <div className="flex justify-end gap-0.5">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-6 w-6 sm:h-8 sm:w-8"
-                              onClick={() => handleMaintenance('analyze', table.tableName)}
-                              disabled={!!actionLoading}
-                              title="Analyze"
-                            >
-                              {actionLoading === `analyze-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
-                              ) : (
-                                <Search className="h-3 w-3" />
-                              )}
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-6 w-6 sm:h-8 sm:w-8"
-                              onClick={() => handleMaintenance('vacuum', table.tableName)}
-                              disabled={!!actionLoading}
-                              title="Vacuum"
-                            >
-                              {actionLoading === `vacuum-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
-                              ) : (
-                                <RefreshCw className="h-3 w-3" />
-                              )}
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-6 w-6 sm:h-8 sm:w-8 hidden sm:inline-flex"
-                              onClick={() => handleMaintenance('reindex', table.tableName)}
-                              disabled={!!actionLoading}
-                              title="Reindex"
-                            >
-                              {actionLoading === `reindex-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
-                              ) : (
-                                <Zap className="h-3 w-3" />
-                              )}
-                            </Button>
-                          </div>
-                        ) : (
-                          <span className="text-[10px] text-muted-foreground">-</span>
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function TablesSkeleton() {
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      <div className="grid grid-cols-3 gap-2 sm:gap-4">
-        {[...Array(3)].map((_, i) => (
-          <Card key={i} className="p-0">
-            <CardHeader className="p-2 sm:p-4 pb-1 sm:pb-2">
-              <Skeleton className="h-3 sm:h-4 w-12 sm:w-20" />
-            </CardHeader>
-            <CardContent className="p-2 sm:p-4 pt-0">
-              <Skeleton className="h-5 sm:h-8 w-10 sm:w-16" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4">
-          <Skeleton className="h-4 sm:h-5 w-24 sm:w-32" />
-        </CardHeader>
-        <CardContent className="p-3 sm:p-4 pt-0">
-          <div className="space-y-2">
-            {[...Array(5)].map((_, i) => (
-              <Skeleton key={i} className="h-10 sm:h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/components/results-grid/ResultCard.tsx

@@ -1,111 +0,0 @@
-"use client";
-
-import React, { useMemo } from 'react';
-import { cn } from '@/lib/utils';
-import {
-  Hash,
-  ChevronRight,
-  Lock,
-} from 'lucide-react';
-import {
-  type MaskingPattern,
-  maskValueByPattern,
-} from '@/lib/data-masking';
-import { formatCellValue } from './utils';
-
-export interface ResultCardProps {
-  row: Record<string, unknown>;
-  fields: string[];
-  primaryColumn: string;
-  idColumn: string | null;
-  index: number;
-  onSelect: () => void;
-  maskingActive?: boolean;
-  sensitiveColumns?: Map<string, MaskingPattern>;
-}
-
-export function ResultCard({
-  row,
-  fields,
-  primaryColumn,
-  idColumn,
-  index,
-  onSelect,
-  maskingActive,
-  sensitiveColumns,
-}: ResultCardProps) {
-  const primaryValue: unknown = row[primaryColumn];
-  const idValue: unknown = idColumn ? row[idColumn] : null;
-
-  // Mask primary value if sensitive
-  const displayPrimary = useMemo(() => {
-    if (maskingActive && sensitiveColumns?.has(primaryColumn) && primaryValue != null) {
-      return maskValueByPattern(primaryValue, sensitiveColumns.get(primaryColumn)!);
-    }
-    return primaryValue != null ? String(primaryValue) : `Row ${index + 1}`;
-  }, [maskingActive, sensitiveColumns, primaryColumn, primaryValue, index]);
-
-  // Show first 4 fields (excluding primary and id)
-  const previewFields = fields
-    .filter(f => f !== primaryColumn && f !== idColumn)
-    .slice(0, 4);
-
-  return (
-    <div
-      onClick={onSelect}
-      className="bg-[#0d0d0d] border border-white/5 rounded-xl p-4 active:scale-[0.98] transition-all cursor-pointer hover:border-white/10 hover:bg-[#111]"
-    >
-      {/* Header: Primary value + ID */}
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2 flex-1 min-w-0">
-          <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center shrink-0">
-            <Hash className="w-4 h-4 text-blue-400" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className={cn(
-              "text-sm font-semibold truncate",
-              maskingActive && sensitiveColumns?.has(primaryColumn) ? "text-zinc-500 italic" : "text-zinc-100"
-            )}>
-              {displayPrimary}
-            </p>
-            {idValue != null && (
-              <p className="text-[10px] text-zinc-500 font-mono">#{String(idValue)}</p>
-            )}
-          </div>
-        </div>
-        <ChevronRight className="w-4 h-4 text-zinc-600" />
-      </div>
-
-      {/* Preview Fields */}
-      <div className="space-y-2">
-        {previewFields.map(field => {
-          const pattern = sensitiveColumns?.get(field);
-          const isMasked = maskingActive && pattern && row[field] != null && row[field] !== undefined;
-          const displayValue = isMasked
-            ? maskValueByPattern(row[field], pattern)
-            : formatCellValue(row[field]).display;
-          const className = isMasked
-            ? 'text-zinc-500 italic'
-            : formatCellValue(row[field]).className;
-
-          return (
-            <div key={field} className="flex items-center justify-between text-xs">
-              <span className="text-zinc-500 truncate mr-2">
-                {field}
-                {isMasked && <Lock className="w-2.5 h-2.5 inline ml-1 text-purple-400" />}
-              </span>
-              <span className={cn("truncate max-w-[60%] text-right font-mono", className)}>
-                {displayValue}
-              </span>
-            </div>
-          );
-        })}
-        {fields.length > previewFields.length + 2 && (
-          <p className="text-[10px] text-zinc-600 text-center pt-1">
-            +{fields.length - previewFields.length - 2} more fields
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/results-grid/RowDetailSheet.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import React, { useState, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import {
-  Copy,
-  FileJson,
-  Check,
-  Eye,
-  Lock,
-} from 'lucide-react';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  type MaskingPattern,
-  maskValueByPattern,
-} from '@/lib/data-masking';
-import { formatCellValue } from './utils';
-
-export interface RowDetailSheetProps {
-  row: Record<string, unknown>;
-  fields: string[];
-  isOpen: boolean;
-  onClose: () => void;
-  rowIndex: number;
-  maskingActive?: boolean;
-  sensitiveColumns?: Map<string, MaskingPattern>;
-  allowReveal?: boolean;
-}
-
-export function RowDetailSheet({
-  row,
-  fields,
-  isOpen,
-  onClose,
-  rowIndex,
-  maskingActive,
-  sensitiveColumns,
-  allowReveal,
-}: RowDetailSheetProps) {
-  const [copiedField, setCopiedField] = useState<string | null>(null);
-  const [revealedFields, setRevealedFields] = useState<Set<string>>(new Set());
-
-  // Auto-hide revealed fields after 10s
-  const revealField = useCallback((field: string) => {
-    setRevealedFields(prev => new Set(prev).add(field));
-    setTimeout(() => {
-      setRevealedFields(prev => {
-        const next = new Set(prev);
-        next.delete(field);
-        return next;
-      });
-    }, 10000);
-  }, []);
-
-  const getDisplayValue = useCallback((field: string, value: unknown): { text: string; isMasked: boolean } => {
-    const pattern = sensitiveColumns?.get(field);
-    if (maskingActive && pattern && value != null && value !== undefined && !revealedFields.has(field)) {
-      return { text: maskValueByPattern(value, pattern), isMasked: true };
-    }
-    return { text: typeof value === 'object' ? JSON.stringify(value) : String(value ?? 'NULL'), isMasked: false };
-  }, [maskingActive, sensitiveColumns, revealedFields]);
-
-  const copyValue = (field: string, value: unknown) => {
-    const { text } = getDisplayValue(field, value);
-    navigator.clipboard.writeText(text);
-    setCopiedField(field);
-    setTimeout(() => setCopiedField(null), 1500);
-  };
-
-  const copyAllAsJson = () => {
-    // If masking is active, copy masked version
-    if (maskingActive && sensitiveColumns && sensitiveColumns.size > 0) {
-      const maskedRow: Record<string, unknown> = {};
-      for (const field of fields) {
-        const { text } = getDisplayValue(field, row[field]);
-        maskedRow[field] = text;
-      }
-      navigator.clipboard.writeText(JSON.stringify(maskedRow, null, 2));
-    } else {
-      navigator.clipboard.writeText(JSON.stringify(row, null, 2));
-    }
-    setCopiedField('__all__');
-    setTimeout(() => setCopiedField(null), 1500);
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={onClose}>
-      <SheetContent side="bottom" className="h-[85vh] bg-[#0a0a0a] border-t border-white/10 rounded-t-3xl">
-        <SheetHeader className="pb-4 border-b border-white/5">
-          <div className="flex items-center justify-between">
-            <SheetTitle className="text-zinc-100 flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center">
-                <FileJson className="w-4 h-4 text-blue-400" />
-              </div>
-              Row #{rowIndex + 1}
-            </SheetTitle>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 text-xs border-white/10 hover:bg-white/5"
-              onClick={copyAllAsJson}
-            >
-              {copiedField === '__all__' ? (
-                <><Check className="w-3 h-3 mr-1 text-emerald-400" /> Copied</>
-              ) : (
-                <><Copy className="w-3 h-3 mr-1" /> Copy JSON</>
-              )}
-            </Button>
-          </div>
-        </SheetHeader>
-
-        <ScrollArea className="h-[calc(85vh-100px)] mt-4">
-          <div className="space-y-1 pr-4">
-            {fields.map(field => {
-              const { text, isMasked } = getDisplayValue(field, row[field]);
-              const isLongValue = text.length > 50;
-
-              return (
-                <div
-                  key={field}
-                  className="group p-3 rounded-lg hover:bg-white/5 transition-colors"
-                >
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1 min-w-0">
-                      <p className="text-[10px] uppercase tracking-widest text-zinc-500 mb-1 font-mono flex items-center gap-1">
-                        {field}
-                        {isMasked && <Lock className="w-2.5 h-2.5 text-purple-400" />}
-                      </p>
-                      <p className={cn(
-                        "font-mono text-sm break-all",
-                        isMasked ? "text-zinc-500 italic" : formatCellValue(row[field]).className,
-                        isLongValue && "text-xs"
-                      )}>
-                        {text}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-1 shrink-0">
-                      {isMasked && allowReveal && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={() => revealField(field)}
-                          title="Reveal value (10s)"
-                        >
-                          <Eye className="w-3.5 h-3.5 text-purple-400" />
-                        </Button>
-                      )}
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={() => copyValue(field, row[field])}
-                      >
-                        {copiedField === field ? (
-                          <Check className="w-3.5 h-3.5 text-emerald-400" />
-                        ) : (
-                          <Copy className="w-3.5 h-3.5 text-zinc-500" />
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
-  );
-}