@libredb/studio 0.9.7

package/src/components/studio/QueryToolbar.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import React from 'react';
+import type { DatabaseConnection } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import { cn } from '@/lib/utils';
+import { FlaskConical, Pencil, Play, Save, Square, Terminal, Upload } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface QueryToolbarProps {
+  activeConnection: DatabaseConnection | null;
+  metadata: ProviderMetadata | null;
+  isExecuting: boolean;
+  playgroundMode: boolean;
+  transactionActive: boolean;
+  editingEnabled: boolean;
+  onSaveQuery: () => void;
+  onExecuteQuery: () => void;
+  onCancelQuery: () => void;
+  onBeginTransaction: () => void;
+  onCommitTransaction: () => void;
+  onRollbackTransaction: () => void;
+  onTogglePlayground: () => void;
+  onToggleEditing: () => void;
+  onImport: () => void;
+}
+
+export function QueryToolbar({
+  activeConnection,
+  metadata,
+  isExecuting,
+  playgroundMode,
+  transactionActive,
+  editingEnabled,
+  onSaveQuery,
+  onExecuteQuery,
+  onCancelQuery,
+  onBeginTransaction,
+  onCommitTransaction,
+  onRollbackTransaction,
+  onTogglePlayground,
+  onToggleEditing,
+  onImport,
+}: QueryToolbarProps) {
+  return (
+    <>
+      {/* Playground Mode Banner */}
+      {playgroundMode && (
+        <div className="hidden md:flex items-center justify-center gap-2 px-4 py-1 bg-emerald-500/10 border-b border-emerald-500/20 text-emerald-400">
+          <FlaskConical className="w-3 h-3" />
+          <span className="text-[10px] font-bold uppercase tracking-widest">
+            Sandbox Mode — All changes will be auto-rolled back
+          </span>
+        </div>
+      )}
+
+      {/* Desktop Query Toolbar */}
+      <div className="hidden md:flex items-center justify-between px-4 py-1.5 bg-[#0a0a0a] border-b border-white/5">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-blue-500/5 border border-blue-500/10">
+            <Terminal className="w-3 h-3 text-blue-400" />
+            <span className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Query</span>
+          </div>
+          <div className="h-4 w-px bg-white/5" />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
+            onClick={onSaveQuery}
+          >
+            <Save className="w-3 h-3" /> Save
+          </Button>
+        </div>
+        {isExecuting ? (
+          <Button
+            size="sm"
+            className="bg-red-600 hover:bg-red-500 text-white font-bold text-[11px] h-7 px-4 gap-2"
+            onClick={onCancelQuery}
+          >
+            <Square className="w-3 h-3 fill-current" />
+            CANCEL
+          </Button>
+        ) : (
+          <Button
+            size="sm"
+            className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-[11px] h-7 px-4 gap-2"
+            onClick={onExecuteQuery}
+            disabled={!activeConnection}
+          >
+            <Play className="w-3 h-3 fill-current" />
+            RUN
+          </Button>
+        )}
+
+        {/* Transaction Controls + Playground + Import + Edit */}
+        {activeConnection && metadata?.capabilities.queryLanguage === 'sql' && (
+          <div className="flex items-center gap-1 ml-2 pl-2 border-l border-white/10">
+            {transactionActive ? (
+              <>
+                <span className="text-[9px] font-bold text-amber-400 uppercase tracking-wider px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1">
+                  TXN
+                </span>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-7 text-[10px] font-bold text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1"
+                  onClick={onCommitTransaction}
+                >
+                  COMMIT
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-7 text-[10px] font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1"
+                  onClick={onRollbackTransaction}
+                >
+                  ROLLBACK
+                </Button>
+              </>
+            ) : (
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+                onClick={onBeginTransaction}
+                disabled={playgroundMode}
+              >
+                BEGIN
+              </Button>
+            )}
+
+            <Button
+              size="sm"
+              variant="ghost"
+              className={cn(
+                "h-7 text-[10px] font-bold uppercase tracking-widest gap-1",
+                playgroundMode
+                  ? "text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20"
+                  : "text-zinc-500 hover:text-white"
+              )}
+              onClick={onTogglePlayground}
+              disabled={transactionActive}
+              title="Playground mode: queries are auto-rolled back"
+            >
+              <FlaskConical className="w-3 h-3" />
+              SANDBOX
+            </Button>
+
+            <Button
+              size="sm"
+              variant="ghost"
+              className={cn(
+                "h-7 text-[10px] font-bold uppercase tracking-widest gap-1",
+                editingEnabled
+                  ? "text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
+                  : "text-zinc-500 hover:text-white"
+              )}
+              onClick={onToggleEditing}
+              title="Enable inline data editing"
+            >
+              <Pencil className="w-3 h-3" />
+              EDIT
+            </Button>
+
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+              onClick={onImport}
+              title="Import data from CSV/JSON"
+            >
+              <Upload className="w-3 h-3" />
+              IMPORT
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/studio/StudioDesktopHeader.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+import type { DatabaseConnection } from '@/lib/types';
+import { useRouter } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { Database, Gauge, LogOut, Settings, User } from 'lucide-react';
+import {
+  DropdownMenu, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+interface StudioDesktopHeaderProps {
+  activeConnection: DatabaseConnection | null;
+  connectionPulse: 'healthy' | 'degraded' | 'error' | null;
+  user: { role?: string } | null;
+  isAdmin: boolean;
+  onLogout: () => void;
+}
+
+export function StudioDesktopHeader({
+  activeConnection,
+  connectionPulse,
+  user,
+  isAdmin,
+  onLogout,
+}: StudioDesktopHeaderProps) {
+  const router = useRouter();
+
+  return (
+    <header className="hidden md:flex h-14 border-b border-white/5 items-center justify-between px-4 bg-[#0a0a0a]/80 backdrop-blur-xl sticky top-0 z-30">
+      <div className="flex items-center gap-3">
+        <div className="p-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <Database className="w-4 h-4 text-blue-400" />
+        </div>
+        <div>
+          <h1 className="text-sm font-semibold tracking-tight text-zinc-200 truncate max-w-[120px]">
+            {activeConnection ? activeConnection.name : 'Quick Access'}
+          </h1>
+          {activeConnection && (
+            <p className="text-[10px] text-zinc-500 font-mono uppercase tracking-widest leading-none mt-0.5">
+              {activeConnection.type}
+              {activeConnection.environment && activeConnection.environment !== 'other' && (
+                <span
+                  className="ml-1 font-bold"
+                  style={{ color: activeConnection.color || '#22c55e' }}
+                >
+                  • {activeConnection.environment}
+                </span>
+              )}
+              {!activeConnection.environment && (
+                <span> • <span className="text-emerald-500/80">Online</span></span>
+              )}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {connectionPulse && (
+          <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-white/5 mr-2" title={`Connection: ${connectionPulse}`}>
+            <div className={cn(
+              "w-2 h-2 rounded-full",
+              connectionPulse === 'healthy' && "bg-emerald-500 animate-pulse",
+              connectionPulse === 'degraded' && "bg-amber-500",
+              connectionPulse === 'error' && "bg-red-500",
+            )} />
+            <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+              {connectionPulse === 'healthy' ? 'Online' : connectionPulse === 'degraded' ? 'Slow' : 'Error'}
+            </span>
+          </div>
+        )}
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-3 text-[10px] font-bold uppercase tracking-widest gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
+          onClick={() => router.push('/monitoring')}
+        >
+          <Gauge className="w-3 h-3" /> Monitoring
+        </Button>
+
+        {user && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 gap-2 hover:bg-white/5 px-2">
+                <User className="w-3.5 h-3.5 text-blue-400" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56 bg-[#0d0d0d] border-white/10 text-zinc-300">
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => router.push('/admin')} className="cursor-pointer">
+                  <Settings className="w-4 h-4 mr-2" /> Admin Dashboard
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={() => router.push('/monitoring')} className="cursor-pointer">
+                <Gauge className="w-4 h-4 mr-2" /> Monitoring
+              </DropdownMenuItem>
+              <div className="border-t border-white/5 my-1" />
+              <DropdownMenuItem onClick={onLogout} className="text-red-400 cursor-pointer">
+                <LogOut className="w-4 h-4 mr-2" /> Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        <Settings className="w-4 h-4 text-zinc-400 cursor-pointer hover:text-white transition-colors mx-2" />
+        <span className="text-[10px] text-zinc-500 font-mono">
+          v{process.env.NEXT_PUBLIC_APP_VERSION}
+        </span>
+      </div>
+    </header>
+  );
+}

package/src/components/studio/StudioMobileHeader.tsx

@@ -0,0 +1,340 @@
+'use client';
+
+import React, { type RefObject } from 'react';
+import type { DatabaseConnection } from '@/lib/types';
+import type { QueryEditorRef } from '@/components/QueryEditor';
+import { useRouter } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import {
+  AlignLeft, ChevronDown, Copy, Database, Edit3, Gauge,
+  LogOut, MoreVertical, Pencil, Play, PlayCircle, Plus,
+  Save, Settings, Sparkles, Square, Trash2, Upload, User, Zap,
+} from 'lucide-react';
+import {
+  DropdownMenu, DropdownMenuContent,
+  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+interface StudioMobileHeaderProps {
+  connections: DatabaseConnection[];
+  activeConnection: DatabaseConnection | null;
+  connectionPulse: 'healthy' | 'degraded' | 'error' | null;
+  user: { role?: string } | null;
+  isAdmin: boolean;
+  activeMobileTab: 'database' | 'schema' | 'editor';
+  isExecuting: boolean;
+  currentQuery: string;
+  queryEditorRef: RefObject<QueryEditorRef | null>;
+  transactionActive: boolean;
+  playgroundMode: boolean;
+  editingEnabled: boolean;
+  onSelectConnection: (conn: DatabaseConnection) => void;
+  onAddConnection: () => void;
+  onLogout: () => void;
+  onSaveQuery: () => void;
+  onClearQuery: () => void;
+  onExecuteQuery: () => void;
+  onCancelQuery: () => void;
+  onBeginTransaction: () => void;
+  onCommitTransaction: () => void;
+  onRollbackTransaction: () => void;
+  onTogglePlayground: () => void;
+  onToggleEditing: () => void;
+  onImport: () => void;
+  onExplain?: () => void;
+}
+
+export function StudioMobileHeader({
+  connections,
+  activeConnection,
+  connectionPulse,
+  user,
+  isAdmin,
+  activeMobileTab,
+  isExecuting,
+  currentQuery,
+  queryEditorRef,
+  transactionActive,
+  playgroundMode,
+  editingEnabled,
+  onSelectConnection,
+  onAddConnection,
+  onLogout,
+  onSaveQuery,
+  onClearQuery,
+  onExecuteQuery,
+  onCancelQuery,
+  onBeginTransaction,
+  onCommitTransaction,
+  onRollbackTransaction,
+  onTogglePlayground,
+  onToggleEditing,
+  onImport,
+  onExplain,
+}: StudioMobileHeaderProps) {
+  const router = useRouter();
+
+  return (
+    <header className="md:hidden border-b border-white/5 bg-[#0a0a0a]/95 backdrop-blur-xl sticky top-0 z-30">
+      {/* Row 1: DB Selector + Connection Info + User */}
+      <div className="h-12 flex items-center justify-between px-3">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 px-2 gap-1 bg-[#111] border-white/10 hover:bg-white/5 text-zinc-300 max-w-[160px]"
+              >
+                <Database className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+                <span className="truncate text-xs font-medium">
+                  {activeConnection ? activeConnection.name : 'Select DB'}
+                </span>
+                <ChevronDown className="w-3 h-3 text-zinc-500 shrink-0" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-64 bg-[#0d0d0d] border-white/10">
+              {connections.length === 0 ? (
+                <DropdownMenuItem onClick={onAddConnection} className="text-zinc-400 cursor-pointer">
+                  <Plus className="w-4 h-4 mr-2" /> Add Connection
+                </DropdownMenuItem>
+              ) : (
+                <>
+                  {connections.map((c) => (
+                    <DropdownMenuItem
+                      key={c.id}
+                      onClick={() => onSelectConnection(c)}
+                      className={cn(
+                        "cursor-pointer",
+                        activeConnection?.id === c.id && "bg-blue-600/20 text-blue-400"
+                      )}
+                    >
+                      <Database className="w-4 h-4 mr-2" />
+                      <span className="truncate">{c.name}</span>
+                      {activeConnection?.id === c.id && (
+                        <div className="ml-auto w-1.5 h-1.5 rounded-full bg-blue-500" />
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuItem
+                    onClick={onAddConnection}
+                    className="text-zinc-500 cursor-pointer border-t border-white/5 mt-1"
+                  >
+                    <Plus className="w-4 h-4 mr-2" /> Add New
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {activeConnection && (
+            <span className="text-[10px] text-emerald-500 font-medium px-1.5 py-0.5 rounded bg-emerald-500/10">
+              Online
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0 text-zinc-500 hover:text-purple-400"
+            onClick={() => router.push('/monitoring')}
+          >
+            <Gauge className="w-4 h-4" />
+          </Button>
+          {connectionPulse && (
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5" title={`Connection: ${connectionPulse}`}>
+              <div className={cn(
+                "w-1.5 h-1.5 rounded-full",
+                connectionPulse === 'healthy' && "bg-emerald-500 animate-pulse",
+                connectionPulse === 'degraded' && "bg-amber-500",
+                connectionPulse === 'error' && "bg-red-500",
+              )} />
+            </div>
+          )}
+          {user && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <User className="w-4 h-4 text-zinc-400" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10">
+                {isAdmin && (
+                  <DropdownMenuItem onClick={() => router.push('/admin')} className="cursor-pointer">
+                    <Settings className="w-4 h-4 mr-2" /> Admin Dashboard
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem onClick={() => router.push('/monitoring')} className="cursor-pointer">
+                  <Gauge className="w-4 h-4 mr-2" /> Monitoring
+                </DropdownMenuItem>
+                <div className="border-t border-white/5 my-1" />
+                <DropdownMenuItem onClick={onLogout} className="text-red-400 cursor-pointer">
+                  <LogOut className="w-4 h-4 mr-2" /> Logout
+                </DropdownMenuItem>
+                <div className="border-t border-white/5 mt-1 pt-1 px-2 pb-1">
+                  <span className="text-[10px] text-zinc-500 font-mono">v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </div>
+
+      {/* Row 2: Actions + RUN (only show when on editor tab) */}
+      {activeMobileTab === 'editor' && (
+        <div className="h-10 flex items-center justify-between px-3 border-t border-white/5 bg-[#080808]">
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 gap-1 text-[10px] font-bold text-zinc-500 hover:text-blue-400"
+              onClick={() => queryEditorRef.current?.toggleAi()}
+            >
+              <Sparkles className="w-3.5 h-3.5" />
+              AI
+            </Button>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-7 px-2 gap-1 text-[10px] text-zinc-500">
+                  <MoreVertical className="w-3.5 h-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="bg-[#0d0d0d] border-white/10 w-48">
+                <DropdownMenuItem
+                  onClick={() => queryEditorRef.current?.format()}
+                  className="cursor-pointer text-xs"
+                >
+                  <AlignLeft className="w-4 h-4 mr-2" /> Format SQL
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    const query = queryEditorRef.current?.getValue() || currentQuery;
+                    navigator.clipboard.writeText(query);
+                  }}
+                  className="cursor-pointer text-xs"
+                >
+                  <Copy className="w-4 h-4 mr-2" /> Copy Query
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={onClearQuery}
+                  className="cursor-pointer text-xs text-red-400"
+                >
+                  <Trash2 className="w-4 h-4 mr-2" /> Clear
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={onSaveQuery}
+                  className="cursor-pointer text-xs"
+                >
+                  <Save className="w-4 h-4 mr-2" /> Save Query
+                </DropdownMenuItem>
+
+                {onExplain && (
+                  <>
+                    <DropdownMenuSeparator className="bg-white/5" />
+                    <DropdownMenuItem
+                      onClick={onExplain}
+                      className="cursor-pointer text-xs text-amber-400"
+                    >
+                      <Zap className="w-4 h-4 mr-2" /> Explain Plan
+                    </DropdownMenuItem>
+                  </>
+                )}
+
+                <DropdownMenuSeparator className="bg-white/5" />
+                <div className="px-2 py-1">
+                  <span className="text-[9px] font-bold text-zinc-600 uppercase tracking-widest">Advanced</span>
+                </div>
+
+                {!transactionActive ? (
+                  <DropdownMenuItem
+                    onClick={onBeginTransaction}
+                    className="cursor-pointer text-xs"
+                    disabled={!activeConnection}
+                  >
+                    <PlayCircle className="w-4 h-4 mr-2" /> BEGIN Transaction
+                  </DropdownMenuItem>
+                ) : (
+                  <>
+                    <DropdownMenuItem
+                      onClick={onCommitTransaction}
+                      className="cursor-pointer text-xs text-emerald-400"
+                    >
+                      <PlayCircle className="w-4 h-4 mr-2" /> COMMIT
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={onRollbackTransaction}
+                      className="cursor-pointer text-xs text-red-400"
+                    >
+                      <PlayCircle className="w-4 h-4 mr-2" /> ROLLBACK
+                    </DropdownMenuItem>
+                  </>
+                )}
+
+                <DropdownMenuItem
+                  onClick={onTogglePlayground}
+                  className="cursor-pointer text-xs"
+                >
+                  <Pencil className="w-4 h-4 mr-2" />
+                  {playgroundMode ? 'Disable Sandbox' : 'Enable Sandbox'}
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={onToggleEditing}
+                  className="cursor-pointer text-xs"
+                >
+                  <Edit3 className="w-4 h-4 mr-2" />
+                  {editingEnabled ? 'Disable Editing' : 'Enable Editing'}
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={onImport}
+                  className="cursor-pointer text-xs"
+                  disabled={!activeConnection}
+                >
+                  <Upload className="w-4 h-4 mr-2" /> Import Data
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Status badges */}
+            {transactionActive && (
+              <span className="text-[9px] font-black text-amber-400 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
+                TXN
+              </span>
+            )}
+            {playgroundMode && (
+              <span className="text-[9px] font-black text-purple-400 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20">
+                SANDBOX
+              </span>
+            )}
+          </div>
+
+          {isExecuting ? (
+            <Button
+              size="sm"
+              className="bg-red-600 hover:bg-red-500 text-white font-bold text-[11px] h-7 px-4 gap-1.5"
+              onClick={onCancelQuery}
+            >
+              <Square className="w-3 h-3 fill-current" />
+              CANCEL
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-[11px] h-7 px-4 gap-1.5"
+              onClick={onExecuteQuery}
+              disabled={!activeConnection}
+            >
+              <Play className="w-3 h-3 fill-current" />
+              RUN
+            </Button>
+          )}
+        </div>
+      )}
+    </header>
+  );
+}