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/core/chat/mitra_chat_notifier.dart

@@ -32,6 +32,10 @@ class MitraChatConnectedData extends MitraChatData {
   final bool goodbyeSubmitted;
   final Map<String, dynamic>? extensionRequest;
   final TopicSensitivity topicSensitivity;
+  // Phase 4 ESP picks the customer made during onboarding. Read-only,
+  // info-only — does not affect matching, pricing, or routing. Sourced from
+  // `chat_sessions.topics` via the session info payload.
+  final List<String> topics;
 
   const MitraChatConnectedData({
     required this.messages,
@@ -42,6 +46,7 @@ class MitraChatConnectedData extends MitraChatData {
     this.goodbyeSubmitted = false,
     this.extensionRequest,
     this.topicSensitivity = TopicSensitivity.regular,
+    this.topics = const [],
   });
 
   MitraChatConnectedData copyWith({
@@ -54,6 +59,7 @@ class MitraChatConnectedData extends MitraChatData {
     Map<String, dynamic>? extensionRequest,
     bool clearExtensionRequest = false,
     TopicSensitivity? topicSensitivity,
+    List<String>? topics,
   }) {
     return MitraChatConnectedData(
       messages: messages ?? this.messages,
@@ -64,6 +70,7 @@ class MitraChatConnectedData extends MitraChatData {
       goodbyeSubmitted: goodbyeSubmitted ?? this.goodbyeSubmitted,
       extensionRequest: clearExtensionRequest ? null : (extensionRequest ?? this.extensionRequest),
       topicSensitivity: topicSensitivity ?? this.topicSensitivity,
+      topics: topics ?? this.topics,
     );
   }
 }
@@ -130,6 +137,10 @@ class MitraChat extends _$MitraChat {
       final isClosing = sessionStatus == SessionStatus.closing;
       final goodbyeSubmittedByMe = sessionData?['goodbye_submitted_by_me'] as bool? ?? false;
       final sessionTopic = TopicSensitivity.fromString(sessionData?['topic_sensitivity'] as String?);
+      final rawTopics = sessionData?['topics'];
+      final espTopics = rawTopics is List
+          ? rawTopics.whereType<String>().toList(growable: false)
+          : const <String>[];
 
       final response = await _apiClient.get('/api/shared/chat/$sessionId/messages');
       final messagesData = response['data'] as List<dynamic>;
@@ -172,6 +183,7 @@ class MitraChat extends _$MitraChat {
         sessionClosing: isClosing,
         goodbyeSubmitted: goodbyeSubmittedByMe,
         topicSensitivity: sessionTopic,
+        topics: espTopics,
       );
     } catch (e) {
       state = const MitraChatErrorData('Gagal terhubung ke chat.');

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,