Phase 3.7: paid pairing flow + returning chat + extension flip

- Backend: payment_sessions + pairing_failures tables; payment.service.js
  and pairing-failure.service.js (new); rewritten pairing.service.js
  (payment-gated blast + targeted "Curhat lagi" + cancel + fallback);
  rewritten extension.service.js (data-driven auto-approve with offline
  safeguard, charge-at-approval); pricing.service.js (extension tiers
  without free trial); mitra-status.service.js (countAvailableMitras
  cached path); 60s sweeper for stale payment sessions
- Backend routes: client.payment.routes, client.mitra-availability.routes,
  internal/failed-pairings.routes; client.chat.routes rewritten for
  payment-gated start + /returning + /cancel + /fallback-to-blast;
  internal/config.routes adds 4 new keys with Valkey invalidate publish
- client_app: mitra-availability poll, payment screen + notifier, pairing
  notifier rewrite (PairingTargetedWaiting + PairingFailed states),
  targeted-waiting overlay + bestie-unavailable dialog, "Curhat lagi"
  CTA, failed-pairing terminal, extension via payment-session
- mitra_app: PairingRequestType enum, returning-chat 20s countdown
  auto-dismiss, extension card "otomatis disetujui" copy
- control_center: 4 new config rows in Settings, Failed Pairings page
  (filter + paginate + action menu), sidebar + route registered
- Test infrastructure: Vitest backend (7/7 pass), Playwright CC (4/4
  pass), Maestro mobile scaffold (CLI install pending)
- Bugs found via Playwright + fixed: LoginPage labels not associated
  with inputs (a11y); backend internal CORS missing PATCH/PUT/DELETE
  in allow-methods (silent settings breakage in browsers since Stage 4)
- Docs: phase3.7.md PRD, phase3.7-plan.md, phase3.7-questions.md (Q&A),
  phase3.7-testing.md (E2E checklist), phase3.7-test-run-2026-05-03.md
  (today's run results)

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

client_app/lib/features/chat/screens/chat_history_screen.dart

@@ -2,7 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import '../../../core/api/api_client_provider.dart';
+import '../../../core/constants.dart';
 
+/// Chat history with per-row "Curhat lagi" CTA.
+///
+/// Tapping "Curhat lagi" routes to the payment screen with the targeted
+/// mitra id + display name as extras. The payment screen then:
+///   1. POSTs `/api/client/payment-sessions` with `targeted_mitra_id`
+///   2. On confirm, fires `pairingNotifier.startTargetedSearch(...)` instead
+///      of the general `startSearch(...)`.
+///
+/// The CTA is per-row (not per-unique-mitra).
 class ChatHistoryScreen extends ConsumerStatefulWidget {
   const ChatHistoryScreen({super.key});
 
@@ -34,6 +44,19 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
     }
   }
 
+  void _onCurhatLagiPressed(Map<String, dynamic> session) {
+    // The mitra id field on the history payload is `mitra_id` per existing
+    // backend convention. If absent (older rows), don't render the CTA.
+    final mitraId = session['mitra_id'] as String?;
+    if (mitraId == null) return;
+    final mitraName = session['mitra_display_name'] as String? ?? 'Bestie';
+    context.push('/payment', extra: <String, dynamic>{
+      'targetedMitraId': mitraId,
+      'mitraName': mitraName,
+      'topicSensitivity': TopicSensitivity.regular,
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -42,11 +65,13 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
           ? const Center(child: CircularProgressIndicator())
           : _sessions.isEmpty
               ? const Center(child: Text('Belum ada riwayat chat'))
-              : ListView.builder(
+              : ListView.separated(
                   itemCount: _sessions.length,
+                  separatorBuilder: (_, __) => const Divider(height: 1),
                   itemBuilder: (context, index) {
                     final s = _sessions[index];
                     final sessionId = s['id'] as String;
+                    final mitraId = s['mitra_id'] as String?;
                     final mitraName = s['mitra_display_name'] as String? ?? 'Bestie';
                     final status = s['status'] as String?;
                     final isClosing = status == 'closing';
@@ -72,7 +97,18 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
                         if (duration != null) '$duration menit',
                         if (closureMsg != null) '"$closureMsg"',
                       ].join(' - ')),
-                      trailing: const Icon(Icons.chevron_right),
+                      // Curhat-lagi CTA renders inline; transcript view is
+                      // still reachable by tapping the row body (or, for
+                      // closing sessions, the active chat — same as before).
+                      trailing: !isClosing && mitraId != null
+                          ? OutlinedButton(
+                              style: OutlinedButton.styleFrom(
+                                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+                              ),
+                              onPressed: () => _onCurhatLagiPressed(s),
+                              child: const Text('Curhat lagi'),
+                            )
+                          : const Icon(Icons.chevron_right),
                       onTap: () => isClosing
                           ? context.push('/chat/session/$sessionId', extra: mitraName)
                           : context.push('/chat/history/$sessionId'),

client_app/lib/features/chat/screens/no_bestie_screen.dart

@@ -1,36 +1,64 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
+import '../../../core/pairing/pairing_notifier.dart';
 
-class NoBestieScreen extends StatelessWidget {
+/// Terminal failed-pairing screen.
+///
+/// Reached when the pairing notifier transitions to [PairingFailedData]
+/// (terminal — payment session is `failed_pairing` server-side, audit row
+/// recorded). Copy is intentionally identical regardless of `cause_tag` for
+/// now (the design pass will revise this later).
+///
+/// Single CTA "Kembali ke beranda" resets the pairing notifier and routes
+/// home. PopScope falls back to home for deep-link entry per project memory
+/// rule "Deep-link pop fallback".
+class NoBestieScreen extends ConsumerWidget {
   const NoBestieScreen({super.key});
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const Icon(Icons.sentiment_dissatisfied, size: 80, color: Colors.orange),
-              const SizedBox(height: 24),
-              const Text(
-                'Bestie belum tersedia',
-                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+  Widget build(BuildContext context, WidgetRef ref) {
+    return PopScope(
+      canPop: true,
+      onPopInvokedWithResult: (didPop, _) {
+        if (!didPop) return;
+        ref.read(pairingProvider.notifier).reset();
+      },
+      child: Scaffold(
+        body: SafeArea(
+          child: Center(
+            child: Padding(
+              padding: const EdgeInsets.all(32),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const Icon(Icons.sentiment_dissatisfied, size: 80, color: Colors.orange),
+                  const SizedBox(height: 24),
+                  const Text(
+                    'Belum berhasil terhubung',
+                    style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
+                  ),
+                  const SizedBox(height: 12),
+                  const Text(
+                    'Maaf, kami tidak bisa menemukan bestie untuk sesimu. '
+                    'Tim kami akan menghubungimu segera.',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(fontSize: 16, color: Colors.grey),
+                  ),
+                  const SizedBox(height: 48),
+                  ElevatedButton(
+                    style: ElevatedButton.styleFrom(
+                      padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 14),
+                    ),
+                    onPressed: () {
+                      ref.read(pairingProvider.notifier).reset();
+                      context.go('/home');
+                    },
+                    child: const Text('Kembali ke beranda'),
+                  ),
+                ],
               ),
-              const SizedBox(height: 8),
-              const Text(
-                'Maaf, semua Bestie sedang sibuk. Coba lagi nanti ya.',
-                textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 16, color: Colors.grey),
-              ),
-              const SizedBox(height: 48),
-              ElevatedButton(
-                onPressed: () => context.go('/home'),
-                child: const Text('Kembali'),
-              ),
-            ],
+            ),
           ),
         ),
       ),

client_app/lib/features/chat/screens/searching_screen.dart

@@ -2,51 +2,170 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import '../../../core/pairing/pairing_notifier.dart';
+import '../widgets/bestie_unavailable_dialog.dart';
+import '../widgets/targeted_waiting_overlay.dart';
 
-class SearchingScreen extends ConsumerWidget {
+/// Searching screen, also responsible for routing all downstream pairing
+/// transitions:
+///
+/// - PairingTargetedWaitingData → render the targeted waiting overlay above
+///   the searching shell (the customer sees the 20s countdown + cancel CTA).
+/// - PairingTargetedUnavailableData → show the bestie-unavailable dialog
+///   (intermediate; payment stays confirmed; offers fallback-to-blast).
+/// - PairingFailedData → terminal; route to no-bestie screen.
+/// - PairingBestieFoundData → existing transition to bestie-found screen.
+/// - PairingCancelledData → customer cancelled; back home.
+///
+/// Per project memory ("Riverpod ref.listen in build is unsafe"), we use
+/// ref.listenManual in initState for one-shot side effects rather than
+/// build-scoped listeners.
+class SearchingScreen extends ConsumerStatefulWidget {
   const SearchingScreen({super.key});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    ref.listen(pairingProvider, (prev, next) {
-      if (next is PairingBestieFoundData) {
-        context.go('/chat/found', extra: {
-          'sessionId': next.sessionId,
-          'mitraName': next.mitraName,
-        });
-      } else if (next is PairingNoBestieData) {
-        context.go('/chat/no-bestie');
-      } else if (next is PairingCancelledData) {
-        context.go('/home');
-      }
+  ConsumerState<SearchingScreen> createState() => _SearchingScreenState();
+}
+
+class _SearchingScreenState extends ConsumerState<SearchingScreen> {
+  /// Guard against re-firing the bestie-unavailable dialog if the notifier
+  /// briefly emits multiple intermediate states (e.g. WS event arrives just
+  /// after a 409 already opened the dialog).
+  bool _unavailableDialogShown = false;
+
+  @override
+  void initState() {
+    super.initState();
+    ref.listenManual<PairingData>(pairingProvider, _onPairingState);
+    // The pairing state can already be PairingTargetedUnavailableData by
+    // the time we mount (the payment screen awaits startTargetedSearch
+    // before navigating; a 409 lands while we're still on the previous
+    // screen). Inspect once after first frame to handle that case.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      _onPairingState(null, ref.read(pairingProvider));
     });
+  }
+
+  void _onPairingState(PairingData? prev, PairingData next) {
+    if (!mounted) return;
+
+    if (next is PairingBestieFoundData) {
+      context.go('/chat/found', extra: {
+        'sessionId': next.sessionId,
+        'mitraName': next.mitraName,
+      });
+      return;
+    }
+
+    if (next is PairingActiveData) {
+      // Direct route into the active chat — happens after the brief "found"
+      // animation if the user is already on this screen.
+      context.go('/chat/session/${next.sessionId}', extra: next.mitraName);
+      return;
+    }
+
+    if (next is PairingFailedData) {
+      // Terminal — payment_session is failed_pairing.
+      context.go('/chat/no-bestie');
+      return;
+    }
+
+    if (next is PairingCancelledData) {
+      context.go('/home');
+      return;
+    }
+
+    if (next is PairingTargetedUnavailableData && !_unavailableDialogShown) {
+      _unavailableDialogShown = true;
+      // ignore: discarded_futures
+      BestieUnavailableDialog.show(
+        context,
+        paymentSessionId: next.paymentSessionId,
+        mitraName: next.mitraName,
+        topicSensitivity: next.topicSensitivity,
+      ).then((_) {
+        if (mounted) _unavailableDialogShown = false;
+      });
+      return;
+    }
+
+    if (next is PairingErrorData) {
+      // Inline error UX is preferred over SnackBars (project memory:
+      // "Avoid SnackBars for provider errors"). The build below renders
+      // a banner when the state is PairingErrorData.
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final pairingState = ref.watch(pairingProvider);
 
     return Scaffold(
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const CircularProgressIndicator(),
-              const SizedBox(height: 32),
-              const Text(
-                'Mencari Bestie...',
-                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
-              ),
-              const SizedBox(height: 8),
-              const Text(
-                'Tunggu sebentar ya, kami sedang mencarikan Bestie untukmu',
-                textAlign: TextAlign.center,
-                style: TextStyle(fontSize: 16, color: Colors.grey),
-              ),
-              const SizedBox(height: 48),
-              OutlinedButton(
-                onPressed: () => ref.read(pairingProvider.notifier).cancelPairing(),
-                child: const Text('Batalkan'),
-              ),
-            ],
-          ),
+      body: SafeArea(
+        child: Stack(
+          children: [
+            _SearchingBody(state: pairingState),
+            if (pairingState is PairingTargetedWaitingData)
+              TargetedWaitingOverlay(waiting: pairingState),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SearchingBody extends ConsumerWidget {
+  final PairingData state;
+  const _SearchingBody({required this.state});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isTargetedWaiting = state is PairingTargetedWaitingData;
+    final errorMessage = state is PairingErrorData ? (state as PairingErrorData).message : null;
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const CircularProgressIndicator(),
+            const SizedBox(height: 32),
+            Text(
+              isTargetedWaiting ? 'Menghubungi bestie...' : 'Mencari Bestie...',
+              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 8),
+            const Text(
+              'Tunggu sebentar ya, kami sedang mencarikan Bestie untukmu',
+              textAlign: TextAlign.center,
+              style: TextStyle(fontSize: 16, color: Colors.grey),
+            ),
+            if (errorMessage != null) ...[
+              const SizedBox(height: 24),
+              Container(
+                padding: const EdgeInsets.all(12),
+                decoration: BoxDecoration(
+                  color: Colors.red.shade50,
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(color: Colors.red.shade200),
+                ),
+                child: Text(
+                  errorMessage,
+                  style: TextStyle(color: Colors.red.shade900),
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            ],
+            const SizedBox(height: 48),
+            // The targeted-waiting overlay owns its own cancel button — only
+            // show the general cancel CTA when we're in a non-overlay state.
+            if (!isTargetedWaiting)
+              OutlinedButton(
+                onPressed: () => ref.read(pairingProvider.notifier).cancelSearch(),
+                child: const Text('Batalkan'),
+              ),
+          ],
         ),
       ),
     );