[KM-476] [DED][FE] Knowledge (Document and DB) Flow Page

ticket: https://bukittechnology.atlassian.net/browse/KM-476
- Implement connectDatabase, getDatabaseClientTypes, getDatabaseClients,
deleteDatabaseClient, and ingestDatabaseClient in api.ts with correct
request/response shapes per API contract
- Add DbTypeField, DbTypeInfo, DatabaseClient, and IngestResponse types;
remove placeholder PostgresCredentials and ConnectDatabaseResponse
- Replace hard-coded DB_TYPES with dynamic fetch from GET /dbtypes endpoint
- Add "Connection Name" required field to credentials form
- Render form fields dynamically from API schema (supports all db_type variants:
postgres, mysql, supabase, sqlserver, bigquery, snowflake)
- Refresh connection list from GET /database-clients/{user_id} after connect
to confirm persisted data from backend
- Add "Databases" section in main view listing connected clients with
Ingest and Delete actions per connection

src/app/App.tsx

@@ -1,6 +1,12 @@
 import { RouterProvider } from "react-router";
 import { router } from "./routes";
+import { Toaster } from "./components/ui/sonner";
 
 export default function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <>
+      <RouterProvider router={router} />
+      <Toaster richColors position="top-right" />
+    </>
+  );
 }

src/app/components/KnowledgeManagement.tsx

@@ -7,14 +7,25 @@ import {
   Loader2,
   Database,
   X,
+  ChevronLeft,
+  Link,
 } from "lucide-react";
+import { toast } from "sonner";
 import {
   getDocuments,
   uploadDocument,
   processDocument,
   deleteDocument,
+  getDatabaseClientTypes,
+  connectDatabase,
+  getDatabaseClients,
+  deleteDatabaseClient,
+  ingestDatabaseClient,
   type ApiDocument,
   type DocumentStatus,
+  type DbType,
+  type DbTypeInfo,
+  type DatabaseClient,
 } from "../../services/api";
 
 interface KnowledgeManagementProps {
@@ -22,6 +33,17 @@ interface KnowledgeManagementProps {
   onClose: () => void;
 }
 
+type View = "main" | "db-select" | "db-credentials";
+
+const LOGO_MAP: Record<string, string> = {
+  postgres:  "/databases/postgres.png",
+  mysql:     "/databases/mysql.png",
+  supabase:  "/databases/supabase.png",
+  sqlserver: "/databases/sqlserver.png",
+  bigquery:  "/databases/big_query.svg",
+  snowflake: "/databases/snowflake.png",
+};
+
 const getUserId = (): string | null => {
   const stored = localStorage.getItem("chatbot_user");
   if (!stored) return null;
@@ -32,6 +54,7 @@ export default function KnowledgeManagement({
   open,
   onClose,
 }: KnowledgeManagementProps) {
+  // ── Document state ──────────────────────────────────────────────────────────
   const [documents, setDocuments] = useState<ApiDocument[]>([]);
   const [loadingDocs, setLoadingDocs] = useState(false);
   const [docsError, setDocsError] = useState<string | null>(null);
@@ -40,13 +63,56 @@ export default function KnowledgeManagement({
   const [processing, setProcessing] = useState<string | null>(null);
   const [deleting, setDeleting] = useState<string | null>(null);
 
+  // ── Navigation state ────────────────────────────────────────────────────────
+  const [view, setView] = useState<View>("main");
+  const [selectedDbType, setSelectedDbType] = useState<DbType | null>(null);
+
+  // ── DB type & client state ──────────────────────────────────────────────────
+  const [dbTypeInfos, setDbTypeInfos] = useState<DbTypeInfo[]>([]);
+  const [dbClients, setDbClients] = useState<DatabaseClient[]>([]);
+  const [loadingDbTypes, setLoadingDbTypes] = useState(false);
+  const [ingesting, setIngesting] = useState<string | null>(null);
+  const [deletingClient, setDeletingClient] = useState<string | null>(null);
+
+  // ── DB credentials form state ───────────────────────────────────────────────
+  const [connectionName, setConnectionName] = useState("");
+  const [dbForm, setDbForm] = useState<Record<string, string | number | boolean>>({});
+  const [connecting, setConnecting] = useState(false);
+
   useEffect(() => {
     if (!open) return;
     const userId = getUserId();
     if (!userId) return;
     loadDocuments(userId);
+    loadDbData(userId);
   }, [open]);
 
+  const loadDbData = async (userId: string) => {
+    setLoadingDbTypes(true);
+    try {
+      const [types, clients] = await Promise.all([
+        getDatabaseClientTypes(),
+        getDatabaseClients(userId),
+      ]);
+      setDbTypeInfos(types);
+      setDbClients(clients);
+    } catch {
+      // non-blocking; silently fail
+    } finally {
+      setLoadingDbTypes(false);
+    }
+  };
+
+  const handleClose = () => {
+    setView("main");
+    setSelectedDbType(null);
+    setConnectionName("");
+    setDbForm({});
+    onClose();
+  };
+
+  // ── Document handlers ───────────────────────────────────────────────────────
+
   const loadDocuments = async (userId: string) => {
     setLoadingDocs(true);
     setDocsError(null);
@@ -83,7 +149,6 @@ export default function KnowledgeManagement({
           created_at: new Date().toISOString(),
         };
         setDocuments((prev) => [newDoc, ...prev]);
-
         await processDocumentById(userId, uploadRes.data.id);
       } catch (err) {
         setUploadError(err instanceof Error ? err.message : "Upload failed");
@@ -148,6 +213,59 @@ export default function KnowledgeManagement({
     setDocuments([]);
   };
 
+  // ── DB handlers ─────────────────────────────────────────────────────────────
+
+  const handleDbConnect = async () => {
+    const userId = getUserId();
+    if (!userId || !selectedDbType || !connectionName.trim()) return;
+    setConnecting(true);
+    try {
+      await connectDatabase(userId, selectedDbType, connectionName.trim(), dbForm);
+      const clients = await getDatabaseClients(userId);
+      setDbClients(clients);
+      toast.success("Database connected successfully");
+      setView("main");
+      setConnectionName("");
+      setDbForm({});
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to connect to database"
+      );
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  const handleIngest = async (clientId: string) => {
+    const userId = getUserId();
+    if (!userId) return;
+    setIngesting(clientId);
+    try {
+      const res = await ingestDatabaseClient(clientId, userId);
+      toast.success(`Ingested ${res.chunks_ingested} chunks successfully`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Ingestion failed");
+    } finally {
+      setIngesting(null);
+    }
+  };
+
+  const handleDeleteClient = async (clientId: string) => {
+    const userId = getUserId();
+    if (!userId) return;
+    setDeletingClient(clientId);
+    try {
+      await deleteDatabaseClient(clientId, userId);
+      setDbClients((prev) => prev.filter((c) => c.id !== clientId));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to delete connection");
+    } finally {
+      setDeletingClient(null);
+    }
+  };
+
+  // ── Helpers ─────────────────────────────────────────────────────────────────
+
   const formatFileSize = (bytes: number) => {
     if (bytes < 1024) return bytes + " B";
     if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
@@ -177,7 +295,6 @@ export default function KnowledgeManagement({
       );
     }
 
-    // pending or failed
     return (
       <button
         onClick={() => {
@@ -195,142 +312,422 @@ export default function KnowledgeManagement({
 
   if (!open) return null;
 
+  // ── Header title & back button logic ────────────────────────────────────────
+
+  const selectedDbInfo = dbTypeInfos.find((d) => d.db_type === selectedDbType);
+
+  const headerTitle =
+    view === "db-select"
+      ? "Connect Database"
+      : view === "db-credentials"
+      ? `Connect to ${selectedDbInfo?.display_name ?? selectedDbType}`
+      : "Knowledge Base";
+
+  const headerBack =
+    view === "db-select"
+      ? () => setView("main")
+      : view === "db-credentials"
+      ? () => setView("db-select")
+      : null;
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col m-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md max-h-[85vh] flex flex-col">
+
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-gradient-to-r from-[#FF8F00] to-[#FF6F00]">
-          <div className="flex items-center gap-2">
-            <Database className="w-5 h-5 text-white" />
-            <h2 className="text-lg text-white">Knowledge Management</h2>
+        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+          <div className="flex items-center gap-3">
+            {headerBack ? (
+              <button
+                onClick={headerBack}
+                className="p-1.5 -ml-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition"
+                aria-label="Back"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+            ) : (
+              <div className="w-7 h-7 rounded-lg bg-orange-100 flex items-center justify-center">
+                <Database className="w-4 h-4 text-[#FF8F00]" />
+              </div>
+            )}
+            <h2 className="text-sm font-semibold text-slate-900">{headerTitle}</h2>
           </div>
           <button
-            onClick={onClose}
-            className="text-white/80 hover:text-white transition"
+            onClick={handleClose}
+            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
-          {/* Upload Section */}
-          <div className="mb-4">
-            <label
-              htmlFor="file-upload"
-              className="flex items-center justify-center gap-2 border-2 border-dashed border-slate-300 rounded-lg p-6 cursor-pointer hover:border-[#4FC3F7] hover:bg-slate-50 transition"
-            >
-              <Upload className="w-5 h-5 text-slate-600" />
-              <div className="text-center">
-                <p className="text-slate-900 font-medium text-sm">
-                  Upload Documents (PDF, DOCX, TXT)
-                </p>
-                <p className="text-xs text-slate-500 mt-0.5">
-                  Click to browse or drag and drop
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+
+          {/* ── VIEW: main ── */}
+          {view === "main" && (
+            <div className="space-y-4">
+
+              {/* Upload zone */}
+              <label
+                htmlFor="file-upload"
+                className="group flex flex-col items-center gap-2.5 border-2 border-dashed border-slate-200 rounded-xl p-7 cursor-pointer hover:border-[#FF8F00] hover:bg-orange-50/30 transition-colors"
+              >
+                <div className="w-10 h-10 rounded-xl bg-slate-100 group-hover:bg-orange-100 flex items-center justify-center transition-colors">
+                  {uploading ? (
+                    <Loader2 className="w-5 h-5 text-[#FF8F00] animate-spin" />
+                  ) : (
+                    <Upload className="w-5 h-5 text-slate-400 group-hover:text-[#FF8F00] transition-colors" />
+                  )}
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium text-slate-700">
+                    {uploading ? "Uploading…" : (
+                      <>Drop files, or <span className="text-[#FF8F00]">browse</span></>
+                    )}
+                  </p>
+                  <p className="text-xs text-slate-400 mt-0.5">PDF, CSV, XLSX</p>
+                </div>
+                <input
+                  id="file-upload"
+                  type="file"
+                  accept=".pdf,.csv,.xlsx"
+                  multiple
+                  onChange={handleFileUpload}
+                  className="hidden"
+                  disabled={uploading}
+                />
+              </label>
+
+              {uploadError && (
+                <p className="text-xs text-red-500 bg-red-50 border border-red-100 px-3 py-2 rounded-lg">
+                  {uploadError}
                 </p>
-              </div>
-              <input
-                id="file-upload"
-                type="file"
-                accept=".pdf,.docx,.txt"
-                multiple
-                onChange={handleFileUpload}
-                className="hidden"
-                disabled={uploading}
-              />
-            </label>
-            {uploadError && (
-              <p className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 px-3 py-2 rounded-lg">
-                {uploadError}
-              </p>
-            )}
-          </div>
+              )}
+
+              {/* Connect DB row */}
+              <button
+                onClick={() => setView("db-select")}
+                className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition text-left group"
+              >
+                <div className="w-8 h-8 rounded-lg bg-slate-100 group-hover:bg-slate-200 flex items-center justify-center flex-shrink-0 transition-colors">
+                  <Link className="w-4 h-4 text-slate-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-slate-700">Connect a Database</p>
+                  <p className="text-xs text-slate-400">PostgreSQL and more</p>
+                </div>
+                <ChevronLeft className="w-4 h-4 text-slate-300 rotate-180 flex-shrink-0" />
+              </button>
 
-          {/* Documents List */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="text-sm text-slate-900 font-medium">
-                Documents ({documents.length})
-              </h3>
-              {documents.length > 0 && (
-                <button
-                  onClick={deleteAllDocuments}
-                  className="text-xs text-red-600 hover:text-red-700 flex items-center gap-1"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                  Delete All
-                </button>
+              {/* Database connections list */}
+              {dbClients.length > 0 && (
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
+                      Databases · {dbClients.length}
+                    </span>
+                  </div>
+                  <div className="space-y-1">
+                    {dbClients.map((client) => (
+                      <div
+                        key={client.id}
+                        className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition group"
+                      >
+                        <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0">
+                          <img
+                            src={LOGO_MAP[client.db_type] ?? ""}
+                            alt={client.db_type}
+                            className="w-5 h-5 object-contain"
+                          />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-slate-800 truncate">{client.name}</p>
+                          <p className="text-xs text-slate-400 capitalize">{client.db_type} · {client.status}</p>
+                        </div>
+                        <div className="flex items-center gap-1.5 flex-shrink-0">
+                          <button
+                            onClick={() => handleIngest(client.id)}
+                            disabled={ingesting === client.id || client.status === "inactive"}
+                            title="Ingest schema to knowledge base"
+                            className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-orange-100 hover:text-[#FF8F00] text-slate-500 transition disabled:opacity-40 disabled:cursor-not-allowed"
+                          >
+                            {ingesting === client.id ? (
+                              <Loader2 className="w-3 h-3 animate-spin" />
+                            ) : (
+                              <Database className="w-3 h-3" />
+                            )}
+                            {ingesting === client.id ? "Ingesting…" : "Ingest"}
+                          </button>
+                          <button
+                            onClick={() => handleDeleteClient(client.id)}
+                            disabled={deletingClient === client.id}
+                            className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition disabled:opacity-30"
+                            title="Delete connection"
+                          >
+                            {deletingClient === client.id ? (
+                              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                            ) : (
+                              <Trash2 className="w-3.5 h-3.5" />
+                            )}
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
               )}
-            </div>
 
-            {loadingDocs ? (
-              <div className="flex justify-center py-8">
-                <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
-              </div>
-            ) : docsError ? (
-              <p className="text-center text-sm text-red-600 py-4">
-                {docsError}
-              </p>
-            ) : documents.length === 0 ? (
-              <div className="text-center py-8">
-                <FileText className="w-12 h-12 text-slate-300 mx-auto mb-3" />
-                <p className="text-slate-500 text-sm">
-                  No documents uploaded yet
-                </p>
-                <p className="text-xs text-slate-400 mt-1">
-                  Upload files to build your knowledge base
-                </p>
-              </div>
-            ) : (
-              documents.map((doc) => (
-                <div
-                  key={doc.id}
-                  className="bg-slate-50 rounded-lg p-3 border border-slate-200"
-                >
-                  <div className="flex items-start gap-3">
-                    <FileText className="w-8 h-8 text-red-500 flex-shrink-0 mt-0.5" />
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between gap-2">
+              {/* Documents list */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
+                    Documents · {documents.length}
+                  </span>
+                  {documents.length > 0 && (
+                    <button
+                      onClick={deleteAllDocuments}
+                      className="text-xs text-slate-400 hover:text-red-500 flex items-center gap-1 transition"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                      Clear all
+                    </button>
+                  )}
+                </div>
+
+                {loadingDocs ? (
+                  <div className="flex justify-center py-10">
+                    <Loader2 className="w-5 h-5 animate-spin text-slate-300" />
+                  </div>
+                ) : docsError ? (
+                  <p className="text-center text-xs text-red-500 py-6">{docsError}</p>
+                ) : documents.length === 0 ? (
+                  <div className="text-center py-10">
+                    <div className="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center mx-auto mb-3">
+                      <FileText className="w-5 h-5 text-slate-300" />
+                    </div>
+                    <p className="text-sm text-slate-400">No documents yet</p>
+                    <p className="text-xs text-slate-300 mt-0.5">Upload files to get started</p>
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    {documents.map((doc) => (
+                      <div
+                        key={doc.id}
+                        className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition group"
+                      >
+                        <div className="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0">
+                          <FileText className="w-4 h-4 text-red-400" />
+                        </div>
                         <div className="flex-1 min-w-0">
-                          <h4 className="text-slate-900 font-medium truncate text-sm">
+                          <p className="text-sm font-medium text-slate-800 truncate">
                             {doc.filename}
-                          </h4>
-                          <p className="text-xs text-slate-500 mt-0.5">
-                            {formatFileSize(doc.file_size)} •{" "}
-                            {formatDate(doc.created_at)}
                           </p>
+                          <p className="text-xs text-slate-400">
+                            {formatFileSize(doc.file_size)} · {formatDate(doc.created_at)}
+                          </p>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          {renderStatus(doc)}
+                          <button
+                            onClick={() => handleDeleteDocument(doc.id)}
+                            disabled={deleting === doc.id}
+                            className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition disabled:opacity-30"
+                            title="Delete"
+                          >
+                            {deleting === doc.id ? (
+                              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                            ) : (
+                              <Trash2 className="w-3.5 h-3.5" />
+                            )}
+                          </button>
                         </div>
-                        <button
-                          onClick={() => handleDeleteDocument(doc.id)}
-                          disabled={deleting === doc.id}
-                          className="text-slate-400 hover:text-red-600 transition flex-shrink-0 disabled:opacity-50"
-                          title="Delete document"
-                        >
-                          {deleting === doc.id ? (
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                          ) : (
-                            <Trash2 className="w-4 h-4" />
-                          )}
-                        </button>
                       </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* ── VIEW: db-select ── */}
+          {view === "db-select" && (
+            <div className="space-y-4">
+              <p className="text-sm text-slate-400">
+                Choose a database to connect to your knowledge base.
+              </p>
+              {loadingDbTypes ? (
+                <div className="flex justify-center py-10">
+                  <Loader2 className="w-5 h-5 animate-spin text-slate-300" />
+                </div>
+              ) : (
+                <div className="grid grid-cols-3 gap-2">
+                  {dbTypeInfos.map((info) => {
+                    const active = info.status === "active";
+                    return (
+                      <button
+                        key={info.db_type}
+                        disabled={!active}
+                        onClick={() => {
+                          if (!active) return;
+                          setSelectedDbType(info.db_type);
+                          const defaults = Object.fromEntries(
+                            info.fields.map((f) => [
+                              f.name,
+                              f.default != null
+                                ? f.default
+                                : f.type === "integer" ? 0 : f.type === "boolean" ? false : "",
+                            ])
+                          );
+                          setDbForm(defaults);
+                          setView("db-credentials");
+                        }}
+                        className={[
+                          "relative flex flex-col items-center gap-2 p-4 rounded-xl border transition text-xs font-medium",
+                          active
+                            ? "border-slate-200 hover:border-[#FF8F00] hover:bg-orange-50/50 text-slate-700 cursor-pointer"
+                            : "border-slate-100 bg-slate-50/60 text-slate-400 cursor-not-allowed",
+                        ].join(" ")}
+                      >
+                        <img
+                          src={LOGO_MAP[info.logo] ?? ""}
+                          alt={info.display_name}
+                          className={`w-8 h-8 object-contain ${!active ? "opacity-30 grayscale" : ""}`}
+                        />
+                        <span>{info.display_name}</span>
+                        {!active && (
+                          <span className="absolute top-1.5 right-1.5 text-[9px] bg-slate-200 text-slate-400 px-1.5 py-0.5 rounded-full">
+                            Soon
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ── VIEW: db-credentials ── */}
+          {view === "db-credentials" && (
+            <div className="space-y-4">
 
-                      <div className="mt-2 flex items-center gap-2">
-                        {renderStatus(doc)}
+              {/* Selected DB chip */}
+              {selectedDbInfo && (
+                <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                  <img src={LOGO_MAP[selectedDbInfo.logo] ?? ""} alt={selectedDbInfo.display_name} className="w-5 h-5 object-contain" />
+                  <span className="text-sm font-medium text-slate-700">{selectedDbInfo.display_name}</span>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-3">
+                {/* Connection Name */}
+                <div className="col-span-2">
+                  <label className="block text-xs font-medium text-slate-500 mb-1">
+                    Connection Name <span className="text-red-400">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="Production DB"
+                    value={connectionName}
+                    onChange={(e) => setConnectionName(e.target.value)}
+                    className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#FF8F00]/25 focus:border-[#FF8F00] placeholder:text-slate-300 transition"
+                  />
+                </div>
+
+                {/* Dynamic fields from API */}
+                {selectedDbInfo?.fields.map((field) => (
+                  <div
+                    key={field.name}
+                    className={field.name === "host" || field.name === "service_account_json" ? "col-span-2" : ""}
+                  >
+                    <label className="block text-xs font-medium text-slate-500 mb-1 capitalize">
+                      {field.name.replace(/_/g, " ")}
+                      {field.required && <span className="text-red-400 ml-0.5">*</span>}
+                    </label>
+
+                    {field.type === "select" ? (
+                      <select
+                        value={String(dbForm[field.name] ?? field.default ?? "")}
+                        onChange={(e) => setDbForm((f) => ({ ...f, [field.name]: e.target.value }))}
+                        className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#FF8F00]/25 focus:border-[#FF8F00] transition"
+                      >
+                        {field.options?.map((opt) => (
+                          <option key={opt} value={opt}>{opt}</option>
+                        ))}
+                      </select>
+                    ) : field.type === "boolean" ? (
+                      <div className="flex items-center gap-2 pt-1">
+                        <input
+                          type="checkbox"
+                          id={`field-${field.name}`}
+                          checked={Boolean(dbForm[field.name] ?? field.default ?? false)}
+                          onChange={(e) => setDbForm((f) => ({ ...f, [field.name]: e.target.checked }))}
+                          className="w-4 h-4 accent-[#FF8F00]"
+                        />
+                        <label htmlFor={`field-${field.name}`} className="text-xs text-slate-500">
+                          {field.description}
+                        </label>
                       </div>
-                    </div>
+                    ) : field.name === "service_account_json" ? (
+                      <textarea
+                        rows={4}
+                        placeholder={field.description}
+                        value={String(dbForm[field.name] ?? "")}
+                        onChange={(e) => setDbForm((f) => ({ ...f, [field.name]: e.target.value }))}
+                        className="w-full border border-slate-200 rounded-lg px-3 py-2 text-xs bg-white focus:outline-none focus:ring-2 focus:ring-[#FF8F00]/25 focus:border-[#FF8F00] placeholder:text-slate-300 transition font-mono"
+                      />
+                    ) : (
+                      <input
+                        type={field.sensitive ? "password" : field.type === "integer" ? "number" : "text"}
+                        placeholder={field.default != null ? String(field.default) : field.description}
+                        value={String(dbForm[field.name] ?? "")}
+                        onChange={(e) =>
+                          setDbForm((f) => ({
+                            ...f,
+                            [field.name]: field.type === "integer"
+                              ? (parseInt(e.target.value, 10) || 0)
+                              : e.target.value,
+                          }))
+                        }
+                        className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#FF8F00]/25 focus:border-[#FF8F00] placeholder:text-slate-300 transition"
+                      />
+                    )}
                   </div>
-                </div>
-              ))
-            )}
-          </div>
+                ))}
+              </div>
+
+              <button
+                onClick={handleDbConnect}
+                disabled={
+                  connecting ||
+                  !connectionName.trim() ||
+                  (selectedDbInfo?.fields.filter((f) => f.required).some((f) => !dbForm[f.name]) ?? false)
+                }
+                className="w-full flex items-center justify-center gap-2 bg-[#FF8F00] hover:bg-[#FF6F00] active:bg-[#E65100] text-white py-2.5 rounded-xl text-sm font-medium transition disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {connecting ? (
+                  <><Loader2 className="w-4 h-4 animate-spin" /> Connecting…</>
+                ) : (
+                  "Connect"
+                )}
+              </button>
+            </div>
+          )}
         </div>
 
         {/* Footer */}
-        <div className="border-t border-slate-200 p-3 bg-slate-50 rounded-b-xl">
-          <p className="text-[10px] text-slate-500 text-center">
-            Supported formats: PDF, DOCX, TXT
+        <div className="px-5 py-3 border-t border-slate-100">
+          <p className="text-[10px] text-slate-300 text-center">
+            {view === "main"
+              ? "Supported formats: PDF, CSV, XLSX"
+              : view === "db-select"
+              ? "More integrations coming soon"
+              : "Credentials are encrypted at rest"}
           </p>
         </div>
+
       </div>
     </div>
   );

src/app/components/Login.tsx

@@ -43,28 +43,149 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#BAE6FD] via-[#A7F3D0] to-[#FDE68A]">
-      <div className="w-full max-w-md px-4">
-        <div className="bg-white rounded-xl shadow-2xl p-6 border border-slate-200">
-          <div className="flex items-center justify-center mb-6">
-            <div className="bg-gradient-to-br from-[#059669] to-[#047857] p-2.5 rounded-lg">
-              <LogIn className="w-6 h-6 text-white" />
+    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#1e2d45]">
+
+      {/* ── Dot grid texture ── */}
+      <div
+        className="absolute inset-0 z-0 opacity-20"
+        style={{
+          backgroundImage: "radial-gradient(circle, #334155 1px, transparent 1px)",
+          backgroundSize: "28px 28px",
+        }}
+      />
+
+      {/* ── Gradient orbs — glowing on dark bg ── */}
+      {/* Cyan — top left */}
+      <div
+        className="absolute -top-32 -left-32 w-[520px] h-[520px] rounded-full blur-3xl opacity-[0.18] animate-pulse"
+        style={{ background: "#0ea5e9", animationDuration: "5s" }}
+      />
+      {/* Orange — bottom right */}
+      <div
+        className="absolute -bottom-40 -right-40 w-[560px] h-[560px] rounded-full blur-3xl opacity-[0.16] animate-pulse"
+        style={{ background: "#f97316", animationDuration: "7s" }}
+      />
+      {/* Green — top right */}
+      <div
+        className="absolute -top-24 right-1/4 w-[320px] h-[320px] rounded-full blur-3xl opacity-[0.12] animate-pulse"
+        style={{ background: "#10b981", animationDuration: "9s" }}
+      />
+      {/* Purple accent — center left */}
+      <div
+        className="absolute top-1/2 -left-40 w-[360px] h-[360px] rounded-full blur-3xl opacity-[0.10] animate-pulse"
+        style={{ background: "#8b5cf6", animationDuration: "11s" }}
+      />
+
+      {/* ── Neural network — bottom left ── */}
+      <svg
+        className="absolute bottom-8 left-8 opacity-[0.35] animate-float-slow"
+        width="200" height="200" viewBox="0 0 200 200"
+        fill="none" xmlns="http://www.w3.org/2000/svg"
+      >
+        <line x1="20" y1="150" x2="65" y2="90" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="20" y1="150" x2="55" y2="170" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="65" y1="90" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="65" y1="90" x2="130" y2="55" stroke="#10b981" strokeWidth="1"/>
+        <line x1="110" y1="125" x2="170" y2="105" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="130" y1="55" x2="170" y2="105" stroke="#10b981" strokeWidth="1"/>
+        <line x1="130" y1="55" x2="175" y2="30" stroke="#10b981" strokeWidth="1"/>
+        <line x1="55" y1="170" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="175" y1="30" x2="170" y2="105" stroke="#10b981" strokeWidth="1"/>
+        <circle cx="20" cy="150" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
+        <circle cx="55" cy="170" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
+        <circle cx="65" cy="90" r="5" fill="#0ea5e9" fillOpacity="0.9"/>
+        <circle cx="110" cy="125" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
+        <circle cx="130" cy="55" r="5" fill="#10b981" fillOpacity="0.9"/>
+        <circle cx="170" cy="105" r="3.5" fill="#10b981" fillOpacity="0.7"/>
+        <circle cx="175" cy="30" r="2.5" fill="#10b981" fillOpacity="0.5"/>
+      </svg>
+
+      {/* ── Neural network — top right ── */}
+      <svg
+        className="absolute top-8 right-8 opacity-[0.30] animate-float"
+        style={{ "--float-rotate": "0deg" } as React.CSSProperties}
+        width="180" height="180" viewBox="0 0 180 180"
+        fill="none" xmlns="http://www.w3.org/2000/svg"
+      >
+        <line x1="160" y1="30" x2="115" y2="80" stroke="#f97316" strokeWidth="1"/>
+        <line x1="115" y1="80" x2="70" y2="55" stroke="#f97316" strokeWidth="1"/>
+        <line x1="115" y1="80" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="70" y1="55" x2="25" y2="90" stroke="#f97316" strokeWidth="1"/>
+        <line x1="25" y1="90" x2="80" y2="155" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="80" y1="155" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1"/>
+        <line x1="70" y1="55" x2="30" y2="25" stroke="#f97316" strokeWidth="1"/>
+        <circle cx="160" cy="30" r="3.5" fill="#f97316" fillOpacity="0.7"/>
+        <circle cx="115" cy="80" r="5" fill="#f97316" fillOpacity="0.9"/>
+        <circle cx="70" cy="55" r="3.5" fill="#f97316" fillOpacity="0.7"/>
+        <circle cx="130" cy="135" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
+        <circle cx="25" cy="90" r="3.5" fill="#0ea5e9" fillOpacity="0.7"/>
+        <circle cx="80" cy="155" r="2.5" fill="#0ea5e9" fillOpacity="0.5"/>
+        <circle cx="30" cy="25" r="2.5" fill="#f97316" fillOpacity="0.5"/>
+      </svg>
+
+      {/* ── Large ring — top right ── */}
+      <div className="absolute -top-24 -right-24 w-80 h-80 rounded-full border border-slate-700 animate-float-slow opacity-50" />
+      <div className="absolute -top-10 -right-10 w-48 h-48 rounded-full border border-slate-800 opacity-60" />
+
+      {/* ── Rotated square — bottom left ── */}
+      <div
+        className="absolute bottom-16 left-16 w-24 h-24 border border-slate-200 opacity-50 animate-float"
+        style={{ transform: "rotate(20deg)", "--float-rotate": "20deg" } as React.CSSProperties}
+      />
+      <div
+        className="absolute bottom-28 left-28 w-12 h-12 border border-slate-200 opacity-40"
+        style={{ transform: "rotate(45deg)" }}
+      />
+
+      {/* ── Hexagon — bottom right ── */}
+      <svg
+        className="absolute bottom-12 right-16 opacity-[0.35] animate-float"
+        style={{ "--float-rotate": "0deg", animationDelay: "2s" } as React.CSSProperties}
+        width="80" height="80" viewBox="0 0 160 160"
+        fill="none" xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M 140 80 L 110 132 L 50 132 L 20 80 L 50 28 L 110 28 Z"
+          stroke="#f97316" strokeWidth="1.5" fill="none"
+        />
+        <path
+          d="M 122 80 L 101 114 L 59 114 L 38 80 L 59 46 L 101 46 Z"
+          stroke="#f97316" strokeWidth="1" strokeOpacity="0.5" fill="none"
+        />
+      </svg>
+
+      {/* ── Rotated square — bottom left ── */}
+      <div
+        className="absolute bottom-16 left-16 w-24 h-24 border border-slate-700 opacity-50 animate-float"
+        style={{ transform: "rotate(20deg)", "--float-rotate": "20deg" } as React.CSSProperties}
+      />
+      <div
+        className="absolute bottom-28 left-28 w-12 h-12 border border-slate-700 opacity-30"
+        style={{ transform: "rotate(45deg)" }}
+      />
+
+      {/* ── Small floating dots ── */}
+      <div className="absolute top-1/4 left-12 w-2 h-2 rounded-full bg-sky-400 opacity-60 animate-float" style={{ animationDelay: "1s" }} />
+      <div className="absolute top-1/3 right-20 w-1.5 h-1.5 rounded-full bg-orange-400 opacity-60 animate-float-slow" style={{ animationDelay: "3s" }} />
+      <div className="absolute bottom-1/3 left-1/4 w-1.5 h-1.5 rounded-full bg-emerald-400 opacity-60 animate-float" style={{ animationDelay: "0.5s" }} />
+      <div className="absolute top-2/3 right-1/3 w-1 h-1 rounded-full bg-violet-400 opacity-50 animate-float-slow" style={{ animationDelay: "4s" }} />
+
+      {/* ── Login card ── */}
+      <div className="relative z-10 w-full max-w-md px-4">
+        <div className="bg-white rounded-2xl shadow-2xl shadow-black/40 p-7 border border-white/10">
+
+          {/* Brand logo */}
+          <div className="flex flex-col items-center gap-3 mb-6">
+            <img src="/logo.png" alt="DataEyond" className="w-12 h-12 object-contain" />
+            <div className="text-center">
+              <h1 className="text-xl font-semibold text-slate-900">Welcome Back</h1>
+              <p className="text-slate-400 text-sm mt-0.5">Sign in to continue to your chatbot</p>
             </div>
           </div>
 
-          <h1 className="text-xl text-center mb-1 text-slate-900">
-            Welcome Back
-          </h1>
-          <p className="text-center text-slate-500 text-sm mb-6">
-            Sign in to continue to your chatbot
-          </p>
-
           <form onSubmit={handleLogin} className="space-y-4">
             <div>
-              <label
-                htmlFor="email"
-                className="block text-xs mb-1.5 text-slate-700"
-              >
+              <label htmlFor="email" className="block text-xs font-medium mb-1.5 text-slate-600">
                 Email Address
               </label>
               <input
@@ -72,17 +193,14 @@ export default function Login() {
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#4FC3F7] focus:border-transparent transition"
+                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                 placeholder="you@example.com"
                 disabled={isLoading}
               />
             </div>
 
             <div>
-              <label
-                htmlFor="password"
-                className="block text-xs mb-1.5 text-slate-700"
-              >
+              <label htmlFor="password" className="block text-xs font-medium mb-1.5 text-slate-600">
                 Password
               </label>
               <input
@@ -90,14 +208,14 @@ export default function Login() {
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#4FC3F7] focus:border-transparent transition"
+                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                 placeholder="Enter your password"
                 disabled={isLoading}
               />
             </div>
 
             {error && (
-              <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-xs">
+              <div className="bg-red-50 border border-red-100 text-red-600 px-3 py-2 rounded-xl text-xs">
                 {error}
               </div>
             )}
@@ -105,14 +223,14 @@ export default function Login() {
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-[#059669] to-[#047857] text-white py-2.5 text-sm rounded-lg hover:from-[#047857] hover:to-[#065F46] transition font-medium disabled:opacity-60 disabled:cursor-not-allowed"
+              className="w-full flex items-center justify-center gap-2 bg-[#059669] hover:bg-[#047857] active:bg-[#065F46] text-white py-2.5 text-sm rounded-xl transition font-medium disabled:opacity-50 disabled:cursor-not-allowed mt-1"
             >
               {isLoading ? (
                 <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
                 <LogIn className="w-4 h-4" />
               )}
-              {isLoading ? "Signing in..." : "Sign In"}
+              {isLoading ? "Signing in…" : "Sign In"}
             </button>
           </form>
         </div>

src/app/components/Main.tsx

@@ -604,9 +604,79 @@ export default function Main() {
       </div>
 
       {/* Main Content */}
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex-1 flex flex-col min-w-0 relative">
+
+        {/* ── Subtle background — harmonizes with Login page ── */}
+        <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+          {/* Dot grid */}
+          <div
+            className="absolute inset-0 opacity-[0.13]"
+            style={{
+              backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)",
+              backgroundSize: "28px 28px",
+            }}
+          />
+          {/* Cyan orb — top right */}
+          <div
+            className="absolute -top-28 -right-28 w-80 h-80 rounded-full blur-3xl opacity-[0.08]"
+            style={{ background: "#0ea5e9" }}
+          />
+          {/* Orange orb — bottom left */}
+          <div
+            className="absolute -bottom-28 -left-28 w-96 h-96 rounded-full blur-3xl opacity-[0.07]"
+            style={{ background: "#f97316" }}
+          />
+          {/* Green orb — center left */}
+          <div
+            className="absolute top-1/2 -left-32 w-64 h-64 rounded-full blur-3xl opacity-[0.05]"
+            style={{ background: "#10b981" }}
+          />
+          {/* Neural network — bottom right */}
+          <svg
+            className="absolute bottom-20 right-4 opacity-[0.07]"
+            width="160" height="160" viewBox="0 0 200 200"
+            fill="none" xmlns="http://www.w3.org/2000/svg"
+          >
+            <line x1="20" y1="150" x2="65" y2="90" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="20" y1="150" x2="55" y2="170" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="65" y1="90" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="65" y1="90" x2="130" y2="55" stroke="#10b981" strokeWidth="1.2"/>
+            <line x1="110" y1="125" x2="170" y2="105" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="130" y1="55" x2="170" y2="105" stroke="#10b981" strokeWidth="1.2"/>
+            <line x1="130" y1="55" x2="175" y2="30" stroke="#10b981" strokeWidth="1.2"/>
+            <line x1="55" y1="170" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="175" y1="30" x2="170" y2="105" stroke="#10b981" strokeWidth="1.2"/>
+            <circle cx="20" cy="150" r="4" fill="#0ea5e9"/>
+            <circle cx="55" cy="170" r="3" fill="#0ea5e9"/>
+            <circle cx="65" cy="90" r="5.5" fill="#0ea5e9"/>
+            <circle cx="110" cy="125" r="4" fill="#0ea5e9"/>
+            <circle cx="130" cy="55" r="5.5" fill="#10b981"/>
+            <circle cx="170" cy="105" r="4" fill="#10b981"/>
+            <circle cx="175" cy="30" r="3" fill="#10b981"/>
+          </svg>
+          {/* Neural network — top left (small) */}
+          <svg
+            className="absolute top-16 left-4 opacity-[0.06]"
+            width="110" height="110" viewBox="0 0 180 180"
+            fill="none" xmlns="http://www.w3.org/2000/svg"
+          >
+            <line x1="160" y1="30" x2="115" y2="80" stroke="#f97316" strokeWidth="1.2"/>
+            <line x1="115" y1="80" x2="70" y2="55" stroke="#f97316" strokeWidth="1.2"/>
+            <line x1="115" y1="80" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="70" y1="55" x2="25" y2="90" stroke="#f97316" strokeWidth="1.2"/>
+            <line x1="25" y1="90" x2="80" y2="155" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <line x1="80" y1="155" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1.2"/>
+            <circle cx="160" cy="30" r="4" fill="#f97316"/>
+            <circle cx="115" cy="80" r="5.5" fill="#f97316"/>
+            <circle cx="70" cy="55" r="4" fill="#f97316"/>
+            <circle cx="130" cy="135" r="3" fill="#0ea5e9"/>
+            <circle cx="25" cy="90" r="4" fill="#0ea5e9"/>
+            <circle cx="80" cy="155" r="3" fill="#0ea5e9"/>
+          </svg>
+        </div>
+
         {/* Header */}
-        <div className="bg-white border-b border-slate-200 p-3 flex items-center gap-3">
+        <div className="relative z-10 bg-white border-b border-slate-200 p-3 flex items-center gap-3">
           <button
             onClick={() => setSidebarOpen(!sidebarOpen)}
             className="text-slate-600 hover:text-slate-900 transition"
@@ -630,7 +700,7 @@ export default function Main() {
         </div>
 
         {/* Messages */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div className="relative z-10 flex-1 overflow-y-auto p-4 space-y-4">
           {currentChat?.messages.length === 0 && (
             <div className="flex items-center justify-center h-full">
               <div className="text-center">
@@ -734,7 +804,7 @@ export default function Main() {
         </div>
 
         {/* Input Area */}
-        <div className="bg-white border-t border-slate-200 p-3 shadow-[0_-2px_10px_rgba(0,0,0,0.06)]">
+        <div className="relative z-10 bg-white border-t border-slate-200 p-3 shadow-[0_-2px_10px_rgba(0,0,0,0.06)]">
           <div className="max-w-4xl mx-auto">
             <div className="flex gap-2 items-end">
               <textarea

src/services/api.ts

@@ -151,6 +151,74 @@ export const deleteDocument = (userId: string, documentId: string) =>
     { method: "DELETE" }
   );
 
+// ─── Database Clients ─────────────────────────────────────────────────────────
+
+export type DbType = "postgres" | "mysql" | "sqlserver" | "supabase" | "bigquery" | "snowflake";
+
+export interface DbTypeField {
+  name: string;
+  type: "string" | "integer" | "select" | "boolean";
+  required: boolean;
+  default: string | number | boolean | null;
+  description: string;
+  options?: string[];
+  sensitive?: boolean;
+}
+
+export interface DbTypeInfo {
+  db_type: DbType;
+  display_name: string;
+  logo: string;
+  status: "active" | "inactive";
+  message: string | null;
+  fields: DbTypeField[];
+}
+
+export interface DatabaseClient {
+  id: string;
+  user_id: string;
+  name: string;
+  db_type: DbType;
+  status: "active" | "inactive";
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface IngestResponse {
+  status: string;
+  client_id: string;
+  chunks_ingested: number;
+}
+
+export const getDatabaseClientTypes = (): Promise<DbTypeInfo[]> =>
+  request<DbTypeInfo[]>("/api/v1/database-clients/dbtypes");
+
+export const connectDatabase = (
+  userId: string,
+  dbType: DbType,
+  name: string,
+  credentials: Record<string, string | number | boolean>
+): Promise<DatabaseClient> =>
+  request<DatabaseClient>(`/api/v1/database-clients?user_id=${userId}`, {
+    method: "POST",
+    body: JSON.stringify({ name, db_type: dbType, credentials }),
+  });
+
+export const getDatabaseClients = (userId: string): Promise<DatabaseClient[]> =>
+  request<DatabaseClient[]>(`/api/v1/database-clients/${userId}`);
+
+export const deleteDatabaseClient = (clientId: string, userId: string) =>
+  request<{ status: string; message: string }>(
+    `/api/v1/database-clients/${clientId}?user_id=${userId}`,
+    { method: "DELETE" }
+  );
+
+export const ingestDatabaseClient = (clientId: string, userId: string): Promise<IngestResponse> =>
+  request<IngestResponse>(
+    `/api/v1/database-clients/${clientId}/ingest?user_id=${userId}`,
+    { method: "POST" }
+  );
+
 // ─── Chat ─────────────────────────────────────────────────────────────────────
 
 export const streamChat = (

src/styles/theme.css

@@ -179,3 +179,21 @@
     line-height: 1.5;
   }
 }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(var(--float-rotate, 0deg)); }
+  50%       { transform: translateY(-14px) rotate(var(--float-rotate, 0deg)); }
+}
+
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0px); }
+  50%       { transform: translateY(-8px); }
+}
+
+.animate-float {
+  animation: float 7s ease-in-out infinite;
+}
+
+.animate-float-slow {
+  animation: float-slow 10s ease-in-out infinite;
+}