@libredb/studio 0.9.7 → 0.9.13

package/src/app/globals.css

@@ -1,146 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-/*
- * shadcn/ui + Tailwind v4 Theme Configuration
- * Using @theme inline to map CSS variables to Tailwind utilities
- * See: https://ui.shadcn.com/docs/tailwind-v4
- */
-
-:root {
-  --background: #ffffff;
-  --foreground: #0a0a0a;
-  --card: #ffffff;
-  --card-foreground: #0a0a0a;
-  --popover: #ffffff;
-  --popover-foreground: #0a0a0a;
-  --primary: #171717;
-  --primary-foreground: #fafafa;
-  --secondary: #f5f5f5;
-  --secondary-foreground: #171717;
-  --muted: #f5f5f5;
-  --muted-foreground: #737373;
-  --accent: #f5f5f5;
-  --accent-foreground: #171717;
-  --destructive: #ef4444;
-  --destructive-foreground: #fafafa;
-  --border: #e5e5e5;
-  --input: #e5e5e5;
-  --ring: #0a0a0a;
-  --radius: 0.5rem;
-  --chart-1: #e76e50;
-  --chart-2: #2a9d90;
-  --chart-3: #274754;
-  --chart-4: #e8c468;
-  --chart-5: #f4a462;
-}
-
-.dark {
-  --background: #09090b;
-  --foreground: #fafafa;
-  --card: #0a0a0a;
-  --card-foreground: #fafafa;
-  --popover: #0a0a0a;
-  --popover-foreground: #fafafa;
-  --primary: #fafafa;
-  --primary-foreground: #171717;
-  --secondary: #27272a;
-  --secondary-foreground: #fafafa;
-  --muted: #27272a;
-  --muted-foreground: #a1a1aa;
-  --accent: #27272a;
-  --accent-foreground: #fafafa;
-  --destructive: #7f1d1d;
-  --destructive-foreground: #fafafa;
-  --border: #27272a;
-  --input: #27272a;
-  --ring: #d4d4d8;
-  --chart-1: #3b82f6;
-  --chart-2: #22c55e;
-  --chart-3: #f59e0b;
-  --chart-4: #a855f7;
-  --chart-5: #ec4899;
-}
-
-/* Map CSS variables to Tailwind color utilities */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-@layer base {
-  * {
-    border-color: var(--border);
-  }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
-@layer components {
-  .glass-panel {
-    background-color: rgba(9, 9, 11, 0.5);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  }
-  
-  .editor-scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  
-  .editor-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  .editor-scrollbar::-webkit-scrollbar-thumb {
-    background: #262626;
-    border-radius: 10px;
-  }
-  
-  .editor-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #404040;
-  }
-
-  /* Monaco Execution Highlight */
-  .executed-query-highlight {
-    background-color: rgba(37, 99, 235, 0.15) !important;
-    border-left: 2px solid #2563eb !important;
-  }
-  .executed-query-inline-highlight {
-    background-color: rgba(37, 99, 235, 0.1) !important;
-    border-radius: 2px;
-  }
-}

package/src/app/icon.svg

@@ -1,42 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#4F46E5" />
-      <stop offset="100%" stop-color="#9333EA" />
-    </linearGradient>
-    <linearGradient id="code-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#10B981" />
-      <stop offset="100%" stop-color="#3B82F6" />
-    </linearGradient>
-  </defs>
-
-  <path
-    d="M100 20L169.282 60V140L100 180L30.718 140V60L100 20Z"
-    fill="url(#logo-gradient)"
-    fill-opacity="0.08"
-    stroke="url(#logo-gradient)"
-    stroke-width="9"
-    stroke-linejoin="round"
-  />
-
-  <g opacity="0.75">
-    <rect x="84" y="84" width="32" height="8.5" rx="2.3" fill="url(#logo-gradient)" />
-    <rect x="84" y="97" width="32" height="8.5" rx="2.3" fill="url(#logo-gradient)" />
-    <rect x="84" y="110" width="32" height="8.5" rx="2.3" fill="url(#logo-gradient)" />
-  </g>
-
-  <path
-    d="M79 75L58 100L79 125"
-    stroke="url(#code-gradient)"
-    stroke-width="12"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M121 75L142 100L121 125"
-    stroke="url(#code-gradient)"
-    stroke-width="12"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>

package/src/app/layout.tsx

@@ -1,34 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { Toaster } from "@/components/ui/sonner";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "LibreDB Studio | Universal Database Editor",
-  description: "Manage PostgreSQL, MySQL, MongoDB, and Redis in one web-based interface.",
-  icons: {
-    icon: [
-      { url: "/favicon.ico?v=2", sizes: "any" },
-      { url: "/logo.svg?v=2", type: "image/svg+xml" },
-    ],
-    shortcut: "/favicon.ico?v=2",
-    apple: "/favicon-32x32.png?v=2",
-  },
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${inter.className} antialiased dark`}>
-        {children}
-        <Toaster position="bottom-right" theme="dark" />
-      </body>
-    </html>
-  );
-}

package/src/app/login/login-form.tsx

@@ -1,301 +0,0 @@
-'use client';
-
-import { Suspense, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
-import { ExternalLink, Lock, Mail, ShieldCheck, Zap, Globe, Shield, Layers } from 'lucide-react';
-import { toast } from 'sonner';
-import LibreDBLogo from '@/components/libredb-logo';
-import { CommunitySection } from '@/components/community-section';
-
-function LoginFormInner({ authProvider }: { authProvider: string }) {
-  const isOIDC = authProvider === 'oidc';
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const oidcError = searchParams.get('error');
-
-  const handleLogin = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault();
-
-    if (!email || !password) {
-      toast.error('Please enter email and password');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password }),
-      });
-
-      const data = await response.json();
-
-      if (data.success) {
-        toast.success(`Welcome back, ${data.role}!`);
-        router.push(data.role === 'admin' ? '/admin' : '/');
-        router.refresh();
-      } else {
-        toast.error(data.message || 'Invalid email or password');
-      }
-    } catch {
-      toast.error('An error occurred. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const features = [
-    { icon: Globe, title: '7+ Database Engines', desc: 'PostgreSQL, MySQL, MongoDB, Oracle, SQL Server' },
-    { icon: Zap, title: 'AI-Native Queries', desc: 'Natural language to SQL with multi-model LLM support' },
-    { icon: Shield, title: 'Zero Install', desc: 'Browser-based — deploy anywhere with Docker in seconds' },
-    { icon: Layers, title: 'Real-Time Monitoring', desc: 'Live metrics, schema explorer, and visual ERD diagrams' },
-  ];
-
-  return (
-    <div className="flex min-h-[100dvh] bg-background">
-      {/* Left Panel - Branding (hidden on mobile) */}
-      <div className="hidden lg:flex lg:w-1/2 xl:w-[55%] relative overflow-hidden">
-        {/* Base background matching app zinc-950 */}
-        <div className="absolute inset-0 bg-zinc-950" />
-        <div className="absolute inset-0 bg-gradient-to-b from-blue-950/20 via-transparent to-cyan-950/10" />
-
-        {/* Dot grid pattern */}
-        <div
-          className="absolute inset-0 opacity-[0.04]"
-          style={{
-            backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
-            backgroundSize: '32px 32px',
-          }}
-        />
-
-        {/* Ambient glow orbs — blue accent family */}
-        <div className="absolute top-1/4 -left-20 w-80 h-80 bg-blue-500/[0.07] rounded-full blur-3xl" />
-        <div className="absolute bottom-1/3 right-10 w-64 h-64 bg-cyan-500/[0.05] rounded-full blur-3xl" />
-
-        {/* Right edge separator */}
-        <div className="absolute right-0 top-0 bottom-0 w-px bg-white/[0.06]" />
-
-        {/* Content */}
-        <div className="relative z-10 flex flex-col p-12 xl:p-16 w-full overflow-y-auto">
-          {/* Top: Logo */}
-          <a href="https://libredb.org" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 group w-fit">
-            <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-white/[0.06] border border-white/[0.08] group-hover:bg-white/[0.10] group-hover:border-white/[0.12] transition-all duration-200">
-              <LibreDBLogo className="h-9 w-9 text-blue-400" />
-            </div>
-            <span className="text-xl font-semibold text-white tracking-tight group-hover:text-blue-400 transition-colors duration-200">LibreDB Studio</span>
-          </a>
-
-          {/* Middle: Hero text + Features */}
-          <div className="space-y-10 mt-auto">
-            <div className="space-y-4 max-w-lg">
-              <h1 className="text-4xl xl:text-5xl font-bold text-white tracking-tight leading-[1.1]">
-                The open-source SQL IDE for
-                <span className="bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent"> cloud-native teams</span>
-              </h1>
-              <p className="text-lg text-zinc-400 leading-relaxed">
-                Query, explore, and manage all your databases from a single AI-powered interface. Zero install — deploy with Docker in seconds.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
-              {features.map((feature) => (
-                <div
-                  key={feature.title}
-                  className="flex gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/[0.05] pointer-events-none select-none"
-                >
-                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 border border-blue-500/10">
-                    <feature.icon className="h-4 w-4 text-blue-400" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-zinc-200">{feature.title}</p>
-                    <p className="text-xs text-zinc-500 mt-0.5">{feature.desc}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Bottom: DB badges + Community */}
-          <div className="space-y-6 mt-auto">
-            <div className="space-y-3">
-              <p className="text-xs text-zinc-600 uppercase tracking-widest font-medium">Supported Databases</p>
-              <div className="flex flex-wrap gap-2">
-                {['PostgreSQL', 'MySQL', 'MongoDB', 'Oracle', 'SQL Server'].map((db) => (
-                  <span
-                    key={db}
-                    className="text-xs px-3 py-1.5 rounded-full bg-white/[0.04] text-zinc-500 border border-white/[0.05] font-medium"
-                  >
-                    {db}
-                  </span>
-                ))}
-              </div>
-            </div>
-            <CommunitySection variant="desktop" />
-          </div>
-        </div>
-      </div>
-
-      {/* Right Panel - Login Form */}
-      <div className="flex w-full lg:w-1/2 xl:w-[45%] items-center justify-center p-4 sm:p-6 lg:p-8">
-        <div className="w-full max-w-md space-y-8">
-          {/* Mobile branding (visible only on mobile) */}
-          <a href="https://libredb.org" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-4 lg:hidden group">
-            <div className="relative">
-              <div className="absolute -inset-2 rounded-full bg-blue-500/20 blur-lg" />
-              <div className="relative flex h-20 w-20 items-center justify-center rounded-2xl bg-zinc-900 border border-white/[0.08] shadow-lg shadow-blue-500/10 group-hover:border-blue-500/20 transition-all duration-200">
-                <LibreDBLogo className="h-12 w-12 text-blue-400" />
-              </div>
-            </div>
-            <div className="text-center space-y-1">
-              <h2 className="text-2xl font-bold tracking-tight group-hover:text-blue-400 transition-colors duration-200">LibreDB Studio</h2>
-              <p className="text-sm text-muted-foreground">Open-source SQL IDE for cloud-native teams</p>
-            </div>
-          </a>
-
-          <Card className="border-muted-foreground/10 shadow-2xl transition-all duration-300 hover:shadow-primary/5">
-            {/* Desktop header inside card */}
-            <CardHeader className="space-y-1 text-center pb-6 lg:pt-8">
-              <CardTitle className="text-2xl font-bold tracking-tight">
-                <span className="hidden lg:inline">Welcome back</span>
-                <span className="lg:hidden">Sign in</span>
-              </CardTitle>
-              <CardDescription className="text-muted-foreground">
-                <span className="hidden lg:inline">Sign in to your LibreDB Studio account</span>
-                <span className="lg:hidden">Enter your credentials to continue</span>
-              </CardDescription>
-            </CardHeader>
-
-            <CardContent className="space-y-6">
-              {isOIDC ? (
-                <>
-                  {oidcError && (
-                    <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
-                      Authentication failed. Please try again.
-                    </div>
-                  )}
-
-                  <div className="flex flex-col items-center text-center space-y-3 py-2">
-                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-                      <ShieldCheck className="h-6 w-6 text-primary" />
-                    </div>
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium text-foreground">Single Sign-On</p>
-                      <p className="text-xs text-muted-foreground">
-                        Sign in securely with your organization&apos;s identity provider
-                      </p>
-                    </div>
-                  </div>
-
-                  <Button
-                    className="w-full h-11 text-base font-medium shadow-lg shadow-primary/20 active:scale-[0.98] transition-all gap-2"
-                    onClick={() => {
-                      setIsLoading(true);
-                      window.location.href = '/api/auth/oidc/login';
-                    }}
-                    disabled={isLoading}
-                  >
-                    <ExternalLink className="h-4 w-4" />
-                    {isLoading ? 'Redirecting...' : 'Login with SSO'}
-                  </Button>
-
-                  <div className="flex items-center justify-center gap-4 pt-2">
-                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <Lock className="h-3 w-3" />
-                      <span>Encrypted</span>
-                    </div>
-                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <Shield className="h-3 w-3" />
-                      <span>OIDC Protected</span>
-                    </div>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <form onSubmit={handleLogin} className="space-y-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="email">Email</Label>
-                      <div className="relative group">
-                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-primary" />
-                        <Input
-                          id="email"
-                          type="email"
-                          placeholder="Enter your email"
-                          className="pl-10 h-11 transition-all focus:ring-2 focus:ring-primary/20"
-                          value={email}
-                          onChange={(e) => setEmail(e.target.value)}
-                          required
-                        />
-                      </div>
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="password">Password</Label>
-                      <div className="relative group">
-                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-primary" />
-                        <Input
-                          id="password"
-                          type="password"
-                          placeholder="Enter your password"
-                          className="pl-10 h-11 transition-all focus:ring-2 focus:ring-primary/20"
-                          value={password}
-                          onChange={(e) => setPassword(e.target.value)}
-                          required
-                        />
-                      </div>
-                    </div>
-                    <Button
-                      className="w-full h-11 text-base font-medium shadow-lg shadow-primary/20 active:scale-[0.98] transition-all"
-                      type="submit"
-                      disabled={isLoading}
-                    >
-                      {isLoading ? 'Authenticating...' : 'Sign In'}
-                    </Button>
-                  </form>
-                </>
-              )}
-            </CardContent>
-
-            <CardFooter className="pt-0 pb-6 flex flex-col items-center gap-2">
-              <p className="text-xs text-muted-foreground font-medium text-center max-w-[240px]">
-                Enterprise-grade security powered by LibreDB Studio Engine
-              </p>
-              <span className="text-[10px] text-muted-foreground/60 font-mono">
-                v{process.env.NEXT_PUBLIC_APP_VERSION}
-              </span>
-            </CardFooter>
-          </Card>
-
-          {/* Mobile community + DB pills */}
-          <div className="lg:hidden space-y-4">
-            <CommunitySection variant="mobile" />
-            <div className="flex flex-wrap justify-center gap-2">
-              {['PostgreSQL', 'MySQL', 'MongoDB', 'Oracle', 'SQL Server'].map((db) => (
-                <span
-                  key={db}
-                  className="text-[10px] px-2.5 py-1 rounded-full bg-muted text-muted-foreground font-medium"
-                >
-                  {db}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function LoginForm({ authProvider }: { authProvider: string }) {
-  return (
-    <Suspense>
-      <LoginFormInner authProvider={authProvider} />
-    </Suspense>
-  );
-}

package/src/app/login/page.tsx

@@ -1,11 +0,0 @@
-import LoginForm from './login-form';
-
-// Force dynamic rendering so env vars are read at runtime, not build time.
-// This is critical for Docker deployments where NEXT_PUBLIC_AUTH_PROVIDER
-// is set as a runtime env var (not available during docker build).
-export const dynamic = 'force-dynamic';
-
-export default function LoginPage() {
-  const authProvider = process.env.NEXT_PUBLIC_AUTH_PROVIDER || 'local';
-  return <LoginForm authProvider={authProvider} />;
-}

package/src/app/monitoring/page.tsx

@@ -1,8 +0,0 @@
-'use client';
-
-import { MonitoringDashboard } from '@/components/monitoring/MonitoringDashboard';
-
-export default function MonitoringPage() {
-  // Middleware handles authentication, no need for client-side check
-  return <MonitoringDashboard />;
-}

package/src/app/not-found.tsx

@@ -1,29 +0,0 @@
-import Link from 'next/link';
-
-export default function NotFound() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-950 text-white">
-      <div className="max-w-md text-center px-6">
-        <div className="text-6xl font-bold text-zinc-700 mb-4">404</div>
-        <h1 className="text-xl font-semibold mb-2">Page Not Found</h1>
-        <p className="text-zinc-400 mb-6 text-sm">
-          The page you are looking for does not exist or has been moved.
-        </p>
-        <div className="flex gap-3 justify-center">
-          <Link
-            href="/"
-            className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
-          >
-            Go to Studio
-          </Link>
-          <Link
-            href="/login"
-            className="px-5 py-2.5 border border-zinc-700 hover:border-zinc-500 text-zinc-300 rounded-lg text-sm font-medium transition-colors"
-          >
-            Sign In
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/app/page.tsx

@@ -1,5 +0,0 @@
-import Studio from '@/components/Studio';
-
-export default function Page() {
-  return <Studio />;
-}