Add Settings -> Database viewer (Adminer) for local devs and any admin

Local dev gets an unauthenticated Adminer instance bound to loopback
only. In production, any account with is_admin=true can open it -
the app mints a short-lived token from a live admin session, which
Nginx's new db.ciagent.org block exchanges for a session cookie that
re-checks admin status on every request, instead of a shared static
password that wouldn't scale to multiple admins or revoke live.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

apps/web/app/(app)/settings/page.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import {
   Bell,
   CheckCircle2,
+  Database,
   KeyRound,
   Loader2,
   Mail,
@@ -24,6 +25,7 @@ import {
 import { authErrorMessage } from "@/hooks/use-auth";
 import {
   useAcceptUnbanRequest,
+  useCreateDbViewerSession,
   useCreateIpBan,
   useCurrentUser,
   useDeleteIpBan,
@@ -48,6 +50,7 @@ import { FormField } from "@/components/ui/form-field";
 import { Select } from "@/components/ui/select";
 import { SystemSecretRow } from "@/components/ui/system-secret-row";
 import { UserApiKeyRow } from "@/components/ui/user-api-key-row";
+import { isLocalConvenience } from "@/lib/auth";
 import { formatDateTime } from "@/lib/format";
 import {
   SEVERITY_LABELS,
@@ -663,6 +666,60 @@ function IpBansBox() {
   );
 }
 
+function DatabaseViewerBox() {
+  const { data: systemStatus } = useSystemStatus();
+  const createSession = useCreateDbViewerSession();
+  const [error, setError] = useState<string | null>(null);
+  const isLocal = systemStatus ? isLocalConvenience(systemStatus) : false;
+  const dbViewerUrl = process.env.NEXT_PUBLIC_DB_VIEWER_URL;
+
+  const handleOpen = async () => {
+    setError(null);
+    try {
+      const { token } = await createSession.mutateAsync();
+      window.open(`${dbViewerUrl}/_auth?token=${encodeURIComponent(token)}`, "_blank", "noopener,noreferrer");
+    } catch {
+      setError("Couldn't open the database viewer. Try again.");
+    }
+  };
+
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-6">
+      <div className="flex items-center gap-2 text-sm font-semibold text-slate-700">
+        <Database className="h-4 w-4" aria-hidden /> Database
+      </div>
+      <p className="mt-1 text-sm text-slate-500">
+        Open a web-based Postgres client (Adminer) in a new tab to view and edit rows directly.
+        Local developers and server admins only.
+      </p>
+
+      <div className="mt-4">
+        {isLocal ? (
+          <a
+            href="http://localhost:8081"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="focus-ring inline-flex items-center gap-1.5 rounded-md bg-slate-800 px-3 py-1.5 text-xs font-semibold text-white transition-colors duration-200 hover:bg-slate-900"
+          >
+            <Database className="h-3.5 w-3.5" aria-hidden /> Open database viewer
+          </a>
+        ) : dbViewerUrl ? (
+          <ActionButton
+            onClick={handleOpen}
+            pending={createSession.isPending}
+            colorClass="bg-slate-800 hover:bg-slate-900"
+            icon={Database}
+            label="Open database viewer"
+          />
+        ) : (
+          <p className="text-sm text-slate-500">Not configured for this deployment.</p>
+        )}
+        {error && <p className="mt-2 text-xs text-red-600">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
 export default function SettingsPage() {
   const { data: user } = useCurrentUser();
   const { data: systemStatus } = useSystemStatus();
@@ -759,6 +816,7 @@ export default function SettingsPage() {
         <>
           <ServerSecretsBox />
           <IpBansBox />
+          <DatabaseViewerBox />
           <LoggingBox />
         </>
       )}