Add DB viewer access logging, account deletion, and forced password change

Logs a distinct db_viewer_accessed event (not just the earlier
session_created "requested" event) when an admin's browser actually
completes the hand-off into Adminer. Adds a password-confirmed
account-deletion box to Settings, relying on the existing ON DELETE
CASCADE foreign keys to clean up everything the account owns. Adds an
admin-only "require password change" flag that get_current_user
enforces server-side (403 on everything except /auth/me,
/auth/change-password, /auth/logout) - meant for handing a demo
account to someone with a known sample password.

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

apps/web/app/(app)/layout.tsx

@@ -15,6 +15,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const logout = useLogout();
 
   const requiresLogin = systemStatus ? !isLocalConvenience(systemStatus) : false;
+  const mustChangePassword = user?.must_change_password ?? false;
 
   useEffect(() => {
     if (requiresLogin && !isLoading && isError) {
@@ -22,6 +23,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     }
   }, [requiresLogin, isLoading, isError, router]);
 
+  useEffect(() => {
+    if (mustChangePassword) {
+      router.replace("/change-password");
+    }
+  }, [mustChangePassword, router]);
+
   if (requiresLogin && (isLoading || isError)) {
     return (
       <div className="flex min-h-screen items-center justify-center text-sm text-slate-500">
@@ -30,6 +37,17 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     );
   }
 
+  // Every API call except /auth/me, /auth/change-password, and /auth/logout
+  // 403s server-side while this is set (app/auth/dependencies.py) - this is
+  // just the matching frontend redirect, not the actual enforcement.
+  if (mustChangePassword) {
+    return (
+      <div className="flex min-h-screen items-center justify-center text-sm text-slate-500">
+        Redirecting…
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-slate-50">
       <LocalModeBanner />

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

@@ -28,6 +28,7 @@ import {
   useCreateDbViewerSession,
   useCreateIpBan,
   useCurrentUser,
+  useDeleteAccount,
   useDeleteIpBan,
   useIpBans,
   useRejectUnbanRequest,
@@ -690,13 +691,14 @@ function DatabaseViewerBox() {
       </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.
+        PostgreSQL is pre-selected - just enter the database password to sign in. Local developers
+        and server admins only.
       </p>
 
       <div className="mt-4">
         {isLocal ? (
           <a
-            href="http://localhost:8081"
+            href="http://localhost:8081/?pgsql=postgres&username=ciagent"
             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"
@@ -720,6 +722,64 @@ function DatabaseViewerBox() {
   );
 }
 
+function DeleteAccountBox() {
+  const { data: systemStatus } = useSystemStatus();
+  const [password, setPassword] = useState("");
+  const deleteAccount = useDeleteAccount();
+  const isLocal = systemStatus ? isLocalConvenience(systemStatus) : false;
+
+  // The local-dev bypass account has no password_hash at all (it never
+  // registers/logs in) - there's nothing to type to confirm deletion, and
+  // deleting it would just get silently re-created on the next request.
+  if (isLocal) return null;
+
+  return (
+    <div className="rounded-lg border border-red-200 bg-red-50 p-6">
+      <div className="flex items-center gap-2 text-sm font-semibold text-red-700">
+        <Trash2 className="h-4 w-4" aria-hidden /> Delete account
+      </div>
+      <p className="mt-1 text-sm text-red-700/80">
+        Permanently deletes your account and everything in it - companies, monitoring history,
+        reports, and API keys. This can&apos;t be undone.
+      </p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          deleteAccount.mutate({ password });
+        }}
+        className="mt-4 flex flex-wrap items-end gap-2"
+      >
+        <div className="min-w-[220px] flex-1">
+          <label htmlFor="delete-account-password" className="block text-sm font-medium text-red-700">
+            Confirm your password
+          </label>
+          <input
+            id="delete-account-password"
+            type="password"
+            autoComplete="current-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="focus-ring mt-1 block w-full rounded-md border border-red-300 px-3 py-2 text-sm text-slate-900 shadow-sm transition-colors duration-150"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={!password || deleteAccount.isPending}
+          className="focus-ring inline-flex shrink-0 items-center gap-1.5 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {deleteAccount.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
+          {deleteAccount.isPending ? "Deleting…" : "Delete account"}
+        </button>
+      </form>
+      {deleteAccount.isError && (
+        <p className="mt-2 text-sm text-red-700" role="alert">
+          {authErrorMessage(deleteAccount.error)}
+        </p>
+      )}
+    </div>
+  );
+}
+
 export default function SettingsPage() {
   const { data: user } = useCurrentUser();
   const { data: systemStatus } = useSystemStatus();
@@ -820,6 +880,8 @@ export default function SettingsPage() {
           <LoggingBox />
         </>
       )}
+
+      <DeleteAccountBox />
     </div>
   );
 }