@libredb/studio 0.9.7

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

@@ -0,0 +1,300 @@
+'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

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

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