feat(12-05): drop DB-vs-env aside, add read-only DB-name field (gaps 1, 3)

- Remove the 'written to the database — not your environment file' aside from the Instance step intro
- Render a read-only, disabled DB-name field under App URL, populated from GET /api/setup/status dbName
- Helper text explains DB is configured via Docker env; only dbName is surfaced (T-12-3DB)
- Tests: assert aside absent, DB field readOnly/disabled with mocked dbName, existing DB validation row intact

apps/pwa/src/routes/SetupPage.tsx

@@ -21,9 +21,10 @@
  */
 
 import { useState, useRef, useEffect } from 'react';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { ShieldCheck, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
 import {
+  fetchSetupStatus,
   postSetupConfig,
   validateSetupDb,
   validateSetupOidc,
@@ -442,6 +443,17 @@ function Step2Config({ onBack, onSuccess, stepHeadingRef }: Step2Props) {
   const [vapidPublicKey, setVapidPublicKey] = useState('');
   const [fieldError, setFieldError] = useState<string | null>(null);
 
+  // Gap 3 (frontend): fetch the env-derived, non-secret DB name so the
+  // "database connection verified" row below has an on-screen referent.
+  // Only dbName is surfaced — DB_HOST/DB_USER/DB_PASSWORD are never fetched (T-12-3DB).
+  const { data: setupStatus } = useQuery({
+    queryKey: ['setupStatus'],
+    queryFn: fetchSetupStatus,
+    staleTime: 0,
+    retry: false,
+  });
+  const dbName = setupStatus?.dbName ?? '';
+
   const [validationRows, setValidationRows] = useState<Pick<ValidationRowStatus, 'db' | 'oidc' | 'vapid'>>({
     db: 'idle',
     oidc: 'idle',
@@ -553,8 +565,7 @@ function Step2Config({ onBack, onSuccess, stepHeadingRef }: Step2Props) {
           lineHeight: 1.5,
         }}
       >
-        Enter your instance&apos;s connection details. These are written to the database — not
-        your environment file.
+        Enter your instance&apos;s connection details.
       </p>
 
       {/* App URL */}
@@ -574,6 +585,32 @@ function Step2Config({ onBack, onSuccess, stepHeadingRef }: Step2Props) {
         <div style={helperStyle}>The public URL where FamilySync is reachable.</div>
       </div>
 
+      {/* Database (read-only, env-derived) — gives the DB validation row below a referent */}
+      <div style={{ marginBottom: 'var(--space-4, 16px)' }}>
+        <label htmlFor="setup-db-name" style={labelStyle}>
+          Database
+        </label>
+        <input
+          id="setup-db-name"
+          type="text"
+          value={dbName || '—'}
+          readOnly
+          disabled
+          aria-readonly="true"
+          tabIndex={-1}
+          style={{
+            ...inputStyle(false),
+            background: 'var(--color-surface-dim, #f7f7f8)',
+            color: 'var(--color-text-secondary, #6b7280)',
+            cursor: 'default',
+          }}
+        />
+        <div style={helperStyle}>
+          Configured via the server&apos;s Docker environment (<code>DB_HOST</code>,{' '}
+          <code>DB_PORT</code>, <code>DB_USER</code>, <code>DB_PASSWORD</code>) — not entered here.
+        </div>
+      </div>
+
       {/* OIDC Issuer */}
       <div style={{ marginBottom: 'var(--space-4, 16px)' }}>
         <label htmlFor="setup-oidc-issuer" style={labelStyle}>