@libredb/studio 0.9.7

package/src/components/sidebar/ConnectionItem.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { DatabaseConnection, ENVIRONMENT_LABELS } from '@/lib/types';
+import { Lock, Trash2, Pencil } from 'lucide-react';
+import { getDBIcon } from '@/lib/db-ui-config';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
+
+interface ConnectionItemProps {
+  connection: DatabaseConnection;
+  isActive: boolean;
+  onSelect: (conn: DatabaseConnection) => void;
+  onDelete: (id: string) => void;
+  onEdit?: (conn: DatabaseConnection) => void;
+}
+
+export const ConnectionItem = React.memo(function ConnectionItem({
+  connection: conn,
+  isActive,
+  onSelect,
+  onDelete,
+  onEdit,
+}: ConnectionItemProps) {
+  return (
+    <motion.div
+      initial={false}
+      className={cn(
+        'group flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-200 text-sm relative overflow-hidden',
+        isActive
+          ? 'bg-blue-600/10 text-blue-400'
+          : 'hover:bg-accent/50 text-muted-foreground hover:text-foreground'
+      )}
+      onClick={() => onSelect(conn)}
+    >
+      {isActive && (
+        <motion.div
+          layoutId="active-indicator"
+          className="absolute left-0 w-1 h-4 rounded-r-full"
+          style={{ backgroundColor: conn.color || '#3b82f6' }}
+        />
+      )}
+      <div
+        className={cn(
+          'p-1 rounded transition-colors',
+          isActive ? 'bg-blue-500/20' : 'bg-muted group-hover:bg-accent'
+        )}
+      >
+        {React.createElement(getDBIcon(conn.type), { className: 'w-3 h-3' })}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate block font-medium text-[13px]">{conn.name}</span>
+          {conn.environment && conn.environment !== 'other' && (
+            <span
+              className="text-[8px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm shrink-0"
+              style={{
+                color: conn.color || '#6b7280',
+                backgroundColor: `${conn.color || '#6b7280'}15`,
+              }}
+            >
+              {ENVIRONMENT_LABELS[conn.environment]}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-0.5">
+          {conn.managed && (
+            <div
+              data-testid={`managed-lock-${conn.seedId || conn.id}`}
+              className="w-6 h-6 flex items-center justify-center text-amber-500/60"
+              title="Managed by administrator"
+            >
+              <Lock className="w-3 h-3" />
+            </div>
+          )}
+          {!conn.managed && onEdit && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-500/20 hover:text-blue-400"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdit(conn);
+              }}
+            >
+              <Pencil className="w-3 h-3" />
+            </Button>
+          )}
+          {!conn.managed && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500/20 hover:text-red-400"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(conn.id);
+              }}
+            >
+              <Trash2 className="w-3 h-3" />
+            </Button>
+          )}
+        </div>
+    </motion.div>
+  );
+});

package/src/components/sidebar/ConnectionsList.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { DatabaseConnection } from '@/lib/types';
+import { Button } from '@/components/ui/button';
+import { ConnectionItem } from './ConnectionItem';
+
+interface ConnectionsListProps {
+  connections: DatabaseConnection[];
+  activeConnection: DatabaseConnection | null;
+  onSelectConnection: (conn: DatabaseConnection) => void;
+  onDeleteConnection: (id: string) => void;
+  onEditConnection?: (conn: DatabaseConnection) => void;
+  onAddConnection: () => void;
+}
+
+export function ConnectionsList({
+  connections,
+  activeConnection,
+  onSelectConnection,
+  onDeleteConnection,
+  onEditConnection,
+  onAddConnection,
+}: ConnectionsListProps) {
+  return (
+    <section>
+      <div className="px-3 mb-2 flex items-center justify-between">
+        <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+          Connections
+        </span>
+        <div className="h-[1px] flex-1 bg-border/30 ml-3" />
+      </div>
+
+      <div className="space-y-0.5">
+        {connections.length === 0 ? (
+          <div className="px-3 py-6 text-center border border-dashed border-border/50 rounded-lg mx-2">
+            <p className="text-[11px] text-muted-foreground mb-3 leading-relaxed">
+              No database connections established yet.
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-[10px]"
+              onClick={onAddConnection}
+            >
+              Add Connection
+            </Button>
+          </div>
+        ) : (
+          connections.map((conn) => (
+            <ConnectionItem
+              key={conn.id}
+              connection={conn}
+              isActive={activeConnection?.id === conn.id}
+              onSelect={onSelectConnection}
+              onDelete={onDeleteConnection}
+              onEdit={onEditConnection}
+            />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React from 'react';
+import { DatabaseConnection, TableSchema } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import { Plus, Zap, Layers } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { SchemaExplorer } from '@/components/schema-explorer';
+import { ConnectionsList } from './ConnectionsList';
+
+interface SidebarProps {
+  connections: DatabaseConnection[];
+  activeConnection: DatabaseConnection | null;
+  schema: TableSchema[];
+  isLoadingSchema: boolean;
+  onSelectConnection: (connection: DatabaseConnection) => void;
+  onDeleteConnection: (id: string) => void;
+  onEditConnection?: (conn: DatabaseConnection) => void;
+  onAddConnection: () => void;
+  onTableClick?: (tableName: string) => void;
+  onGenerateSelect?: (tableName: string) => void;
+  onCreateTableClick?: () => void;
+  onShowDiagram?: () => void;
+  isAdmin?: boolean;
+  onOpenMaintenance?: (tab?: 'global' | 'tables' | 'sessions', table?: string) => void;
+  databaseType?: string;
+  metadata?: ProviderMetadata | null;
+  onProfileTable?: (tableName: string) => void;
+  onGenerateCode?: (tableName: string) => void;
+  onGenerateTestData?: (tableName: string) => void;
+}
+
+export function Sidebar({
+  connections,
+  activeConnection,
+  schema,
+  isLoadingSchema,
+  onSelectConnection,
+  onDeleteConnection,
+  onEditConnection,
+  onAddConnection,
+  onTableClick,
+  onGenerateSelect,
+  onCreateTableClick,
+  onShowDiagram,
+  isAdmin = false,
+  onOpenMaintenance,
+  databaseType,
+  metadata,
+  onProfileTable,
+  onGenerateCode,
+  onGenerateTestData,
+}: SidebarProps) {
+  return (
+    <div className="flex w-full h-full border-r border-border flex-col bg-background select-none">
+      <div className="h-14 px-4 flex items-center justify-between border-b border-border">
+        <div className="flex items-center gap-2">
+          <div className="w-6 h-6 bg-blue-600 rounded-md flex items-center justify-center">
+            <Zap className="w-3.5 h-3.5 text-white fill-current" />
+          </div>
+          <span className="font-bold text-sm tracking-tight bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
+            LibreDB Studio
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {activeConnection && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+              onClick={onShowDiagram}
+              title="Show ERD Diagram"
+            >
+              <Layers className="w-4 h-4" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            onClick={onAddConnection}
+          >
+            <Plus className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0 px-2 py-4">
+        <div className="space-y-6">
+          <ConnectionsList
+            connections={connections}
+            activeConnection={activeConnection}
+            onSelectConnection={onSelectConnection}
+            onDeleteConnection={onDeleteConnection}
+            onEditConnection={onEditConnection}
+            onAddConnection={onAddConnection}
+          />
+
+          {activeConnection && (
+            <SchemaExplorer
+              schema={schema}
+              isLoadingSchema={isLoadingSchema}
+              onTableClick={onTableClick}
+              onGenerateSelect={onGenerateSelect}
+              onCreateTableClick={onCreateTableClick}
+              isAdmin={isAdmin}
+              onOpenMaintenance={onOpenMaintenance}
+              databaseType={databaseType}
+              metadata={metadata}
+              onProfileTable={onProfileTable}
+              onGenerateCode={onGenerateCode}
+              onGenerateTestData={onGenerateTestData}
+            />
+          )}
+        </div>
+      </ScrollArea>
+
+      <div className="p-3 border-t border-border bg-card/50 backdrop-blur-md">
+        <div className="flex items-center justify-between px-2 py-1.5 rounded-lg bg-muted/30 border border-border/50">
+          <div className="flex items-center gap-2">
+            <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-[10px] font-medium text-muted-foreground">Connected</span>
+          </div>
+          <span className="text-[10px] font-mono text-muted-foreground/70">v1.2.5</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar';
+export { ConnectionsList } from './ConnectionsList';

package/src/components/studio/BottomPanel.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+import React from 'react';
+import type { DatabaseConnection, QueryTab, TableSchema, QueryResult } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import type { MaskingConfig } from '@/lib/data-masking';
+import type { CellChange } from '@/components/ResultsGrid';
+import { ResultsGrid } from '@/components/ResultsGrid';
+import { NL2SQLPanel } from '@/components/NL2SQLPanel';
+import { AIAutopilotPanel } from '@/components/AIAutopilotPanel';
+import { PivotTable } from '@/components/PivotTable';
+import { DatabaseDocs } from '@/components/DatabaseDocs';
+import { VisualExplain, type ExplainPlanResult } from '@/components/VisualExplain';
+import { QueryHistory } from '@/components/QueryHistory';
+import { SavedQueries } from '@/components/SavedQueries';
+import { DataCharts } from '@/components/DataCharts';
+import { SchemaDiff } from '@/components/SchemaDiff';
+import { cn } from '@/lib/utils';
+import {
+  BarChart3, Bookmark, Clock, Columns3, Download,
+  FileText, GitCompare, LayoutDashboard, LayoutGrid,
+  Sparkles, Terminal, Zap,
+} from 'lucide-react';
+import {
+  DropdownMenu, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { storage } from '@/lib/storage';
+
+export type BottomPanelMode = 'results' | 'explain' | 'history' | 'saved' | 'charts' | 'nl2sql' | 'autopilot' | 'pivot' | 'docs' | 'schemadiff' | 'dashboard';
+
+// Lazy-loaded chart dashboard
+function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
+  const [savedCharts, setSavedCharts] = React.useState<{ id: string; name: string; chartType: string; xAxis: string; yAxis: string[] }[]>([]);
+  React.useEffect(() => {
+    const charts = storage.getSavedCharts();
+    if (charts.length > 0) setSavedCharts(charts);
+  }, []);
+
+  if (savedCharts.length === 0) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500 gap-2">
+        <LayoutDashboard className="w-10 h-10 opacity-30" />
+        <p className="text-sm">No saved charts yet</p>
+        <p className="text-xs text-zinc-600">Save charts from the Charts tab to display them here</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-[#080808] p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {savedCharts.map(chart => (
+          <div key={chart.id} className="bg-[#0d0d0d] border border-white/10 rounded-lg p-3">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs font-bold text-zinc-300">{chart.name}</span>
+              <span className="text-[10px] text-zinc-600 uppercase">{chart.chartType}</span>
+            </div>
+            <div className="text-[10px] text-zinc-500">
+              {chart.xAxis && <span>X: {chart.xAxis}</span>}
+              {chart.yAxis?.length > 0 && <span className="ml-2">Y: {chart.yAxis.join(', ')}</span>}
+            </div>
+            {result ? (
+              <div className="mt-2 h-[160px]">
+                <DataCharts result={result} />
+              </div>
+            ) : (
+              <div className="mt-2 h-[100px] flex items-center justify-center text-zinc-600 text-[10px]">
+                Execute a query to see chart
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface BottomPanelProps {
+  mode: BottomPanelMode;
+  onSetMode: (mode: BottomPanelMode) => void;
+  currentTab: QueryTab;
+  schema: TableSchema[];
+  schemaContext: string;
+  activeConnection: DatabaseConnection | null;
+  metadata: ProviderMetadata | null;
+  historyKey: number;
+  savedKey: number;
+  isNL2SQLOpen: boolean;
+  onSetIsNL2SQLOpen: (open: boolean) => void;
+  // Masking
+  maskingEnabled: boolean;
+  onToggleMasking: (() => void) | undefined;
+  userRole: string | undefined;
+  maskingConfig: MaskingConfig;
+  // Editing
+  editingEnabled: boolean;
+  pendingChanges: CellChange[];
+  onCellChange: (change: CellChange) => void;
+  onApplyChanges: () => void;
+  onDiscardChanges: () => void;
+  // Actions
+  onExecuteQuery: (query: string) => void;
+  onLoadQuery: (query: string) => void;
+  onLoadMore: (() => void) | undefined;
+  isLoadingMore: boolean | undefined;
+  onExportResults: (format: 'csv' | 'json' | 'sql-insert' | 'sql-ddl') => void;
+}
+
+export function BottomPanel({
+  mode,
+  onSetMode,
+  currentTab,
+  schema,
+  schemaContext,
+  activeConnection,
+  metadata,
+  historyKey,
+  savedKey,
+  isNL2SQLOpen,
+  onSetIsNL2SQLOpen,
+  maskingEnabled,
+  onToggleMasking,
+  userRole,
+  maskingConfig,
+  editingEnabled,
+  pendingChanges,
+  onCellChange,
+  onApplyChanges,
+  onDiscardChanges,
+  onExecuteQuery,
+  onLoadQuery,
+  onLoadMore,
+  isLoadingMore,
+  onExportResults,
+}: BottomPanelProps) {
+  const tabs: { key: BottomPanelMode; label: string; icon: React.ReactNode; activeClass: string }[] = [
+    { key: 'results', label: 'Results', icon: <LayoutGrid className="w-3 h-3" />, activeClass: 'text-blue-400 border-blue-500 bg-white/5' },
+    { key: 'explain', label: 'Explain', icon: <Zap className="w-3 h-3" />, activeClass: 'text-amber-400 border-amber-500 bg-white/5' },
+    { key: 'history', label: 'History', icon: <Clock className="w-3 h-3" />, activeClass: 'text-emerald-400 border-emerald-500 bg-white/5' },
+    { key: 'saved', label: 'Saved', icon: <Bookmark className="w-3 h-3" />, activeClass: 'text-purple-400 border-purple-500 bg-white/5' },
+    { key: 'charts', label: 'Charts', icon: <BarChart3 className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
+    { key: 'nl2sql', label: 'NL2SQL', icon: <Sparkles className="w-3 h-3" />, activeClass: 'text-violet-400 border-violet-500 bg-white/5' },
+    { key: 'autopilot', label: 'Autopilot', icon: <Zap className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
+    { key: 'pivot', label: 'Pivot', icon: <Columns3 className="w-3 h-3" />, activeClass: 'text-orange-400 border-orange-500 bg-white/5' },
+    { key: 'docs', label: 'Docs', icon: <FileText className="w-3 h-3" />, activeClass: 'text-teal-400 border-teal-500 bg-white/5' },
+    { key: 'schemadiff', label: 'Diff', icon: <GitCompare className="w-3 h-3" />, activeClass: 'text-rose-400 border-rose-500 bg-white/5' },
+    { key: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-3 h-3" />, activeClass: 'text-indigo-400 border-indigo-500 bg-white/5' },
+  ];
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      <div className="h-9 bg-[#0a0a0a] border-b border-white/5 flex items-center justify-between px-2">
+        <div className="flex items-center h-full gap-1">
+          {tabs.map(tab => (
+            <button
+              key={tab.key}
+              onClick={() => {
+                onSetMode(tab.key);
+                if (tab.key === 'nl2sql') onSetIsNL2SQLOpen(true);
+              }}
+              className={cn(
+                "h-full px-3 text-[10px] font-bold uppercase transition-all border-b-2 flex items-center gap-2",
+                mode === tab.key
+                  ? tab.activeClass
+                  : "text-zinc-500 border-transparent hover:text-zinc-300"
+              )}
+            >
+              {tab.icon} {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {currentTab.result && mode === 'results' && (
+          <div className="flex items-center gap-1">
+            <span className="text-[10px] font-mono text-zinc-500 mr-2">
+              {currentTab.result.rowCount} rows • {currentTab.result.executionTime}ms
+            </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-2">
+                  <Download className="w-3 h-3" /> Export
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10 text-zinc-300">
+                <DropdownMenuItem onClick={() => onExportResults('csv')} className="text-xs cursor-pointer">
+                  Export as CSV
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onExportResults('json')} className="text-xs cursor-pointer">
+                  Export as JSON
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onExportResults('sql-insert')} className="text-xs cursor-pointer">
+                  Export as SQL INSERT
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onExportResults('sql-ddl')} className="text-xs cursor-pointer">
+                  Export as DDL (CREATE TABLE)
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-hidden relative">
+        {mode === 'nl2sql' ? (
+          <NL2SQLPanel
+            isOpen={isNL2SQLOpen}
+            onClose={() => { onSetIsNL2SQLOpen(false); onSetMode('results'); }}
+            onExecuteQuery={onExecuteQuery}
+            onLoadQuery={(q) => { onLoadQuery(q); onSetMode('results'); }}
+            schemaContext={schemaContext}
+            databaseType={activeConnection?.type}
+            queryLanguage={metadata?.capabilities.queryLanguage}
+          />
+        ) : mode === 'autopilot' ? (
+          <AIAutopilotPanel
+            connection={activeConnection}
+            schemaContext={schemaContext}
+            onExecuteQuery={onExecuteQuery}
+          />
+        ) : mode === 'pivot' ? (
+          <PivotTable
+            result={currentTab.result}
+            onLoadQuery={(q) => { onLoadQuery(q); onSetMode('results'); }}
+          />
+        ) : mode === 'docs' ? (
+          <DatabaseDocs
+            schema={schema}
+            schemaContext={schemaContext}
+            databaseType={activeConnection?.type}
+          />
+        ) : mode === 'history' ? (
+          <QueryHistory
+            refreshTrigger={historyKey}
+            activeConnectionId={activeConnection?.id}
+            onSelectQuery={(q) => { onLoadQuery(q); onSetMode('results'); }}
+          />
+        ) : mode === 'saved' ? (
+          <SavedQueries
+            refreshTrigger={savedKey}
+            connectionType={activeConnection?.type}
+            onSelectQuery={(q) => { onLoadQuery(q); onSetMode('results'); }}
+          />
+        ) : mode === 'charts' ? (
+          <DataCharts result={currentTab.result} />
+        ) : mode === 'schemadiff' ? (
+          <SchemaDiff schema={schema} connection={activeConnection} />
+        ) : mode === 'dashboard' ? (
+          <ChartDashboardLazy result={currentTab.result} />
+        ) : currentTab.result ? (
+          mode === 'explain' ? (
+            <VisualExplain
+              plan={currentTab.explainPlan as ExplainPlanResult[] | null | undefined}
+              query={currentTab.query}
+              schemaContext={schemaContext}
+              databaseType={activeConnection?.type}
+              onLoadQuery={(q) => { onLoadQuery(q); onSetMode('results'); }}
+            />
+          ) : (
+            <ResultsGrid
+              result={currentTab.result}
+              onLoadMore={onLoadMore}
+              isLoadingMore={isLoadingMore}
+              maskingEnabled={maskingEnabled}
+              onToggleMasking={onToggleMasking}
+              userRole={userRole}
+              maskingConfig={maskingConfig}
+              editingEnabled={editingEnabled}
+              pendingChanges={pendingChanges}
+              onCellChange={onCellChange}
+              onApplyChanges={onApplyChanges}
+              onDiscardChanges={onDiscardChanges}
+            />
+          )
+        ) : (
+          <div className="h-full flex flex-col items-center justify-center opacity-20 bg-[#0a0a0a]">
+            <Terminal className="w-12 h-12 mb-4" />
+            <p className="text-sm font-medium">Execute a query or check history</p>
+            <p className="text-[10px] uppercase tracking-widest mt-2">Ready to query</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}