From 4ead15502a7aaa24cd09b2477409dea1c277a494 Mon Sep 17 00:00:00 2001
From: Lftobs <tobbytobs1@gmail.com>
Date: Tue, 6 Oct 2026 12:38:07 +0100
Subject: [PATCH 1/3] feat(databases): add inline MongoDB document editing

---
 .../databases/__tests__/validation.test.ts    |  17 ++
 apps/api/src/databases/validation.ts          |   6 +
 .../databases/CreateDatabaseDialog.tsx        | 284 ------------------
 .../components/databases/DatabaseOverview.tsx |  48 +--
 .../studio/mongo/MongoCollectionSidebar.tsx   |  10 +-
 .../studio/mongo/MongoDocumentCard.tsx        |   4 +-
 .../studio/mongo/MongoDocumentModal.tsx       |  10 +-
 .../studio/mongo/MongoDocumentsTableView.tsx  | 276 +++++++++++++++++
 .../studio/mongo/MongoDocumentsView.tsx       | 145 ++++-----
 .../studio/mongo/MongoIndexesView.tsx         |  18 +-
 .../databases/studio/mongo/MongoShellView.tsx |  12 +-
 .../databases/studio/mongo/MongoStudio.tsx    |   6 +-
 .../databases/studio/redis/RedisCliView.tsx   | 109 +++----
 .../studio/redis/RedisServerInfoView.tsx      | 257 ----------------
 .../databases/studio/redis/RedisStudio.tsx    |  20 +-
 apps/web/src/routes/Databases.tsx             |  11 +-
 16 files changed, 444 insertions(+), 789 deletions(-)
 delete mode 100644 apps/web/src/components/databases/CreateDatabaseDialog.tsx
 create mode 100644 apps/web/src/components/databases/studio/mongo/MongoDocumentsTableView.tsx
 delete mode 100644 apps/web/src/components/databases/studio/redis/RedisServerInfoView.tsx

diff --git a/apps/api/src/databases/__tests__/validation.test.ts b/apps/api/src/databases/__tests__/validation.test.ts
index 6e66820..d626c89 100644
--- a/apps/api/src/databases/__tests__/validation.test.ts
+++ b/apps/api/src/databases/__tests__/validation.test.ts
@@ -25,6 +25,23 @@ describe("database input validation", () => {
 		expect(result.ok).toBe(true);
 	});
 
+	it("preserves explicit backup settings including disabled backup", () => {
+		const result = validateDatabaseCreate({
+			name: "orders",
+			type: "postgresql",
+			publicAccess: false,
+			backupEnabled: false,
+			backupSchedule: "0 0 * * *",
+			backupRetention: 14,
+		});
+		expect(result.ok).toBe(true);
+		if (result.ok) {
+			expect(result.input.backupEnabled).toBe(false);
+			expect(result.input.backupSchedule).toBe("0 0 * * *");
+			expect(result.input.backupRetention).toBe(14);
+		}
+	});
+
 	it("validates IPv4 CIDRs and rejects IPv6 ranges", () => {
 		expect(isValidCidr("10.0.0.0/8")).toBe(true);
 		expect(isValidCidr("203.0.113.4")).toBe(true);
diff --git a/apps/api/src/databases/validation.ts b/apps/api/src/databases/validation.ts
index 718ff12..5db70bb 100644
--- a/apps/api/src/databases/validation.ts
+++ b/apps/api/src/databases/validation.ts
@@ -77,6 +77,12 @@ export const validateDatabaseCreate = (
 			publicAccess,
 			allowPublicAccessFromAnywhere,
 			allowedCidrs,
+			backupEnabled: body.backupEnabled !== undefined ? Boolean(body.backupEnabled) : true,
+			backupSchedule:
+				typeof body.backupSchedule === "string" && body.backupSchedule.trim()
+					? body.backupSchedule.trim()
+					: "0 */6 * * *",
+			backupRetention: typeof body.backupRetention === "number" && body.backupRetention > 0 ? body.backupRetention : 7,
 		},
 	};
 };
diff --git a/apps/web/src/components/databases/CreateDatabaseDialog.tsx b/apps/web/src/components/databases/CreateDatabaseDialog.tsx
deleted file mode 100644
index 3d171b3..0000000
--- a/apps/web/src/components/databases/CreateDatabaseDialog.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import { Cpu, Database, HardDrive, ShieldAlert } from "lucide-react";
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import * as api from "../../api/client";
-import type { DatabaseType, Project } from "../../types";
-import { Button } from "../ui/button";
-import { DATABASE_ENGINES } from "../ui/DatabaseSelect";
-import { getDatabaseLogo } from "../logos/DatabaseLogos";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
-import { Input } from "../ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-import { ServerSelect } from "./ServerSelect";
-
-interface CreateDatabaseDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	projects: Project[];
-	defaultProjectId?: string | null;
-	onCreated: () => void;
-}
-
-export function CreateDatabaseDialog({
-	open,
-	onOpenChange,
-	projects,
-	defaultProjectId = null,
-	onCreated,
-}: CreateDatabaseDialogProps) {
-	const [name, setName] = useState("");
-	const [projectId, setProjectId] = useState(defaultProjectId ?? "standalone");
-	const [type, setType] = useState<DatabaseType>("postgresql");
-	const [version, setVersion] = useState("16");
-	const [cpu, setCpu] = useState("1");
-	const [memory, setMemory] = useState("512");
-	const [storage, setStorage] = useState("10240");
-	const [allowAnywhere, setAllowAnywhere] = useState(false);
-	const [cidrs, setCidrs] = useState("");
-	const [serverId, setServerId] = useState("local");
-	const [isCreating, setIsCreating] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const { data: servers = [] } = useQuery({
-		queryKey: ["servers"],
-		queryFn: () => api.listServers().catch(() => []),
-	});
-
-	const create = async () => {
-		setIsCreating(true);
-		setError(null);
-		try {
-			await api.createDatabase(projectId === "standalone" ? null : projectId, type, {
-				name,
-				version,
-				serverId,
-				cpuLimit: Number(cpu),
-				memoryLimitMb: Number(memory),
-				storageLimitMb: Number(storage),
-				publicAccess: true,
-				allowPublicAccessFromAnywhere: allowAnywhere,
-				allowedCidrs: cidrs
-					.split(/[\n,]/)
-					.map((value) => value.trim())
-					.filter(Boolean),
-			});
-			onCreated();
-			onOpenChange(false);
-			setName("");
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "Database creation failed");
-		} finally {
-			setIsCreating(false);
-		}
-	};
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="max-h-[90vh] overflow-y-auto border-border/80 bg-card/95 backdrop-blur-xl sm:max-w-[560px] rounded-3xl shadow-2xl">
-				<DialogHeader className="border-b border-border/40 pb-4">
-					<div className="flex items-center gap-3">
-						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/10 text-orange-500 ring-1 ring-orange-500/20">
-							<Database className="h-5 w-5" />
-						</div>
-						<div>
-							<DialogTitle className="text-lg font-bold text-foreground">Provision Managed Database</DialogTitle>
-							<DialogDescription className="text-xs text-muted-foreground mt-0.5">
-								Public access endpoint enabled with optional CIDR network IP allowlisting.
-							</DialogDescription>
-						</div>
-					</div>
-				</DialogHeader>
-
-				<div className="space-y-5 pt-2">
-					<div className="space-y-1.5">
-						<label htmlFor="database-name" className="text-xs font-medium text-foreground">
-							Database Display Name
-						</label>
-						<Input
-							id="database-name"
-							value={name}
-							onChange={(event) => setName(event.target.value)}
-							placeholder="e.g. Production PostgreSQL DB"
-							className="bg-background/50 border-border/80 text-xs focus:ring-orange-500/50"
-						/>
-					</div>
-
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-						<div className="space-y-1.5">
-							<label htmlFor="database-project" className="text-xs font-medium text-foreground">
-								Project Attachment
-							</label>
-							<Select value={projectId} onValueChange={setProjectId}>
-								<SelectTrigger id="database-project" className="bg-background/50 border-border/80 text-xs">
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent className="bg-card border-border text-xs">
-									<SelectItem value="standalone">Standalone Database</SelectItem>
-									{projects.map((project) => (
-										<SelectItem key={project.id} value={project.id}>
-											{project.name}
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-						</div>
-
-						<div className="space-y-1.5">
-							<label htmlFor="database-engine" className="text-xs font-medium text-foreground">
-								Database Engine
-							</label>
-							<Select value={type} onValueChange={(val) => {
-								setType(val as DatabaseType);
-								const engine = DATABASE_ENGINES.find((e) => e.type === val);
-								if (engine) setVersion(engine.defaultVersion);
-							}}>
-								<SelectTrigger id="database-engine" className="bg-background/50 border-border/80 text-xs">
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent className="bg-card border-border text-xs">
-									{DATABASE_ENGINES.map((engine) => (
-										<SelectItem key={engine.type} value={engine.type}>
-											<div className="flex items-center gap-2">
-												{getDatabaseLogo(engine.type, "h-4 w-4")}
-												<span>{engine.name}</span>
-											</div>
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-						</div>
-					</div>
-
-					<ServerSelect id="dialog-database-server" value={serverId} onChange={setServerId} servers={servers} />
-
-					<div className="space-y-1.5">
-						<label htmlFor="database-version" className="text-xs font-medium text-foreground">
-							Engine Version
-						</label>
-						<Select value={version} onValueChange={setVersion}>
-							<SelectTrigger id="database-version" className="bg-background/50 border-border/80 text-xs font-mono">
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent className="bg-card border-border text-xs">
-								{DATABASE_ENGINES.find((e) => e.type === type)?.versions.map((v) => (
-									<SelectItem key={v} value={v}>
-										{v}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-					</div>
-
-					<div className="rounded-2xl border border-border/60 bg-black/30 p-4 space-y-3">
-						<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
-							<Cpu className="h-3.5 w-3.5 text-orange-400" />
-							Resource Limits & Storage Allocation
-						</span>
-						<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-							<div className="space-y-1">
-								<label htmlFor="database-cpu" className="text-[11px] font-medium text-muted-foreground">
-									CPU Cores
-								</label>
-								<Input
-									id="database-cpu"
-									type="number"
-									min="0.1"
-									step="0.1"
-									value={cpu}
-									onChange={(event) => setCpu(event.target.value)}
-									className="bg-background/50 border-border/80 text-xs font-mono"
-								/>
-							</div>
-							<div className="space-y-1">
-								<label htmlFor="database-memory" className="text-[11px] font-medium text-muted-foreground">
-									RAM (MB)
-								</label>
-								<Input
-									id="database-memory"
-									type="number"
-									min="64"
-									value={memory}
-									onChange={(event) => setMemory(event.target.value)}
-									className="bg-background/50 border-border/80 text-xs font-mono"
-								/>
-							</div>
-							<div className="space-y-1">
-								<label htmlFor="database-storage" className="text-[11px] font-medium text-muted-foreground">
-									Storage (MB)
-								</label>
-								<Input
-									id="database-storage"
-									type="number"
-									min="64"
-									value={storage}
-									onChange={(event) => setStorage(event.target.value)}
-									className="bg-background/50 border-border/80 text-xs font-mono"
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="rounded-2xl border border-border/80 bg-black/40 p-4 space-y-3">
-						<div className="flex items-center justify-between gap-4">
-							<div>
-								<p className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-									<HardDrive className="h-3.5 w-3.5 text-blue-400" />
-									Allow Access From Anywhere
-								</p>
-								<p className="mt-0.5 text-[11px] text-muted-foreground">
-									Uncheck to restrict connection requests to specific IP ranges.
-								</p>
-							</div>
-							<input
-								type="checkbox"
-								checked={allowAnywhere}
-								onChange={(event) => setAllowAnywhere(event.target.checked)}
-								className="h-4 w-4 accent-orange-500 rounded"
-								aria-label="Allow public database access from anywhere"
-							/>
-						</div>
-
-						{!allowAnywhere && (
-							<div className="space-y-1.5 pt-2 border-t border-border/40">
-								<label htmlFor="database-cidrs" className="text-xs font-medium text-foreground">
-									Allowed CIDR Addresses / IPs
-								</label>
-								<Input
-									id="database-cidrs"
-									value={cidrs}
-									onChange={(event) => setCidrs(event.target.value)}
-									placeholder="203.0.113.4/32, 10.0.0.0/8"
-									className="bg-background/50 border-border/80 font-mono text-xs"
-								/>
-							</div>
-						)}
-					</div>
-
-					{error && (
-						<p role="alert" className="text-xs text-red-400 flex items-center gap-1.5">
-							<ShieldAlert className="h-3.5 w-3.5" />
-							{error}
-						</p>
-					)}
-
-					<div className="flex flex-col-reverse sm:flex-row justify-end gap-2 border-t border-border/40 pt-4">
-						<Button
-							variant="ghost"
-							onClick={() => onOpenChange(false)}
-							className="text-xs text-muted-foreground w-full sm:w-auto"
-						>
-							Cancel
-						</Button>
-						<Button
-							disabled={isCreating || !name.trim() || (!allowAnywhere && !cidrs.trim())}
-							onClick={create}
-							className="bg-orange-500 hover:bg-orange-600 text-white font-medium text-xs px-5 shadow-md w-full sm:w-auto"
-						>
-							{isCreating ? "Provisioning..." : "Provision Database"}
-						</Button>
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/apps/web/src/components/databases/DatabaseOverview.tsx b/apps/web/src/components/databases/DatabaseOverview.tsx
index 72da21b..41c6fed 100644
--- a/apps/web/src/components/databases/DatabaseOverview.tsx
+++ b/apps/web/src/components/databases/DatabaseOverview.tsx
@@ -12,70 +12,46 @@ interface DatabaseOverviewProps {
 
 export function DatabaseOverview({ database, creds }: DatabaseOverviewProps) {
 	const [showPassword, setShowPassword] = useState(false);
-	const [copied, setCopied] = useState<string | null>(null);
+	const [copied, setCopied] = useState(false);
 
-	const copyToClipboard = (text: string, label: string) => {
+	const connectionUrl = creds?.externalConnectionString || creds?.internalConnectionString || database.connectionString;
+
+	const copyToClipboard = (text: string) => {
 		navigator.clipboard.writeText(text);
-		setCopied(label);
-		setTimeout(() => setCopied(null), 2000);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
 	};
 
 	return (
 		<Card className="border-border/60 bg-card/60 backdrop-blur-md shadow-xl rounded-3xl p-6 space-y-6">
 			<CardHeader className="p-0 border-b border-border/40 pb-4">
-				<CardTitle className="text-base font-bold text-foreground">Connection Strings & Credentials</CardTitle>
+				<CardTitle className="text-base font-bold text-foreground">Connection String &amp; Credentials</CardTitle>
 				<CardDescription className="text-xs text-muted-foreground">
-					Use internal mesh URL inside Dequel project containers, or external endpoint for remote clients.
+					Connect your applications and database clients using this connection URL.
 				</CardDescription>
 			</CardHeader>
 
 			<CardContent className="p-0 space-y-6">
 				<div className="space-y-3">
-					<label className="text-xs font-bold text-foreground uppercase tracking-wider">
-						Internal Connection String
-					</label>
+					<label className="text-xs font-bold text-foreground uppercase tracking-wider">Connection URL</label>
 					<div className="flex items-center gap-2">
 						<Input
 							readOnly
-							value={creds?.internalConnectionString || database.connectionString}
+							value={connectionUrl}
 							className="bg-black/40 border-border/60 font-mono text-xs text-orange-400 rounded-xl h-10"
 						/>
 						<Button
 							variant="outline"
 							size="sm"
-							onClick={() => copyToClipboard(creds?.internalConnectionString || database.connectionString, "internal")}
+							onClick={() => copyToClipboard(connectionUrl)}
 							className="h-10 px-3 rounded-xl border-border/60 text-xs gap-1.5"
 						>
 							<Copy className="h-3.5 w-3.5" />
-							{copied === "internal" ? "Copied" : "Copy"}
+							{copied ? "Copied" : "Copy"}
 						</Button>
 					</div>
 				</div>
 
-				{creds?.externalConnectionString && (
-					<div className="space-y-3 pt-4 border-t border-border/40">
-						<label className="text-xs font-bold text-foreground uppercase tracking-wider">
-							External Connection String
-						</label>
-						<div className="flex items-center gap-2">
-							<Input
-								readOnly
-								value={creds.externalConnectionString}
-								className="bg-black/40 border-border/60 font-mono text-xs text-blue-400 rounded-xl h-10"
-							/>
-							<Button
-								variant="outline"
-								size="sm"
-								onClick={() => copyToClipboard(creds.externalConnectionString!, "external")}
-								className="h-10 px-3 rounded-xl border-border/60 text-xs gap-1.5"
-							>
-								<Copy className="h-3.5 w-3.5" />
-								{copied === "external" ? "Copied" : "Copy"}
-							</Button>
-						</div>
-					</div>
-				)}
-
 				<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-border/40 font-mono text-xs">
 					<div className="p-3 bg-black/20 rounded-xl border border-border/40">
 						<span className="text-muted-foreground text-[10px] uppercase block">Username</span>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoCollectionSidebar.tsx b/apps/web/src/components/databases/studio/mongo/MongoCollectionSidebar.tsx
index 0db36aa..24ff32e 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoCollectionSidebar.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoCollectionSidebar.tsx
@@ -55,7 +55,7 @@ export function MongoCollectionSidebar({
 			<div className="space-y-3">
 				<div className="flex items-center justify-between">
 					<span className="text-xs font-bold text-foreground uppercase tracking-wider flex items-center gap-1.5">
-						<Boxes className="h-4 w-4 text-emerald-400" />
+						<Boxes className="h-4 w-4 text-orange-400" />
 						Collections
 					</span>
 					<div className="flex items-center gap-1">
@@ -63,7 +63,7 @@ export function MongoCollectionSidebar({
 							variant="ghost"
 							size="sm"
 							onClick={() => setShowCreateModal(true)}
-							className="h-7 w-7 p-0 text-muted-foreground hover:text-emerald-400 rounded-lg"
+							className="h-7 w-7 p-0 text-muted-foreground hover:text-orange-400 rounded-lg"
 							title="New Collection"
 						>
 							<Plus className="h-4 w-4" />
@@ -104,7 +104,7 @@ export function MongoCollectionSidebar({
 									onClick={() => onSelectCollection(c.name)}
 									className={`w-full text-left font-mono text-xs px-3 py-2.5 rounded-xl transition-all flex items-center justify-between border ${
 										isSelected
-											? "bg-gradient-to-r from-emerald-500/20 to-teal-500/10 border-emerald-500/50 text-emerald-300 font-semibold shadow-md"
+											? "bg-gradient-to-r from-orange-500/20 to-amber-500/10 border-orange-500/50 text-orange-400 font-semibold shadow-md"
 											: "bg-background/20 border-transparent text-foreground hover:bg-white/5"
 									}`}
 								>
@@ -133,7 +133,7 @@ export function MongoCollectionSidebar({
 					<form onSubmit={handleCreate} className="space-y-4">
 						<DialogHeader>
 							<DialogTitle className="text-base font-semibold flex items-center gap-2">
-								<Boxes className="h-4 w-4 text-emerald-400" /> Create Collection
+								<Boxes className="h-4 w-4 text-orange-400" /> Create Collection
 							</DialogTitle>
 							<DialogDescription className="text-xs text-muted-foreground">
 								Add a new document collection to the MongoDB database.
@@ -167,7 +167,7 @@ export function MongoCollectionSidebar({
 								type="submit"
 								size="sm"
 								disabled={isCreating || !newCollectionName.trim()}
-								className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-medium"
+								className="bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium"
 							>
 								{isCreating ? "Creating…" : "Create Collection"}
 							</Button>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoDocumentCard.tsx b/apps/web/src/components/databases/studio/mongo/MongoDocumentCard.tsx
index 5ad45b3..598f53f 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoDocumentCard.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoDocumentCard.tsx
@@ -62,12 +62,12 @@ export function MongoDocumentCard({ doc, index, onEdit, onDelete }: MongoDocumen
 	};
 
 	return (
-		<div className="rounded-2xl border border-border/70 bg-black/40 backdrop-blur-sm overflow-hidden shadow-md hover:border-emerald-500/30 transition-all">
+		<div className="rounded-2xl border border-border/70 bg-black/40 backdrop-blur-sm overflow-hidden shadow-md hover:border-orange-500/30 transition-all">
 			<div className="flex items-center justify-between px-4 py-2.5 border-b border-border/40 bg-zinc-900/60 font-mono text-xs">
 				<div className="flex items-center gap-2">
 					<Badge
 						variant="outline"
-						className="border-emerald-500/30 bg-emerald-500/10 text-emerald-400 text-[10px] font-mono px-2 py-0.5"
+						className="border-orange-500/30 bg-orange-500/10 text-orange-400 text-[10px] font-mono px-2 py-0.5"
 					>
 						_id: {docId}
 					</Badge>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoDocumentModal.tsx b/apps/web/src/components/databases/studio/mongo/MongoDocumentModal.tsx
index 015b692..a5c953a 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoDocumentModal.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoDocumentModal.tsx
@@ -1,4 +1,4 @@
-import { Braces, Check, Copy, FileJson } from "lucide-react";
+import { Braces, FileJson } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "../../../ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../../ui/dialog";
@@ -76,9 +76,9 @@ export function MongoDocumentModal({
 				<DialogHeader className="border-b border-border/40 pb-3">
 					<div className="flex items-center justify-between">
 						<DialogTitle className="text-base font-semibold flex items-center gap-2">
-							<FileJson className="h-4 w-4 text-emerald-400" />
+							<FileJson className="h-4 w-4 text-orange-400" />
 							{isEdit ? "Edit Document" : "Insert Document"} —{" "}
-							<span className="font-mono text-emerald-300">{collectionName}</span>
+							<span className="font-mono text-orange-400">{collectionName}</span>
 						</DialogTitle>
 						<Button
 							type="button"
@@ -103,7 +103,7 @@ export function MongoDocumentModal({
 						onChange={(e) => setJsonText(e.target.value)}
 						rows={14}
 						placeholder='{\n  "name": "Example",\n  "status": "active"\n}'
-						className="w-full bg-black/50 border border-border/80 rounded-xl p-4 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-emerald-500/50 resize-y"
+						className="w-full bg-black/50 border border-border/80 rounded-xl p-4 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-orange-500/50 resize-y"
 					/>
 
 					{error && <p className="text-xs text-red-400 font-mono">{error}</p>}
@@ -118,7 +118,7 @@ export function MongoDocumentModal({
 						size="sm"
 						onClick={handleSave}
 						disabled={isSaving || !jsonText.trim()}
-						className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-medium"
+						className="bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium"
 					>
 						{isSaving ? "Saving…" : isEdit ? "Save Changes" : "Insert Document"}
 					</Button>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoDocumentsTableView.tsx b/apps/web/src/components/databases/studio/mongo/MongoDocumentsTableView.tsx
new file mode 100644
index 0000000..02cf4ae
--- /dev/null
+++ b/apps/web/src/components/databases/studio/mongo/MongoDocumentsTableView.tsx
@@ -0,0 +1,276 @@
+import { Braces, Check, Edit3, Trash2, X } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "../../../ui/badge";
+import { Button } from "../../../ui/button";
+
+interface MongoDocumentsTableViewProps {
+	docs: Record<string, unknown>[];
+	columns: string[];
+	onInsertDocument: (doc: Record<string, unknown>) => Promise<void>;
+	onUpdateDocument: (doc: Record<string, unknown>) => Promise<void>;
+	onDeleteDocument: (id: string) => Promise<void>;
+	onOpenEditModal: (doc: Record<string, unknown>) => void;
+	isAddingInline: boolean;
+	onCancelAddInline: () => void;
+}
+
+const parseFieldValue = (v: string): unknown => {
+	const trimmed = v.trim();
+	if (trimmed === "" || trimmed === "null") return null;
+	if (trimmed === "true") return true;
+	if (trimmed === "false") return false;
+	if (!isNaN(Number(trimmed)) && trimmed !== "") return Number(trimmed);
+	if ((trimmed.startsWith("{") && trimmed.endsWith("}")) || (trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+		try {
+			return JSON.parse(trimmed);
+		} catch {
+			return v;
+		}
+	}
+	return v;
+};
+
+export function MongoDocumentsTableView({
+	docs,
+	columns,
+	onInsertDocument,
+	onUpdateDocument,
+	onDeleteDocument,
+	onOpenEditModal,
+	isAddingInline,
+	onCancelAddInline,
+}: MongoDocumentsTableViewProps) {
+	const [newRowValues, setNewRowValues] = useState<Record<string, string>>({});
+	const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
+	const [editingRowValues, setEditingRowValues] = useState<Record<string, string>>({});
+	const [isSaving, setIsSaving] = useState(false);
+
+	const handleSaveInlineAdd = async () => {
+		setIsSaving(true);
+		try {
+			const doc: Record<string, unknown> = {};
+			Object.entries(newRowValues).forEach(([k, v]) => {
+				if (v !== undefined && v !== "") {
+					doc[k] = parseFieldValue(v);
+				}
+			});
+			await onInsertDocument(doc);
+			setNewRowValues({});
+			onCancelAddInline();
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	const handleStartInlineEdit = (idx: number, doc: Record<string, unknown>) => {
+		const init: Record<string, string> = {};
+		columns.forEach((col) => {
+			const val = doc[col];
+			init[col] = val === null || val === undefined ? "" : typeof val === "object" ? JSON.stringify(val) : String(val);
+		});
+		setEditingRowIndex(idx);
+		setEditingRowValues(init);
+	};
+
+	const handleSaveInlineEdit = async (idx: number) => {
+		setIsSaving(true);
+		try {
+			const originalDoc = docs[idx];
+			const doc: Record<string, unknown> = { ...originalDoc };
+			Object.entries(editingRowValues).forEach(([k, v]) => {
+				if (k === "_id") return;
+				doc[k] = parseFieldValue(v);
+			});
+			await onUpdateDocument(doc);
+			setEditingRowIndex(null);
+			setEditingRowValues({});
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	return (
+		<div className="overflow-x-auto rounded-2xl border border-border/50 bg-black/30 font-mono text-xs">
+			<table className="w-full text-left border-collapse">
+				<thead className="bg-zinc-900/80 text-muted-foreground border-b border-border/50">
+					<tr>
+						{columns.map((col) => (
+							<th key={col} className="p-3 font-semibold text-foreground whitespace-nowrap">
+								{col}
+							</th>
+						))}
+						<th className="p-3 text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody className="divide-y divide-border/20">
+					{/* Inline Adding Row */}
+					{isAddingInline && (
+						<tr className="bg-orange-500/15 border-b border-orange-500/40">
+							{columns.map((col) => {
+								if (col === "_id") {
+									return (
+										<td key={col} className="p-2 text-orange-400 italic text-[11px]">
+											(auto generated)
+										</td>
+									);
+								}
+								return (
+									<td key={col} className="p-2">
+										<input
+											type="text"
+											value={newRowValues[col] || ""}
+											onChange={(e) => setNewRowValues({ ...newRowValues, [col]: e.target.value })}
+											placeholder={`enter ${col}...`}
+											className="w-full bg-black/80 border border-orange-500/60 focus:border-orange-400 text-xs font-mono text-orange-300 px-2.5 py-1 rounded-lg focus:outline-none"
+										/>
+									</td>
+								);
+							})}
+							<td className="p-2 text-right whitespace-nowrap">
+								<div className="flex items-center justify-end gap-1">
+									<Button
+										size="sm"
+										onClick={handleSaveInlineAdd}
+										disabled={isSaving}
+										className="h-7 px-2.5 bg-orange-500 hover:bg-orange-600 text-white text-xs rounded-lg gap-1"
+									>
+										<Check className="h-3.5 w-3.5" /> Save
+									</Button>
+									<Button
+										size="sm"
+										variant="ghost"
+										onClick={() => {
+											setNewRowValues({});
+											onCancelAddInline();
+										}}
+										className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground rounded-lg"
+									>
+										<X className="h-3.5 w-3.5" />
+									</Button>
+								</div>
+							</td>
+						</tr>
+					)}
+
+					{/* Document Rows */}
+					{docs.map((doc, idx) => {
+						const docId = String(doc._id ?? doc.id ?? idx);
+						const isEditing = editingRowIndex === idx;
+
+						if (isEditing) {
+							return (
+								<tr key={docId} className="bg-orange-500/15 border-b border-orange-500/40">
+									{columns.map((col) => {
+										if (col === "_id") {
+											return (
+												<td key={col} className="p-2 text-muted-foreground font-mono text-[11px] truncate max-w-xs">
+													{String(doc._id)}
+												</td>
+											);
+										}
+										return (
+											<td key={col} className="p-2">
+												<input
+													type="text"
+													value={editingRowValues[col] ?? ""}
+													onChange={(e) => setEditingRowValues({ ...editingRowValues, [col]: e.target.value })}
+													className="w-full bg-black/80 border border-orange-500/60 focus:border-orange-400 text-xs font-mono text-orange-300 px-2.5 py-1 rounded-lg focus:outline-none"
+												/>
+											</td>
+										);
+									})}
+									<td className="p-2 text-right whitespace-nowrap">
+										<div className="flex items-center justify-end gap-1">
+											<Button
+												size="sm"
+												onClick={() => handleSaveInlineEdit(idx)}
+												disabled={isSaving}
+												className="h-7 px-2.5 bg-orange-500 hover:bg-orange-600 text-white text-xs rounded-lg gap-1"
+											>
+												<Check className="h-3.5 w-3.5" /> Save
+											</Button>
+											<Button
+												size="sm"
+												variant="ghost"
+												onClick={() => {
+													setEditingRowIndex(null);
+													setEditingRowValues({});
+												}}
+												className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground rounded-lg"
+											>
+												<X className="h-3.5 w-3.5" />
+											</Button>
+										</div>
+									</td>
+								</tr>
+							);
+						}
+
+						return (
+							<tr key={docId} className="hover:bg-white/5 transition-colors">
+								{columns.map((col) => {
+									const val = doc[col];
+									const isObject = typeof val === "object" && val !== null;
+									return (
+										<td key={col} className="p-3 max-w-xs truncate">
+											{isObject ? (
+												<Badge
+													variant="outline"
+													className="text-[10px] border-border/60 bg-card font-mono truncate max-w-full"
+												>
+													{JSON.stringify(val)}
+												</Badge>
+											) : val === null || val === undefined ? (
+												<span className="text-zinc-600">null</span>
+											) : typeof val === "boolean" ? (
+												<span className="text-purple-400">{String(val)}</span>
+											) : typeof val === "number" ? (
+												<span className="text-amber-400">{val}</span>
+											) : (
+												<span className="text-zinc-200">{String(val)}</span>
+											)}
+										</td>
+									);
+								})}
+								<td className="p-3 text-right whitespace-nowrap">
+									<div className="flex items-center justify-end gap-1">
+										<Button
+											type="button"
+											variant="ghost"
+											size="sm"
+											onClick={() => handleStartInlineEdit(idx, doc)}
+											className="h-7 w-7 p-0 text-orange-400 hover:text-orange-300"
+											title="Inline Edit"
+										>
+											<Edit3 className="h-3 w-3" />
+										</Button>
+										<Button
+											type="button"
+											variant="ghost"
+											size="sm"
+											onClick={() => onOpenEditModal(doc)}
+											className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+											title="Edit Full JSON"
+										>
+											<Braces className="h-3 w-3" />
+										</Button>
+										<Button
+											type="button"
+											variant="ghost"
+											size="sm"
+											onClick={() => onDeleteDocument(docId)}
+											className="h-7 w-7 p-0 text-red-400 hover:text-red-300"
+											title="Delete Document"
+										>
+											<Trash2 className="h-3 w-3" />
+										</Button>
+									</div>
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/databases/studio/mongo/MongoDocumentsView.tsx b/apps/web/src/components/databases/studio/mongo/MongoDocumentsView.tsx
index e65b40f..68e847d 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoDocumentsView.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoDocumentsView.tsx
@@ -1,23 +1,21 @@
 import {
+	Braces,
 	ChevronLeft,
 	ChevronRight,
 	Database,
-	Edit3,
 	FileJson,
 	Filter,
-	Layers,
 	Plus,
 	RefreshCw,
 	SlidersHorizontal,
 	Table as TableIcon,
-	Trash2,
 } from "lucide-react";
 import { useState } from "react";
 import type { QueryExecResult } from "../../../../types";
-import { Badge } from "../../../ui/badge";
 import { Button } from "../../../ui/button";
 import { MongoDocumentCard } from "./MongoDocumentCard";
 import { MongoDocumentModal } from "./MongoDocumentModal";
+import { MongoDocumentsTableView } from "./MongoDocumentsTableView";
 
 interface MongoDocumentsViewProps {
 	selectedCollection: string | null;
@@ -54,19 +52,29 @@ export function MongoDocumentsView({
 	onUpdateDocument,
 	onDeleteDocument,
 }: MongoDocumentsViewProps) {
-	const [viewMode, setViewMode] = useState<"json" | "table">("json");
+	const [viewMode, setViewMode] = useState<"json" | "table">("table");
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [editingDoc, setEditingDoc] = useState<Record<string, unknown> | null>(null);
+	const [isAddingInline, setIsAddingInline] = useState(false);
 
 	const docs = dataResult?.rows ?? [];
 	const columns = dataResult?.columns ?? [];
 
-	const handleOpenInsert = () => {
+	const handleStartAdd = () => {
+		if (columns.length === 0 || viewMode === "json") {
+			setEditingDoc(null);
+			setIsModalOpen(true);
+			return;
+		}
+		setIsAddingInline(true);
+	};
+
+	const handleOpenInsertModal = () => {
 		setEditingDoc(null);
 		setIsModalOpen(true);
 	};
 
-	const handleOpenEdit = (doc: Record<string, unknown>) => {
+	const handleOpenEditModal = (doc: Record<string, unknown>) => {
 		setEditingDoc(doc);
 		setIsModalOpen(true);
 	};
@@ -82,7 +90,7 @@ export function MongoDocumentsView({
 	if (isLoading) {
 		return (
 			<div className="flex h-64 items-center justify-center border border-border/60 bg-card/60 rounded-3xl backdrop-blur-md">
-				<RefreshCw className="h-6 w-6 animate-spin text-emerald-500" />
+				<RefreshCw className="h-6 w-6 animate-spin text-orange-500" />
 			</div>
 		);
 	}
@@ -95,36 +103,47 @@ export function MongoDocumentsView({
 					<div className="flex items-center gap-1.5 bg-black/40 p-1 rounded-xl border border-border/40">
 						<button
 							type="button"
-							onClick={() => setViewMode("json")}
+							onClick={() => setViewMode("table")}
 							className={`px-3 py-1 text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 ${
-								viewMode === "json"
-									? "bg-emerald-600 text-white shadow-sm"
+								viewMode === "table"
+									? "bg-orange-500 text-white shadow-sm"
 									: "text-muted-foreground hover:text-foreground"
 							}`}
 						>
-							<FileJson className="h-3.5 w-3.5" /> JSON Cards
+							<TableIcon className="h-3.5 w-3.5" /> Table View
 						</button>
 						<button
 							type="button"
-							onClick={() => setViewMode("table")}
+							onClick={() => setViewMode("json")}
 							className={`px-3 py-1 text-xs font-medium rounded-lg transition-all flex items-center gap-1.5 ${
-								viewMode === "table"
-									? "bg-emerald-600 text-white shadow-sm"
+								viewMode === "json"
+									? "bg-orange-500 text-white shadow-sm"
 									: "text-muted-foreground hover:text-foreground"
 							}`}
 						>
-							<TableIcon className="h-3.5 w-3.5" /> Table View
+							<FileJson className="h-3.5 w-3.5" /> JSON Cards
 						</button>
 					</div>
 
 					<div className="flex items-center gap-2">
+						{viewMode === "table" && (
+							<Button
+								size="sm"
+								onClick={handleStartAdd}
+								disabled={!selectedCollection || isAddingInline}
+								className="bg-orange-500 hover:bg-orange-600 text-white text-xs rounded-xl gap-1.5 shadow-md"
+							>
+								<Plus className="h-3.5 w-3.5" /> Add Document
+							</Button>
+						)}
 						<Button
 							size="sm"
-							onClick={handleOpenInsert}
+							variant="outline"
+							onClick={handleOpenInsertModal}
 							disabled={!selectedCollection}
-							className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs rounded-xl gap-1.5 shadow-md"
+							className="border-border/60 text-xs rounded-xl gap-1.5"
 						>
-							<Plus className="h-3.5 w-3.5" /> Insert Document
+							<Braces className="h-3.5 w-3.5 text-orange-400" /> JSON Insert
 						</Button>
 					</div>
 				</div>
@@ -167,7 +186,7 @@ export function MongoDocumentsView({
 			</div>
 
 			{/* Documents List */}
-			{docs.length === 0 ? (
+			{docs.length === 0 && !isAddingInline ? (
 				<div className="py-12 flex flex-col items-center justify-center text-center space-y-3">
 					<Database className="h-10 w-10 text-muted-foreground/40" />
 					<div className="space-y-1">
@@ -178,8 +197,8 @@ export function MongoDocumentsView({
 					</div>
 					<Button
 						size="sm"
-						onClick={handleOpenInsert}
-						className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs rounded-xl gap-1.5 mt-2"
+						onClick={handleStartAdd}
+						className="bg-orange-500 hover:bg-orange-600 text-white text-xs rounded-xl gap-1.5 mt-2"
 					>
 						<Plus className="h-3.5 w-3.5" /> Insert First Document
 					</Button>
@@ -191,82 +210,22 @@ export function MongoDocumentsView({
 							key={String(doc._id ?? doc.id ?? idx)}
 							doc={doc}
 							index={idx}
-							onEdit={handleOpenEdit}
+							onEdit={handleOpenEditModal}
 							onDelete={onDeleteDocument}
 						/>
 					))}
 				</div>
 			) : (
-				/* Table View */
-				<div className="overflow-x-auto rounded-2xl border border-border/50 bg-black/30 font-mono text-xs">
-					<table className="w-full text-left border-collapse">
-						<thead className="bg-zinc-900/80 text-muted-foreground border-b border-border/50">
-							<tr>
-								{columns.map((col) => (
-									<th key={col} className="p-3 font-semibold text-foreground whitespace-nowrap">
-										{col}
-									</th>
-								))}
-								<th className="p-3 text-right">Actions</th>
-							</tr>
-						</thead>
-						<tbody className="divide-y divide-border/20">
-							{docs.map((doc, idx) => {
-								const docId = String(doc._id ?? doc.id ?? idx);
-								return (
-									<tr key={docId} className="hover:bg-white/5 transition-colors">
-										{columns.map((col) => {
-											const val = doc[col];
-											const isObject = typeof val === "object" && val !== null;
-											return (
-												<td key={col} className="p-3 max-w-xs truncate">
-													{isObject ? (
-														<Badge
-															variant="outline"
-															className="text-[10px] border-border/60 bg-card font-mono truncate max-w-full"
-														>
-															{JSON.stringify(val)}
-														</Badge>
-													) : val === null || val === undefined ? (
-														<span className="text-zinc-600">null</span>
-													) : typeof val === "boolean" ? (
-														<span className="text-purple-400">{String(val)}</span>
-													) : typeof val === "number" ? (
-														<span className="text-amber-400">{val}</span>
-													) : (
-														<span className="text-zinc-200">{String(val)}</span>
-													)}
-												</td>
-											);
-										})}
-										<td className="p-3 text-right whitespace-nowrap">
-											<div className="flex items-center justify-end gap-1">
-												<Button
-													type="button"
-													variant="ghost"
-													size="sm"
-													onClick={() => handleOpenEdit(doc)}
-													className="h-7 w-7 p-0 text-orange-400 hover:text-orange-300"
-												>
-													<Edit3 className="h-3 w-3" />
-												</Button>
-												<Button
-													type="button"
-													variant="ghost"
-													size="sm"
-													onClick={() => onDeleteDocument(docId)}
-													className="h-7 w-7 p-0 text-red-400 hover:text-red-300"
-												>
-													<Trash2 className="h-3 w-3" />
-												</Button>
-											</div>
-										</td>
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
-				</div>
+				<MongoDocumentsTableView
+					docs={docs}
+					columns={columns}
+					onInsertDocument={onInsertDocument}
+					onUpdateDocument={onUpdateDocument}
+					onDeleteDocument={onDeleteDocument}
+					onOpenEditModal={handleOpenEditModal}
+					isAddingInline={isAddingInline}
+					onCancelAddInline={() => setIsAddingInline(false)}
+				/>
 			)}
 
 			{/* Pagination Footer */}
diff --git a/apps/web/src/components/databases/studio/mongo/MongoIndexesView.tsx b/apps/web/src/components/databases/studio/mongo/MongoIndexesView.tsx
index 050d712..dc41583 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoIndexesView.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoIndexesView.tsx
@@ -83,7 +83,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 			<div className="flex items-center justify-between border-b border-border/40 pb-3">
 				<div>
 					<h3 className="text-xs font-bold text-foreground flex items-center gap-2">
-						<Layers className="h-4 w-4 text-emerald-400" />
+						<Layers className="h-4 w-4 text-orange-400" />
 						Indexes for &quot;{selectedCollection || "collection"}&quot;
 					</h3>
 					<p className="text-[11px] text-muted-foreground mt-0.5">
@@ -104,7 +104,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 						size="sm"
 						onClick={() => setShowCreateModal(true)}
 						disabled={!selectedCollection}
-						className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs rounded-xl gap-1.5 shadow-md h-8"
+						className="bg-orange-500 hover:bg-orange-600 text-white text-xs rounded-xl gap-1.5 shadow-md h-8"
 					>
 						<Plus className="h-3.5 w-3.5" /> Create Index
 					</Button>
@@ -115,7 +115,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 
 			{isLoading ? (
 				<div className="py-12 text-center text-xs text-muted-foreground flex items-center justify-center gap-2">
-					<RefreshCw className="h-4 w-4 animate-spin text-emerald-400" /> Loading indexes…
+					<RefreshCw className="h-4 w-4 animate-spin text-orange-400" /> Loading indexes…
 				</div>
 			) : indexes.length === 0 ? (
 				<p className="text-xs text-muted-foreground py-8 text-center">No indexes found on this collection.</p>
@@ -138,12 +138,12 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 										<td className="p-3 font-semibold text-foreground">
 											{idx.name}
 											{isPrimary && (
-												<Badge variant="outline" className="ml-2 text-[9px] border-emerald-500/30 text-emerald-400">
+												<Badge variant="outline" className="ml-2 text-[9px] border-orange-500/30 text-orange-400">
 													primary
 												</Badge>
 											)}
 										</td>
-										<td className="p-3 text-emerald-300">{JSON.stringify(idx.key)}</td>
+										<td className="p-3 text-orange-300">{JSON.stringify(idx.key)}</td>
 										<td className="p-3">
 											{idx.unique && (
 												<Badge variant="outline" className="text-[9px] border-orange-500/30 text-orange-400 mr-1.5">
@@ -184,7 +184,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 					<form onSubmit={handleCreateIndex} className="space-y-4">
 						<DialogHeader>
 							<DialogTitle className="text-base font-semibold flex items-center gap-2">
-								<Layers className="h-4 w-4 text-emerald-400" /> Create Index
+								<Layers className="h-4 w-4 text-orange-400" /> Create Index
 							</DialogTitle>
 							<DialogDescription className="text-xs text-muted-foreground">
 								Specify the index key pattern (1 for ascending, -1 for descending).
@@ -197,7 +197,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 								value={indexKeyJson}
 								onChange={(e) => setIndexKeyJson(e.target.value)}
 								rows={4}
-								className="w-full bg-black/50 border border-border/80 rounded-xl p-3 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-emerald-500/50"
+								className="w-full bg-black/50 border border-border/80 rounded-xl p-3 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-orange-500/50"
 							/>
 						</div>
 
@@ -207,7 +207,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 								id="unique-chk"
 								checked={isUnique}
 								onChange={(e) => setIsUnique(e.target.checked)}
-								className="rounded border-border text-emerald-600 focus:ring-emerald-500 h-4 w-4"
+								className="rounded border-border text-orange-500 focus:ring-orange-500 h-4 w-4"
 							/>
 							<label htmlFor="unique-chk" className="text-xs font-medium text-foreground">
 								Unique index (enforce unique values)
@@ -228,7 +228,7 @@ export function MongoIndexesView({ database, selectedCollection }: MongoIndexesV
 								type="submit"
 								size="sm"
 								disabled={isCreating || !indexKeyJson.trim()}
-								className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-medium"
+								className="bg-orange-500 hover:bg-orange-600 text-white text-xs font-medium"
 							>
 								{isCreating ? "Creating…" : "Create Index"}
 							</Button>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoShellView.tsx b/apps/web/src/components/databases/studio/mongo/MongoShellView.tsx
index f2b295b..9fb0aab 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoShellView.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoShellView.tsx
@@ -1,4 +1,4 @@
-import { Play, Sparkles, Terminal } from "lucide-react";
+import { Play, Terminal } from "lucide-react";
 import type { QueryExecResult } from "../../../../types";
 import { Badge } from "../../../ui/badge";
 import { Button } from "../../../ui/button";
@@ -37,7 +37,7 @@ export function MongoShellView({
 			<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border/40 pb-3">
 				<div>
 					<span className="text-xs font-bold text-foreground flex items-center gap-2">
-						<Terminal className="h-4 w-4 text-emerald-400" />
+						<Terminal className="h-4 w-4 text-orange-400" />
 						MongoDB Shell Console
 					</span>
 					<p className="text-[11px] text-muted-foreground mt-0.5">
@@ -49,7 +49,7 @@ export function MongoShellView({
 					onClick={onExecute}
 					disabled={isExecuting || !queryText.trim()}
 					size="sm"
-					className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs h-8 px-4 rounded-xl shadow-md gap-1.5 self-start sm:self-auto"
+					className="bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs h-8 px-4 rounded-xl shadow-md gap-1.5 self-start sm:self-auto"
 				>
 					<Play className="h-3.5 w-3.5 fill-current" />
 					{isExecuting ? "Executing…" : "Run Query"}
@@ -64,7 +64,7 @@ export function MongoShellView({
 						key={snip.label}
 						type="button"
 						onClick={() => onQueryChange(snip.code)}
-						className="rounded-lg border border-border/60 bg-black/40 px-2 py-1 text-[11px] font-mono text-zinc-300 hover:text-emerald-400 hover:border-emerald-500/40 transition-colors"
+						className="rounded-lg border border-border/60 bg-black/40 px-2 py-1 text-[11px] font-mono text-zinc-300 hover:text-orange-400 hover:border-orange-500/40 transition-colors"
 					>
 						{snip.label}
 					</button>
@@ -76,7 +76,7 @@ export function MongoShellView({
 				onChange={(e) => onQueryChange(e.target.value)}
 				rows={8}
 				placeholder={`db.${col}.find({}).limit(10)`}
-				className="w-full bg-black/50 border border-border/60 rounded-2xl p-4 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-emerald-500/50 min-h-[160px] resize-y"
+				className="w-full bg-black/50 border border-border/60 rounded-2xl p-4 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-orange-500/50 min-h-[160px] resize-y"
 			/>
 
 			{error && (
@@ -88,7 +88,7 @@ export function MongoShellView({
 			{result && (
 				<div className="space-y-2 pt-2">
 					<div className="flex items-center gap-2">
-						<Badge variant="outline" className="text-[10px] font-mono border-emerald-500/30 text-emerald-400">
+						<Badge variant="outline" className="text-[10px] font-mono border-orange-500/30 text-orange-400">
 							{result.rows.length} {result.rows.length === 1 ? "result" : "results"} ({result.executionTimeMs} ms)
 						</Badge>
 					</div>
diff --git a/apps/web/src/components/databases/studio/mongo/MongoStudio.tsx b/apps/web/src/components/databases/studio/mongo/MongoStudio.tsx
index e59c388..839083d 100644
--- a/apps/web/src/components/databases/studio/mongo/MongoStudio.tsx
+++ b/apps/web/src/components/databases/studio/mongo/MongoStudio.tsx
@@ -166,7 +166,7 @@ export function MongoStudio({ database }: MongoStudioProps) {
 							onClick={() => setActiveTab("documents")}
 							className={`px-4 py-1.5 text-xs font-semibold rounded-full transition-all flex items-center gap-1.5 ${
 								activeTab === "documents"
-									? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-md shadow-emerald-600/20"
+									? "bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-md shadow-orange-500/20"
 									: "text-muted-foreground hover:text-foreground"
 							}`}
 						>
@@ -177,7 +177,7 @@ export function MongoStudio({ database }: MongoStudioProps) {
 							onClick={() => setActiveTab("indexes")}
 							className={`px-4 py-1.5 text-xs font-semibold rounded-full transition-all flex items-center gap-1.5 ${
 								activeTab === "indexes"
-									? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-md shadow-emerald-600/20"
+									? "bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-md shadow-orange-500/20"
 									: "text-muted-foreground hover:text-foreground"
 							}`}
 						>
@@ -188,7 +188,7 @@ export function MongoStudio({ database }: MongoStudioProps) {
 							onClick={() => setActiveTab("shell")}
 							className={`px-4 py-1.5 text-xs font-semibold rounded-full transition-all flex items-center gap-1.5 ${
 								activeTab === "shell"
-									? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-md shadow-emerald-600/20"
+									? "bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-md shadow-orange-500/20"
 									: "text-muted-foreground hover:text-foreground"
 							}`}
 						>
diff --git a/apps/web/src/components/databases/studio/redis/RedisCliView.tsx b/apps/web/src/components/databases/studio/redis/RedisCliView.tsx
index 310b00c..66aea50 100644
--- a/apps/web/src/components/databases/studio/redis/RedisCliView.tsx
+++ b/apps/web/src/components/databases/studio/redis/RedisCliView.tsx
@@ -10,8 +10,7 @@ interface RedisCliViewProps {
 	initialCommand?: string;
 }
 
-interface CliHistoryEntry {
-	id: string;
+interface CliResult {
 	command: string;
 	result: QueryExecResult | null;
 	error: string | null;
@@ -21,7 +20,7 @@ interface CliHistoryEntry {
 export function RedisCliView({ databaseId, initialCommand }: RedisCliViewProps) {
 	const [commandInput, setCommandInput] = useState(initialCommand || "INFO");
 	const [isExecuting, setIsExecuting] = useState(false);
-	const [history, setHistory] = useState<CliHistoryEntry[]>([]);
+	const [activeResult, setActiveResult] = useState<CliResult | null>(null);
 
 	const snippets = [
 		{ label: "INFO", cmd: "INFO" },
@@ -39,32 +38,23 @@ export function RedisCliView({ databaseId, initialCommand }: RedisCliViewProps)
 		if (!cmd) return;
 		setIsExecuting(true);
 
-		const entryId = Math.random().toString(36).substring(7);
 		const timeStr = new Date().toLocaleTimeString();
 
 		try {
 			const res = await api.queryDatabase(databaseId, cmd);
-			setHistory((prev) => [
-				{
-					id: entryId,
-					command: cmd,
-					result: res,
-					error: null,
-					timestamp: timeStr,
-				},
-				...prev,
-			]);
+			setActiveResult({
+				command: cmd,
+				result: res,
+				error: null,
+				timestamp: timeStr,
+			});
 		} catch (err: any) {
-			setHistory((prev) => [
-				{
-					id: entryId,
-					command: cmd,
-					result: null,
-					error: err.message || "Command execution failed",
-					timestamp: timeStr,
-				},
-				...prev,
-			]);
+			setActiveResult({
+				command: cmd,
+				result: null,
+				error: err.message || "Command execution failed",
+				timestamp: timeStr,
+			});
 		} finally {
 			setIsExecuting(false);
 		}
@@ -86,20 +76,20 @@ export function RedisCliView({ databaseId, initialCommand }: RedisCliViewProps)
 						Redis Command Line Interface (CLI)
 					</span>
 					<p className="text-[11px] text-muted-foreground mt-0.5">
-						Execute native Redis commands directly against the instance (supports multi-line batch commands)
+						Execute native Redis commands directly against the instance
 					</p>
 				</div>
 
 				<div className="flex items-center gap-2">
-					{history.length > 0 && (
+					{activeResult && (
 						<Button
 							variant="ghost"
 							size="sm"
-							onClick={() => setHistory([])}
+							onClick={() => setActiveResult(null)}
 							className="h-8 text-xs text-muted-foreground hover:text-foreground"
-							title="Clear console log"
+							title="Clear result"
 						>
-							<Trash2 className="h-3.5 w-3.5 mr-1" /> Clear
+							<Trash2 className="h-3.5 w-3.5 mr-1" /> Clear Result
 						</Button>
 					)}
 					<Button
@@ -141,46 +131,41 @@ export function RedisCliView({ databaseId, initialCommand }: RedisCliViewProps)
 				/>
 			</div>
 
-			{/* Terminal Output Stream */}
-			<div className="space-y-3">
-				{history.length === 0 ? (
+			{/* Terminal Output */}
+			<div>
+				{!activeResult ? (
 					<div className="p-8 border border-border/30 rounded-2xl bg-black/30 text-center font-mono text-xs text-muted-foreground">
-						No commands executed yet. Select a quick command or type in the input above.
+						No command executed yet. Run a command above to see results.
 					</div>
 				) : (
-					history.map((entry) => (
-						<div
-							key={entry.id}
-							className="rounded-2xl border border-border/50 bg-black/70 overflow-hidden font-mono text-xs shadow-lg"
-						>
-							<div className="p-2.5 bg-black/90 border-b border-border/30 flex items-center justify-between text-muted-foreground text-[11px]">
-								<div className="flex items-center gap-2">
-									<span className="text-orange-400 font-bold">127.0.0.1:6379&gt;</span>
-									<span className="text-foreground font-semibold break-all">{entry.command}</span>
-								</div>
-								<div className="flex items-center gap-2 shrink-0">
-									{entry.result && (
-										<Badge variant="outline" className="text-[9px] px-1.5 py-0 border-orange-500/30 text-orange-400">
-											{entry.result.executionTimeMs} ms
-										</Badge>
-									)}
-									<span>{entry.timestamp}</span>
-								</div>
+					<div className="rounded-2xl border border-border/50 bg-black/70 overflow-hidden font-mono text-xs shadow-lg">
+						<div className="p-2.5 bg-black/90 border-b border-border/30 flex items-center justify-between text-muted-foreground text-[11px]">
+							<div className="flex items-center gap-2">
+								<span className="text-orange-400 font-bold">127.0.0.1:6379&gt;</span>
+								<span className="text-foreground font-semibold break-all">{activeResult.command}</span>
 							</div>
-
-							<div className="p-3 max-h-72 overflow-y-auto leading-relaxed">
-								{entry.error ? (
-									<span className="text-red-400">{entry.error}</span>
-								) : (
-									<pre className="text-zinc-200 whitespace-pre-wrap break-all">
-										{entry.result?.rawOutput ||
-											(entry.result?.rows || []).map((r) => `${r.result ?? ""}`).join("\n") ||
-											"(empty response)"}
-									</pre>
+							<div className="flex items-center gap-2 shrink-0">
+								{activeResult.result && (
+									<Badge variant="outline" className="text-[9px] px-1.5 py-0 border-orange-500/30 text-orange-400">
+										{activeResult.result.executionTimeMs} ms
+									</Badge>
 								)}
+								<span>{activeResult.timestamp}</span>
 							</div>
 						</div>
-					))
+
+						<div className="p-3 max-h-96 overflow-y-auto leading-relaxed">
+							{activeResult.error ? (
+								<span className="text-red-400">{activeResult.error}</span>
+							) : (
+								<pre className="text-zinc-200 whitespace-pre-wrap break-all">
+									{activeResult.result?.rawOutput ||
+										(activeResult.result?.rows || []).map((r) => `${r.result ?? ""}`).join("\n") ||
+										"(empty response)"}
+								</pre>
+							)}
+						</div>
+					</div>
 				)}
 			</div>
 		</div>
diff --git a/apps/web/src/components/databases/studio/redis/RedisServerInfoView.tsx b/apps/web/src/components/databases/studio/redis/RedisServerInfoView.tsx
deleted file mode 100644
index 7b90107..0000000
--- a/apps/web/src/components/databases/studio/redis/RedisServerInfoView.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import { Activity, Check, Copy, Cpu, Database, HardDrive, RefreshCw, Server, Users } from "lucide-react";
-import { useEffect, useState } from "react";
-import * as api from "../../../../api/client";
-import { Badge } from "../../../ui/badge";
-import { Button } from "../../../ui/button";
-
-interface RedisServerInfoViewProps {
-	databaseId: string;
-}
-
-interface ParsedRedisInfo {
-	sections: Record<string, Record<string, string>>;
-	raw: string;
-}
-
-export function RedisServerInfoView({ databaseId }: RedisServerInfoViewProps) {
-	const [info, setInfo] = useState<ParsedRedisInfo | null>(null);
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [activeSection, setActiveSection] = useState<string>("Server");
-	const [copied, setCopied] = useState(false);
-
-	const loadInfo = async () => {
-		setIsLoading(true);
-		setError(null);
-		try {
-			const res = await api.queryDatabase(databaseId, "INFO");
-			const raw = res.rawOutput || (res.rows || []).map((r) => `${r.result ?? ""}`).join("\n");
-
-			const sections: Record<string, Record<string, string>> = {};
-			let currentSection = "General";
-
-			const lines = raw.split("\n");
-			for (const line of lines) {
-				const trimmed = line.trim();
-				if (!trimmed) continue;
-				if (trimmed.startsWith("#")) {
-					currentSection = trimmed.replace(/^#\s*/, "").trim();
-					if (!sections[currentSection]) {
-						sections[currentSection] = {};
-					}
-				} else if (trimmed.includes(":")) {
-					const [key, ...rest] = trimmed.split(":");
-					const val = rest.join(":");
-					if (!sections[currentSection]) {
-						sections[currentSection] = {};
-					}
-					sections[currentSection][key.trim()] = val.trim();
-				}
-			}
-
-			setInfo({ sections, raw });
-			const sectionKeys = Object.keys(sections);
-			if (sectionKeys.length > 0 && !sections[activeSection]) {
-				setActiveSection(sectionKeys[0]);
-			}
-		} catch (err: any) {
-			setError(err.message || "Failed to load Redis server info");
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	useEffect(() => {
-		loadInfo();
-	}, [databaseId]);
-
-	const copyRaw = () => {
-		if (!info?.raw) return;
-		navigator.clipboard.writeText(info.raw);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 1500);
-	};
-
-	const getValue = (section: string, key: string, fallback = "-") => {
-		return info?.sections[section]?.[key] ?? fallback;
-	};
-
-	const getKeysCount = () => {
-		const keyspace = info?.sections.Keyspace;
-		if (!keyspace) return "0";
-		let total = 0;
-		for (const val of Object.values(keyspace)) {
-			const match = val.match(/keys=(\d+)/);
-			if (match) total += Number(match[1]);
-		}
-		return String(total);
-	};
-
-	return (
-		<div className="space-y-6">
-			{/* Overview Metric Cards */}
-			<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Version</span>
-						<Server className="h-3.5 w-3.5 text-orange-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-foreground truncate">
-						{getValue("Server", "redis_version")}
-					</div>
-					<div className="text-[10px] text-muted-foreground font-mono">Mode: {getValue("Server", "redis_mode")}</div>
-				</div>
-
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Memory</span>
-						<HardDrive className="h-3.5 w-3.5 text-emerald-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-emerald-400 truncate">
-						{getValue("Memory", "used_memory_human")}
-					</div>
-					<div className="text-[10px] text-muted-foreground font-mono">
-						Peak: {getValue("Memory", "used_memory_peak_human")}
-					</div>
-				</div>
-
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Clients</span>
-						<Users className="h-3.5 w-3.5 text-sky-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-foreground truncate">
-						{getValue("Clients", "connected_clients")}
-					</div>
-					<div className="text-[10px] text-muted-foreground font-mono">Max: {getValue("Clients", "maxclients")}</div>
-				</div>
-
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Total Keys</span>
-						<Database className="h-3.5 w-3.5 text-purple-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-purple-400 truncate">{getKeysCount()}</div>
-					<div className="text-[10px] text-muted-foreground font-mono">
-						Hits: {getValue("Stats", "keyspace_hits", "0")}
-					</div>
-				</div>
-
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Uptime</span>
-						<Activity className="h-3.5 w-3.5 text-amber-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-foreground truncate">
-						{getValue("Server", "uptime_in_days")}d
-					</div>
-					<div className="text-[10px] text-muted-foreground font-mono">
-						{getValue("Server", "uptime_in_seconds")}s total
-					</div>
-				</div>
-
-				<div className="border border-border/60 bg-card/60 rounded-2xl p-3.5 backdrop-blur-md shadow-md space-y-1">
-					<div className="flex items-center justify-between text-muted-foreground">
-						<span className="text-[11px] font-medium uppercase tracking-wider">Ops / Sec</span>
-						<Cpu className="h-3.5 w-3.5 text-rose-400" />
-					</div>
-					<div className="text-base font-bold font-mono text-foreground truncate">
-						{getValue("Stats", "instantaneous_ops_per_sec", "0")}
-					</div>
-					<div className="text-[10px] text-muted-foreground font-mono">
-						Total: {getValue("Stats", "total_commands_processed", "0")}
-					</div>
-				</div>
-			</div>
-
-			{/* Section Viewer Container */}
-			<div className="border border-border/60 bg-card/60 rounded-3xl backdrop-blur-md shadow-xl overflow-hidden">
-				<div className="p-4 border-b border-border/40 flex flex-wrap items-center justify-between gap-3 bg-card/40">
-					<div className="flex items-center gap-1.5 overflow-x-auto py-1">
-						{info &&
-							Object.keys(info.sections).map((sec) => (
-								<button
-									key={sec}
-									type="button"
-									onClick={() => setActiveSection(sec)}
-									className={`px-3 py-1 text-xs font-mono rounded-xl transition-all ${
-										activeSection === sec
-											? "bg-orange-500/20 text-orange-400 border border-orange-500/40 font-semibold"
-											: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent"
-									}`}
-								>
-									{sec}
-								</button>
-							))}
-						<button
-							type="button"
-							onClick={() => setActiveSection("RAW")}
-							className={`px-3 py-1 text-xs font-mono rounded-xl transition-all ${
-								activeSection === "RAW"
-									? "bg-orange-500/20 text-orange-400 border border-orange-500/40 font-semibold"
-									: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent"
-							}`}
-						>
-							Raw Output
-						</button>
-					</div>
-
-					<div className="flex items-center gap-2">
-						<Button
-							variant="ghost"
-							size="sm"
-							onClick={copyRaw}
-							className="h-8 text-xs text-muted-foreground hover:text-foreground"
-							title="Copy Raw Info"
-						>
-							{copied ? <Check className="h-3.5 w-3.5 text-emerald-400 mr-1" /> : <Copy className="h-3.5 w-3.5 mr-1" />}
-							Copy Info
-						</Button>
-						<Button
-							variant="ghost"
-							size="sm"
-							onClick={loadInfo}
-							disabled={isLoading}
-							className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground rounded-lg"
-							title="Refresh Info"
-						>
-							<RefreshCw className={`h-3.5 w-3.5 ${isLoading ? "animate-spin" : ""}`} />
-						</Button>
-					</div>
-				</div>
-
-				{error && (
-					<div className="p-4 bg-red-500/10 border-b border-red-500/20 text-red-400 text-xs font-mono">{error}</div>
-				)}
-
-				<div className="p-5">
-					{activeSection === "RAW" ? (
-						<pre className="p-4 bg-black/60 border border-border/40 rounded-2xl font-mono text-xs text-foreground/90 whitespace-pre-wrap max-h-[500px] overflow-y-auto leading-relaxed">
-							{info?.raw || "(no output)"}
-						</pre>
-					) : (
-						<div className="border border-border/40 rounded-2xl overflow-hidden max-h-[460px] overflow-y-auto">
-							<table className="w-full text-xs font-mono">
-								<thead className="bg-black/50 border-b border-border/40 text-muted-foreground">
-									<tr>
-										<th className="p-2.5 text-left font-semibold w-1/3">Property</th>
-										<th className="p-2.5 text-left font-semibold">Value</th>
-									</tr>
-								</thead>
-								<tbody className="divide-y divide-border/20">
-									{info?.sections[activeSection] &&
-										Object.entries(info.sections[activeSection]).map(([k, v]) => (
-											<tr key={k} className="hover:bg-white/5 transition-colors">
-												<td className="p-2.5 font-semibold text-orange-300 break-all">{k}</td>
-												<td className="p-2.5 text-foreground/90 break-all">{v}</td>
-											</tr>
-										))}
-								</tbody>
-							</table>
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/web/src/components/databases/studio/redis/RedisStudio.tsx b/apps/web/src/components/databases/studio/redis/RedisStudio.tsx
index 5a6194d..61756ef 100644
--- a/apps/web/src/components/databases/studio/redis/RedisStudio.tsx
+++ b/apps/web/src/components/databases/studio/redis/RedisStudio.tsx
@@ -1,13 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
-import { Activity, Key, Terminal } from "lucide-react";
+import { Key, Terminal } from "lucide-react";
 import { useEffect, useState } from "react";
 import * as api from "../../../../api/client";
-import type { Database, TableInfo } from "../../../../types";
+import type { Database } from "../../../../types";
 import { RedisCliView } from "./RedisCliView";
 import { RedisKeyExplorer } from "./RedisKeyExplorer";
 import { RedisKeysSidebar } from "./RedisKeysSidebar";
 import { RedisNewKeyDialog } from "./RedisNewKeyDialog";
-import { RedisServerInfoView } from "./RedisServerInfoView";
 
 interface RedisStudioProps {
 	database: Database;
@@ -16,7 +15,7 @@ interface RedisStudioProps {
 const escapeRedisArg = (str: string) => `"${str.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
 
 export function RedisStudio({ database }: RedisStudioProps) {
-	const [activeTab, setActiveTab] = useState<"explorer" | "cli" | "info">("explorer");
+	const [activeTab, setActiveTab] = useState<"explorer" | "cli">("explorer");
 	const [selectedKey, setSelectedKey] = useState<string | null>(null);
 	const [pattern, setPattern] = useState("");
 	const [isNewKeyModalOpen, setIsNewKeyModalOpen] = useState(false);
@@ -148,17 +147,6 @@ export function RedisStudio({ database }: RedisStudioProps) {
 						>
 							<Terminal className="h-3.5 w-3.5" /> REDIS CLI
 						</button>
-						<button
-							type="button"
-							onClick={() => setActiveTab("info")}
-							className={`px-4 py-1.5 text-xs font-semibold rounded-full transition-all flex items-center gap-1.5 ${
-								activeTab === "info"
-									? "bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-md shadow-orange-500/20"
-									: "text-muted-foreground hover:text-foreground"
-							}`}
-						>
-							<Activity className="h-3.5 w-3.5" /> SERVER INFO
-						</button>
 					</div>
 
 					<div className="text-xs text-muted-foreground font-mono px-3">
@@ -177,8 +165,6 @@ export function RedisStudio({ database }: RedisStudioProps) {
 				)}
 
 				{activeTab === "cli" && <RedisCliView databaseId={database.id} />}
-
-				{activeTab === "info" && <RedisServerInfoView databaseId={database.id} />}
 			</div>
 
 			{/* New Key Creation Dialog */}
diff --git a/apps/web/src/routes/Databases.tsx b/apps/web/src/routes/Databases.tsx
index 3de9fc6..ff3fbc9 100644
--- a/apps/web/src/routes/Databases.tsx
+++ b/apps/web/src/routes/Databases.tsx
@@ -3,7 +3,6 @@ import { useNavigate } from "@tanstack/react-router";
 import { Database, HardDrive, Plus, RefreshCw, Server, ShieldCheck } from "lucide-react";
 import { useState } from "react";
 import * as api from "../api/client";
-import { CreateDatabaseDialog } from "../components/databases/CreateDatabaseDialog";
 import { DatabaseCard } from "../components/databases/DatabaseCard";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
@@ -19,7 +18,6 @@ import type { Database as DatabaseRecord } from "../types";
 
 export function Databases() {
 	const navigate = useNavigate();
-	const [isCreating, setIsCreating] = useState(false);
 	const [deleting, setDeleting] = useState<DatabaseRecord | null>(null);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -128,7 +126,7 @@ export function Databases() {
 					</p>
 					<Button
 						size="sm"
-						onClick={() => setIsCreating(true)}
+						onClick={() => navigate({ to: "/databases/new" })}
 						variant="outline"
 						className="mt-5 text-xs border-orange-500/40 text-orange-400 hover:bg-orange-500/10 gap-1.5"
 					>
@@ -137,13 +135,6 @@ export function Databases() {
 				</div>
 			)}
 
-			<CreateDatabaseDialog
-				open={isCreating}
-				onOpenChange={setIsCreating}
-				projects={projects.data ?? []}
-				onCreated={refresh}
-			/>
-
 			<Dialog open={!!deleting} onOpenChange={(open) => !open && setDeleting(null)}>
 				<DialogContent className="sm:max-w-[420px] bg-card border-border text-foreground rounded-2xl shadow-2xl backdrop-blur-xl">
 					<DialogHeader>

From a5c3de8b6238cde2e08295f1f2be85afcf1cf584 Mon Sep 17 00:00:00 2001
From: Lftobs <tobbytobs1@gmail.com>
Date: Tue, 6 Oct 2026 13:23:53 +0100
Subject: [PATCH 2/3] fix(servers): redact credentials and improve SSH checks

- Hydrate pooled SSH keys when loading servers,
  report detailed SSH and
  Docker connectivity results, and surface remote
  Caddy route sync failures.
---
 apps/api/src/api/servers/index.ts            |  38 ++++---
 apps/api/src/db/repo/servers.ts              |  37 ++++--
 apps/api/src/utils/__tests__/ingress.test.ts |   5 +-
 apps/api/src/utils/ingress.ts                |   2 +-
 apps/api/src/utils/ssh.ts                    | 113 ++++++++++++-------
 5 files changed, 125 insertions(+), 70 deletions(-)

diff --git a/apps/api/src/api/servers/index.ts b/apps/api/src/api/servers/index.ts
index 642fcaf..8910a07 100644
--- a/apps/api/src/api/servers/index.ts
+++ b/apps/api/src/api/servers/index.ts
@@ -6,8 +6,14 @@ import { testSshConnection } from "../../utils/ssh";
 import { isPort, SERVER_HOST_RE } from "../../utils/validate";
 import { created, fail, ok } from "../response";
 
+const redactServer = <T extends { sshKey?: string | null; sshPassword?: string | null }>(server: T): T => {
+	if (server.sshKey) server.sshKey = "[redacted]";
+	if (server.sshPassword) server.sshPassword = "[redacted]";
+	return server;
+};
+
 export const serversRoutes = new Elysia()
-	.get("/servers", async () => ok(await listServers()))
+	.get("/servers", async () => ok((await listServers()).map((server) => redactServer(server))))
 	.post("/servers", async ({ body, set }: any) => {
 		if (!body?.name || !body?.host) {
 			set.status = 400;
@@ -26,17 +32,19 @@ export const serversRoutes = new Elysia()
 			return fail("port must be between 1 and 65535");
 		}
 		return created(
-			await createServer({
-				name: body.name,
-				host: body.host,
-				port: body.port ? Number(body.port) : body.mode === "ssh" ? 22 : 2375,
-				mode: body.mode ?? "ssh",
-				sshUser: body.sshUser ?? "root",
-				sshKey: body.sshKey,
-				sshKeyId: body.sshKeyId,
-				sshPassword: body.sshPassword,
-				authToken: body.authToken,
-			}),
+			redactServer(
+				await createServer({
+					name: body.name,
+					host: body.host,
+					port: body.port ? Number(body.port) : body.mode === "ssh" ? 22 : 2375,
+					mode: body.mode ?? "ssh",
+					sshUser: body.sshUser ?? "root",
+					sshKey: body.sshKey,
+					sshKeyId: body.sshKeyId,
+					sshPassword: body.sshPassword,
+					authToken: body.authToken,
+				}),
+			),
 		);
 	})
 	.get("/servers/:id", async ({ params: { id }, set }) => {
@@ -45,7 +53,7 @@ export const serversRoutes = new Elysia()
 			set.status = 404;
 			return fail("Server not found");
 		}
-		return ok(server);
+		return ok(redactServer(server));
 	})
 	.get("/servers/:id/stats", async ({ params: { id }, set }) => {
 		const server = await getServerById(id);
@@ -166,8 +174,8 @@ export const serversRoutes = new Elysia()
 			return fail("Server not found");
 		}
 		if (server.mode === "ssh") {
-			const passed = await testSshConnection(server);
-			return ok({ ok: passed, mode: "ssh" });
+			const result = await testSshConnection(server);
+			return ok({ ...result, mode: "ssh" });
 		}
 		return ok({ ok: server.status === "connected", mode: server.mode });
 	})
diff --git a/apps/api/src/db/repo/servers.ts b/apps/api/src/db/repo/servers.ts
index c7b9d69..4180f58 100644
--- a/apps/api/src/db/repo/servers.ts
+++ b/apps/api/src/db/repo/servers.ts
@@ -6,6 +6,7 @@ import { decryptValue, encryptValue } from "../../utils/crypto";
 import { getDb } from "../db-provider";
 import { servers } from "../schema";
 import { formatTimestamp, getRowsAffected, now } from "./helpers";
+import { resolveServerSshKey } from "./ssh-keys";
 
 const mapServer = (row: typeof servers.$inferSelect): Server => ({
 	id: row.id,
@@ -37,6 +38,14 @@ const mapServer = (row: typeof servers.$inferSelect): Server => ({
 	updatedAt: formatTimestamp(row.updatedAt),
 });
 
+const hydrateSshKey = async <T extends { sshKeyId?: string | null; sshKey?: string | null }>(server: T): Promise<T> => {
+	if (server.sshKeyId && !server.sshKey) {
+		const pooled = await resolveServerSshKey({ sshKeyId: server.sshKeyId });
+		if (pooled) server.sshKey = pooled;
+	}
+	return server;
+};
+
 const parseJsonObject = (value: unknown): Record<string, unknown> => {
 	if (typeof value === "object" && value !== null && !Array.isArray(value)) return value;
 	if (typeof value !== "string") return {};
@@ -78,7 +87,7 @@ export const createServer = async (input: CreateServerInput): Promise<Server> =>
 		})
 		.execute();
 	const [row] = await db.select().from(servers).where(eq(servers.id, id)).execute();
-	return mapServer(row);
+	return hydrateSshKey(mapServer(row));
 };
 
 export interface ServerConnection {
@@ -111,15 +120,19 @@ export const listServerConnections = async (): Promise<ServerConnection[]> => {
 		})
 		.from(servers)
 		.execute();
-	return rows.map((row) => ({
-		...row,
-		mode: row.mode as ServerMode,
-		sshKey:
-			row.sshKey && row.sshKeyIv && row.sshKeyTag
-				? decryptValue(row.sshKey, row.sshKeyIv, row.sshKeyTag, config.envEncryptionKey)
-				: (row.sshKey ?? null),
-		sshKeyId: row.sshKeyId ?? null,
-	}));
+	return Promise.all(
+		rows.map((row) =>
+			hydrateSshKey({
+				...row,
+				mode: row.mode as ServerMode,
+				sshKey:
+					row.sshKey && row.sshKeyIv && row.sshKeyTag
+						? decryptValue(row.sshKey, row.sshKeyIv, row.sshKeyTag, config.envEncryptionKey)
+						: (row.sshKey ?? null),
+				sshKeyId: row.sshKeyId ?? null,
+			}),
+		),
+	);
 };
 
 export const ensureLocalServer = async (): Promise<Server> => {
@@ -151,13 +164,13 @@ export const ensureLocalServer = async (): Promise<Server> => {
 export const listServers = async (): Promise<Server[]> => {
 	const db = await getDb();
 	const rows = await db.select().from(servers).orderBy(servers.name).execute();
-	return rows.map(mapServer);
+	return Promise.all(rows.map((row) => hydrateSshKey(mapServer(row))));
 };
 
 export const getServerById = async (id: string): Promise<Server | null> => {
 	const db = await getDb();
 	const [row] = await db.select().from(servers).where(eq(servers.id, id)).execute();
-	return row ? mapServer(row) : null;
+	return row ? hydrateSshKey(mapServer(row)) : null;
 };
 
 export const updateServerStatus = async (
diff --git a/apps/api/src/utils/__tests__/ingress.test.ts b/apps/api/src/utils/__tests__/ingress.test.ts
index 7048758..433f6e3 100644
--- a/apps/api/src/utils/__tests__/ingress.test.ts
+++ b/apps/api/src/utils/__tests__/ingress.test.ts
@@ -2,9 +2,10 @@ import { describe, expect, it, mock } from "bun:test";
 import { ingressSite, projectServerSite, shouldRouteViaIngress } from "../ingress";
 
 describe("ingress route shapes", () => {
-	it("writes a :80 listener site when the project server is behind the ingress", () => {
+	it("writes an HTTP-only hostname site when the project server is behind the ingress", () => {
 		const snippet = projectServerSite("app.example.com", 3000, ["deploy-dep-1"], true);
-		expect(snippet).toContain(":80 {");
+		expect(snippet).toContain("http://app.example.com {");
+		expect(snippet).not.toContain(":80 {");
 		expect(snippet).toContain("reverse_proxy deploy-dep-1:3000");
 	});
 
diff --git a/apps/api/src/utils/ingress.ts b/apps/api/src/utils/ingress.ts
index 929b04a..cdb3936 100644
--- a/apps/api/src/utils/ingress.ts
+++ b/apps/api/src/utils/ingress.ts
@@ -41,7 +41,7 @@ export const projectServerSite = (
 	const targets = containers.map((c) => `${c}:${port}`).join(" ");
 	const proxy = caddyReverseProxy(targets);
 	if (viaIngress) {
-		return caddySite(":80", proxy);
+		return caddySite(`http://${hostname}`, proxy);
 	}
 	return caddySite(hostname, proxy);
 };
diff --git a/apps/api/src/utils/ssh.ts b/apps/api/src/utils/ssh.ts
index 520172f..1d51a7a 100644
--- a/apps/api/src/utils/ssh.ts
+++ b/apps/api/src/utils/ssh.ts
@@ -23,28 +23,6 @@ export const ensureSshKey = (server: {
 	return writeKeyToDisk(server.host, server.sshKey, server.id);
 };
 
-export const ensureSshKeyAsync = async (server: {
-	host: string;
-	port?: number;
-	sshUser?: string | null;
-	sshKey?: string | null;
-	sshKeyId?: string | null;
-	id?: string;
-}): Promise<string | null> => {
-	if (server.sshKeyId) {
-		const { resolveServerSshKey } = await import("../db/repo/ssh-keys");
-		const resolved = await resolveServerSshKey({
-			sshKeyId: server.sshKeyId,
-			sshKey: server.sshKey ?? undefined,
-			sshKeyIv: undefined,
-			sshKeyTag: undefined,
-		});
-		if (resolved) return writeKeyToDisk(server.host, resolved, server.id);
-	}
-	if (server.sshKey) return writeKeyToDisk(server.host, server.sshKey, server.id);
-	return null;
-};
-
 const writeKeyToDisk = (host: string, sshKey: string, id?: string): string | null => {
 	if (!existsSync(SSH_KEYS_DIR)) {
 		mkdirSync(SSH_KEYS_DIR, { recursive: true, mode: 0o700 });
@@ -80,32 +58,76 @@ export const getDockerSshTarget = (
 	return `ssh://${user}@${server.host}:${port}`;
 };
 
-export const testSshConnection = (server: {
+export interface SshConnectionResult {
+	ok: boolean;
+	ssh: boolean;
+	docker: boolean;
+	detail: string;
+}
+
+const probeDockerOverSsh = (server: {
 	host: string;
 	port?: number;
 	sshUser?: string | null;
 	sshKey?: string | null;
 	id?: string;
-}): Promise<boolean> => {
-	return new Promise((resolve) => {
+}): Promise<{ ok: boolean; detail: string }> =>
+	new Promise((resolve) => {
 		const target = getDockerSshTarget(server);
 		const child = spawn("docker", ["-H", target, "info", "--format", "{{.ServerVersion}}"], {
 			stdio: ["ignore", "pipe", "pipe"],
 			timeout: 15_000,
 		});
 		let output = "";
+		let errors = "";
 		child.stdout?.on("data", (chunk) => {
 			output += String(chunk);
 		});
+		child.stderr?.on("data", (chunk) => {
+			errors += String(chunk);
+		});
 		child.on("close", (code) => {
-			resolve(code === 0 && output.trim().length > 0);
+			const version = output.trim();
+			if (code === 0 && version) {
+				resolve({ ok: true, detail: `Docker ${version}` });
+				return;
+			}
+			resolve({ ok: false, detail: (errors || output).trim() || `docker info exited with code ${code}` });
 		});
-		child.on("error", () => resolve(false));
+		child.on("error", (err) => resolve({ ok: false, detail: err instanceof Error ? err.message : String(err) }));
 		child.on("timeout", () => {
 			child.kill();
-			resolve(false);
+			resolve({ ok: false, detail: "Timed out contacting the remote Docker daemon" });
 		});
 	});
+
+export const testSshConnection = async (server: {
+	host: string;
+	port?: number;
+	sshUser?: string | null;
+	sshKey?: string | null;
+	id?: string;
+}): Promise<SshConnectionResult> => {
+	const probe = await execRemoteCommand(server, "echo dequel-ok").catch((err: unknown) => ({
+		code: 1,
+		stdout: "",
+		stderr: err instanceof Error ? err.message : String(err),
+	}));
+	if (probe.code !== 0 || probe.stdout.trim() !== "dequel-ok") {
+		return {
+			ok: false,
+			ssh: false,
+			docker: false,
+			detail: probe.stderr || probe.stdout || `ssh exited with code ${probe.code}`,
+		};
+	}
+	const docker = await probeDockerOverSsh(server);
+	return {
+		ok: docker.ok,
+		ssh: true,
+		docker: docker.ok,
+		detail: docker.ok ? docker.detail : `SSH connected, but Docker is unavailable: ${docker.detail}`,
+	};
 };
 
 export const execDockerSshCommand = (
@@ -165,22 +187,26 @@ export const syncRemoteCaddyRoute = (
 	server: Server | { host: string; port?: number; sshUser?: string | null },
 	filename: string,
 	content: string,
-): Promise<boolean> => {
-	return new Promise((resolve) => {
+): Promise<void> =>
+	new Promise((resolve, reject) => {
+		const rejectRoute = (reason: string) =>
+			reject(new Error(`Failed to sync Caddy route ${filename} to ${server.host}: ${reason}`));
+
 		if (!/^[a-zA-Z0-9._-]+$/.test(filename) || filename.includes("..")) {
-			resolve(false);
+			rejectRoute("invalid route filename");
 			return;
 		}
 
 		const blockPattern = /^([^\n{]+?)\s*\{/gm;
 		let match: RegExpExecArray | null;
 		while ((match = blockPattern.exec(content)) !== null) {
-			const domainLine = match[1].trim();
-			const domains = domainLine.split(",").map((d) => d.trim());
+			const domains = match[1]
+				.trim()
+				.split(",")
+				.map((d) => d.trim());
 			for (const d of domains) {
 				if (/^:\d+$/.test(d)) {
-					console.error(`Rejected catch-all Caddy route in ${filename}: "${d}" — must include a hostname`);
-					resolve(false);
+					rejectRoute(`route block "${d}" must include a hostname`);
 					return;
 				}
 			}
@@ -200,7 +226,7 @@ export const syncRemoteCaddyRoute = (
 				"ConnectTimeout=10",
 				...keyArgs,
 				`${user}@${server.host}`,
-				`sudo mkdir -p /etc/caddy/routes && sudo tee /etc/caddy/routes/${filename} > /dev/null && (sudo systemctl reload caddy || sudo caddy reload --config /etc/caddy/Caddyfile || docker exec dequel-caddy caddy reload || true)`,
+				`sudo mkdir -p /etc/caddy/routes && sudo tee /etc/caddy/routes/${filename} > /dev/null && (sudo systemctl reload caddy || sudo caddy reload --config /etc/caddy/Caddyfile || docker exec dequel-caddy caddy reload --config /etc/caddy/Caddyfile || true)`,
 			],
 			{ stdio: ["pipe", "pipe", "pipe"] },
 		);
@@ -208,12 +234,19 @@ export const syncRemoteCaddyRoute = (
 		sshCmd.stdin?.write(content);
 		sshCmd.stdin?.end();
 
+		let stderr = "";
+		sshCmd.stderr?.on("data", (chunk) => {
+			stderr += String(chunk);
+		});
 		sshCmd.on("close", (code) => {
-			resolve(code === 0);
+			if (code === 0) {
+				resolve();
+				return;
+			}
+			rejectRoute(stderr.trim() || `ssh exited with code ${code}`);
 		});
-		sshCmd.on("error", () => resolve(false));
+		sshCmd.on("error", (err) => rejectRoute(err.message));
 	});
-};
 
 export const removeRemoteCaddyRoute = (
 	server: Server | { host: string; port?: number; sshUser?: string | null; sshKey?: string | null; id?: string },
@@ -239,7 +272,7 @@ export const removeRemoteCaddyRoute = (
 				"ConnectTimeout=10",
 				...keyArgs,
 				`${user}@${server.host}`,
-				`sudo rm -f /etc/caddy/routes/${filename} && (sudo systemctl reload caddy || sudo caddy reload --config /etc/caddy/Caddyfile || docker exec dequel-caddy caddy reload || true)`,
+				`sudo rm -f /etc/caddy/routes/${filename} && (sudo systemctl reload caddy || sudo caddy reload --config /etc/caddy/Caddyfile || docker exec dequel-caddy caddy reload --config /etc/caddy/Caddyfile || true)`,
 			],
 			{ stdio: ["ignore", "pipe", "pipe"] },
 		);

From 8ede7f041337931a0113d6aa809eaa775d46f691 Mon Sep 17 00:00:00 2001
From: Lftobs <tobbytobs1@gmail.com>
Date: Tue, 6 Oct 2026 13:26:09 +0100
Subject: [PATCH 3/3] docs(changelog): include MongoDB editing and SSH
 credential redaction in v0.4.0

---
 apps/docs/src/content/changelogs/v0.4.0.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/docs/src/content/changelogs/v0.4.0.md b/apps/docs/src/content/changelogs/v0.4.0.md
index 0eb4236..505c5f3 100644
--- a/apps/docs/src/content/changelogs/v0.4.0.md
+++ b/apps/docs/src/content/changelogs/v0.4.0.md
@@ -12,6 +12,7 @@ date: "2026-10-03"
 - Add shared environment variable link support and UI components ([86205cb](https://github.com/Lftobs/dequel/commit/86205cb4f8ab7e5a82f9aa752df30b6da72e6be0))
 - Add project health and failure alerts ([a42c2b3](https://github.com/Lftobs/dequel/commit/a42c2b3e3526dbf98ea83d902971b4e09075739d))
 - Track anonymous usage events ([8abdf74](https://github.com/Lftobs/dequel/commit/8abdf7420877621e10ed277ccb63a70df97a3523))
+- Add inline MongoDB document editing ([4ead155](https://github.com/Lftobs/dequel/commit/4ead15502a7aaa24cd09b2477409dea1c277a494))
 
 
 ### Improvements
@@ -33,3 +34,4 @@ date: "2026-10-03"
 - Address CodeRabbit review comments on AI diagnosis PR ([0a1a724](https://github.com/Lftobs/dequel/commit/0a1a72441919cf528f83c0289c82a3375901b018))
 - Chown the sandbox job dir to bun before starting the runner ([bca4f14](https://github.com/Lftobs/dequel/commit/bca4f1470fb785e899be203e9f8769ec2b578deb))
 - Add MongoDB and Redis database studios ([5551981](https://github.com/Lftobs/dequel/commit/55519810bf8ae84387b4430188b39e1f42e1359b))
+- Redact credentials and improve SSH checks ([a5c3de8](https://github.com/Lftobs/dequel/commit/a5c3de8b6238cde2e08295f1f2be85afcf1cf584))