Phase 4 Stage 2: onboarding redesign (client_app + mitra_app)

Verif Choice Sheet on display_name_screen drives the user into either
the verified or anonymous onboarding sub-flow. ESP screen (12 chips,
multi-select, info-only) + USP screen are shared between both branches;
selections persist through to chat_sessions.topics on session start.

OTP-blocked popup (HaloPopup) listens for the four real OTP-rate-limit
error codes (OTP_RATE_LIMIT_PHONE, OTP_RATE_LIMIT_IP, OTP_COOLDOWN,
OTP_ATTEMPTS_EXCEEDED) and drops the user onto the anonymous path with
ESP/USP state preserved.

Auth-providers gating replaces the --dart-define=ENABLE_SOCIAL_AUTH
build flag with server-driven discovery. authProvidersProvider preloads
GET /api/shared/auth-providers at cold start; welcome/register/
force-register screens render Google/Apple buttons only when the
backend reports enabled:true. Falls back to phone-OTP-only when both
providers are off. social_auth_enabled.dart deleted; client_app/CLAUDE.md
updated to reflect the new gating contract.

Mitra app: chat screen renders an ESP chip strip above the first message
bubble when chat_sessions.topics is non-empty.

Backend session.service.js getSessionById SELECTs cs.topics so the mitra
side can read the customer's selected topics.

Maestro flows 02_onboarding_verified.yaml + 03_onboarding_anon.yaml.

Deviation from plan: plan referenced OTP error code 'otp_retry_exhausted';
real codes are OTP_RATE_LIMIT_*/OTP_COOLDOWN/OTP_ATTEMPTS_EXCEEDED -
popup listens for all four. Plan said 'has_paid_first_session'; live
endpoint returns 'has_consulted_before' - used the live field.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

mitra_app/lib/features/chat/screens/mitra_chat_screen.dart

@@ -310,14 +310,22 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
                 '[User] Sudah Memasuki Ruangan',
                 () => setState(() => _showUserBanner = false),
               ),
-            // Messages
+            // Messages — when the customer picked ESP topics during
+            // onboarding, render a read-only chip row as the first list
+            // item (above the first message bubble). Info-only.
             Expanded(
               child: ListView.builder(
                 controller: _scrollController,
                 padding: const EdgeInsets.all(16),
-                itemCount: state.messages.length,
+                itemCount: state.messages.length +
+                    (state.topics.isNotEmpty ? 1 : 0),
                 itemBuilder: (context, index) {
-                  final msg = state.messages[index];
+                  if (state.topics.isNotEmpty && index == 0) {
+                    return _buildTopicChipsRow(state.topics);
+                  }
+                  final msgIndex =
+                      state.topics.isNotEmpty ? index - 1 : index;
+                  final msg = state.messages[msgIndex];
                   final isMe = msg.senderType == UserType.mitra;
                   return _buildMessageBubble(msg, isMe);
                 },
@@ -340,6 +348,52 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
     );
   }
 
+  // Phase 4 ESP topic display labels. Mirrors the customer-side `EspTopic`
+  // enum's `label` property — we only need to read these here, not write.
+  static const Map<String, String> _espTopicLabels = {
+    'relationship': 'Hubungan',
+    'family': 'Keluarga',
+    'work': 'Pekerjaan',
+    'study': 'Sekolah / Kuliah',
+    'finance': 'Keuangan',
+    'health': 'Kesehatan',
+    'friendship': 'Pertemanan',
+    'self_worth': 'Self-worth',
+    'anxiety': 'Kecemasan',
+    'loneliness': 'Kesepian',
+    'grief': 'Kehilangan',
+    'identity': 'Identitas',
+  };
+
+  Widget _buildTopicChipsRow(List<String> topics) {
+    return Container(
+      margin: const EdgeInsets.only(bottom: 12),
+      child: Wrap(
+        spacing: 6,
+        runSpacing: 6,
+        children: topics.map((value) {
+          final label = _espTopicLabels[value] ?? value;
+          return Container(
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(999),
+              border: Border.all(color: const Color(0xFFE0CDD1)),
+            ),
+            child: Text(
+              label,
+              style: const TextStyle(
+                fontSize: 12,
+                color: _kAccentPink,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+
   Widget _buildEntryBanner(String text, VoidCallback onDismiss) {
     return Container(
       color: _kBannerColor,