Phase 4 Stage 8: returning-user shell + Tanya Admin sheet

Bestie Choice Sheet on home Mulai Curhat CTA. When the user has at
least one prior session (bestieHistoryHasItemsProvider hits the chat-
sessions history endpoint), the CTA opens a HaloBottomSheet with two
cards: 'bestie yang udah kenal' -> /chat/history, 'bestie baru' ->
/payment/entry. Empty history -> direct to /payment/entry.

Bestie history list visual upgrade: HaloOrb (mitraId seed) + name +
last-session date + topic pills + sessions count + ONLINE pill.
Backend getCustomerHistory now returns topics, mitra_is_online,
sessions_count in a single payload (no per-row presence round-trip).

BestieOfflinePopup with two variants (returning | new_) replacing the
legacy BestieUnavailableDialog. tanya admin ghost CTA on both variants
opens the new TanyaAdminSheet. Stage 5's targeted-wait declined stub
+ Stage 7's chat-screen 409 stub + searching-screen call site all
migrated to the real component.

TanyaAdminSheet: HaloBottomSheet with WA + Telegram buttons, deeplinks
fetched via supportHandlesProvider (CC-config-driven). url_launcher
added to client_app; ios LSApplicationQueriesSchemes covers
https/http/whatsapp/tg.

Stage 2's OTP-blocked popup hubungi admin SnackBar stub also migrated
to TanyaAdminSheet.

Dev-only POST /internal/_test/seed-history-session lets Maestro 08
flow seed a history row before exercising the choice sheet.

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

client_app/lib/features/auth/widgets/otp_blocked_popup.dart

@@ -2,12 +2,13 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import '../../../core/theme/halo_tokens.dart';
 import '../../../core/theme/widgets/widgets.dart';
+import '../../support/widgets/tanya_admin_sheet.dart';
 
 /// Modal shown when OTP delivery / verification is exhausted (rate-limited
 /// 429 from `OTP_RATE_LIMIT_PHONE`, `OTP_RATE_LIMIT_IP`, `OTP_COOLDOWN`, or
 /// `OTP_ATTEMPTS_EXCEEDED`). Offers a "lanjut tanpa verif" exit into the
-/// anonymous flow (preserving any ESP/USP state) and a stub "hubungi admin"
-/// affordance — Stage 8 will wire the real Tanya Admin sheet.
+/// anonymous flow (preserving any ESP/USP state) and a "hubungi admin" CTA
+/// that opens the Tanya Admin sheet.
 class OtpBlockedPopup {
   const OtpBlockedPopup._();
 
@@ -44,12 +45,8 @@ class OtpBlockedPopup {
       secondary: HaloPopupAction(
         label: 'hubungi admin',
         onPressed: () {
-          // TODO(stage8): replace with Tanya Admin sheet.
-          ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(
-              content: Text('Tanya Admin akan tersedia segera.'),
-            ),
-          );
+          // ignore: discarded_futures
+          TanyaAdminSheet.show(context);
         },
       ),
     );

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

@@ -3,140 +3,323 @@ 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';
+import '../../../core/theme/halo_tokens.dart';
+import '../../../core/theme/widgets/widgets.dart';
+import '../../home/providers/bestie_history_provider.dart';
 
-/// Chat history with per-row "Curhat lagi" CTA.
+/// Phase 4 Stage 8 — `BestieHistoryList`.
 ///
-/// 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(...)`.
+/// Renders past sessions with the v4 visual: orb + name + last-session date
+/// + topic chips + sessions count + ONLINE pill (per-row, sourced from the
+/// `mitra_is_online` field on the history payload).
 ///
-/// The CTA is per-row (not per-unique-mitra).
-class ChatHistoryScreen extends ConsumerStatefulWidget {
+/// Tapping a row routes to the targeted "Curhat lagi" payment flow when the
+/// row references a known mitra; closing-state rows still drop into the
+/// session screen so the user can finish the goodbye composer. Otherwise we
+/// fall back to the transcript view.
+class ChatHistoryScreen extends ConsumerWidget {
   const ChatHistoryScreen({super.key});
 
   @override
-  ConsumerState<ChatHistoryScreen> createState() => _ChatHistoryScreenState();
-}
+  Widget build(BuildContext context, WidgetRef ref) {
+    final historyAsync = ref.watch(bestieHistoryProvider);
+    final fullSessionsAsync = ref.watch(_rawHistoryProvider);
 
-class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
-  List<Map<String, dynamic>> _sessions = [];
-  bool _loading = true;
-
-  @override
-  void initState() {
-    super.initState();
-    _loadHistory();
-  }
-
-  Future<void> _loadHistory() async {
-    try {
-      final api = ref.read(apiClientProvider);
-      final response = await api.get('/api/client/chat/history');
-      final items = (response['data']['items'] as List<dynamic>).cast<Map<String, dynamic>>();
-      setState(() {
-        _sessions = items;
-        _loading = false;
-      });
-    } catch (_) {
-      setState(() => _loading = false);
-    }
-  }
-
-  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(
-      appBar: AppBar(title: const Text('Riwayat Chat')),
-      body: _loading
-          ? const Center(child: CircularProgressIndicator())
-          : _sessions.isEmpty
-              ? const Center(child: Text('Belum ada riwayat chat'))
-              : 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';
-                    final endedAt = s['ended_at'] != null
-                        ? DateTime.parse(s['ended_at'] as String).toLocal()
-                        : null;
-                    final duration = s['duration_minutes'] as int?;
-                    final closureMsg = s['customer_closure_message'] as String?;
-
-                    return ListTile(
-                      leading: const CircleAvatar(child: Icon(Icons.person)),
-                      title: Row(
-                        children: [
-                          Flexible(child: Text(mitraName, overflow: TextOverflow.ellipsis)),
-                          if (isClosing) ...[
-                            const SizedBox(width: 8),
-                            const _OutstandingClosureBadge(),
-                          ],
-                        ],
-                      ),
-                      subtitle: Text([
-                        if (endedAt != null) '${endedAt.day}/${endedAt.month}/${endedAt.year}',
-                        if (duration != null) '$duration menit',
-                        if (closureMsg != null) '"$closureMsg"',
-                      ].join(' - ')),
-                      // 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'),
-                    );
-                  },
+      backgroundColor: HaloTokens.bg,
+      appBar: AppBar(
+        backgroundColor: HaloTokens.bg,
+        foregroundColor: HaloTokens.ink,
+        elevation: 0,
+        title: const Text(
+          'Riwayat Chat',
+          style: TextStyle(
+            fontFamily: HaloTokens.fontDisplay,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ),
+      body: historyAsync.when(
+        loading: () => const Center(child: CircularProgressIndicator()),
+        error: (_, __) => const Center(
+          child: Text(
+            'gagal memuat riwayat. tarik untuk muat ulang.',
+            style: TextStyle(fontFamily: HaloTokens.fontBody),
+          ),
+        ),
+        data: (items) {
+          if (items.isEmpty) {
+            return const Center(
+              child: Text(
+                'Belum ada riwayat chat',
+                style: TextStyle(
+                  fontFamily: HaloTokens.fontBody,
+                  color: HaloTokens.inkSoft,
                 ),
+              ),
+            );
+          }
+          return RefreshIndicator(
+            onRefresh: () async {
+              ref.invalidate(bestieHistoryProvider);
+              ref.invalidate(_rawHistoryProvider);
+              await ref.read(bestieHistoryProvider.future);
+            },
+            child: ListView.separated(
+              padding: const EdgeInsets.symmetric(
+                horizontal: HaloSpacing.s16,
+                vertical: HaloSpacing.s12,
+              ),
+              itemCount: items.length,
+              separatorBuilder: (_, __) => const SizedBox(height: HaloSpacing.s12),
+              itemBuilder: (context, index) {
+                final item = items[index];
+                final raw = fullSessionsAsync.valueOrNull?[index];
+                final isClosing = raw?['status'] == SessionStatus.closing;
+                return _BestieRow(
+                  item: item,
+                  isClosing: isClosing,
+                  onTap: () {
+                    if (isClosing && raw != null) {
+                      context.push(
+                        '/chat/session/${item.sessionId}',
+                        extra: item.mitraName,
+                      );
+                      return;
+                    }
+                    context.push('/chat/history/${item.sessionId}');
+                  },
+                  onCurhatLagi: item.mitraId == null || isClosing
+                      ? null
+                      : () => context.push('/payment', extra: <String, dynamic>{
+                            'targetedMitraId': item.mitraId,
+                            'mitraName': item.mitraName,
+                            'topicSensitivity': TopicSensitivity.regular,
+                          }),
+                );
+              },
+            ),
+          );
+        },
+      ),
     );
   }
 }
 
-class _OutstandingClosureBadge extends StatelessWidget {
-  const _OutstandingClosureBadge();
+/// Raw history payload — used to read fields the v4 `BestieHistoryItem`
+/// model doesn't surface (currently `status`, for the closing-row branch).
+final _rawHistoryProvider = FutureProvider<List<Map<String, dynamic>>>((ref) async {
+  final api = ref.read(apiClientProvider);
+  final response = await api.get('/api/client/chat/history');
+  return ((response['data']['items'] as List?) ?? const []).cast<Map<String, dynamic>>();
+});
+
+class _BestieRow extends StatelessWidget {
+  final BestieHistoryItem item;
+  final bool isClosing;
+  final VoidCallback onTap;
+  final VoidCallback? onCurhatLagi;
+
+  const _BestieRow({
+    required this.item,
+    required this.isClosing,
+    required this.onTap,
+    required this.onCurhatLagi,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: HaloTokens.surface,
+      borderRadius: HaloRadius.lg,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: HaloRadius.lg,
+        child: Padding(
+          padding: const EdgeInsets.all(HaloSpacing.s16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  HaloOrb(
+                    size: 56,
+                    seed: (item.mitraId ?? item.mitraName).hashCode,
+                    label: item.mitraName,
+                  ),
+                  const SizedBox(width: HaloSpacing.s12),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Flexible(
+                              child: Text(
+                                item.mitraName,
+                                overflow: TextOverflow.ellipsis,
+                                style: const TextStyle(
+                                  fontFamily: HaloTokens.fontDisplay,
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.w700,
+                                  color: HaloTokens.ink,
+                                ),
+                              ),
+                            ),
+                            if (item.mitraIsOnline) ...[
+                              const SizedBox(width: HaloSpacing.s8),
+                              const _OnlinePill(),
+                            ],
+                            if (isClosing) ...[
+                              const SizedBox(width: HaloSpacing.s8),
+                              const _ClosingBadge(),
+                            ],
+                          ],
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          [
+                            if (item.endedAt != null) _formatDate(item.endedAt!),
+                            '${item.sessionsCount} sesi',
+                          ].join(' · '),
+                          style: const TextStyle(
+                            fontFamily: HaloTokens.fontBody,
+                            fontSize: 12.5,
+                            color: HaloTokens.inkSoft,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+              if (item.topics.isNotEmpty) ...[
+                const SizedBox(height: HaloSpacing.s12),
+                Wrap(
+                  spacing: HaloSpacing.s8,
+                  runSpacing: HaloSpacing.s8,
+                  children: item.topics
+                      .take(3)
+                      .map((t) => _TopicPill(label: t))
+                      .toList(),
+                ),
+              ],
+              if (onCurhatLagi != null) ...[
+                const SizedBox(height: HaloSpacing.s12),
+                Align(
+                  alignment: Alignment.centerRight,
+                  child: HaloButton(
+                    label: 'curhat lagi',
+                    size: HaloButtonSize.sm,
+                    variant: HaloButtonVariant.secondary,
+                    onPressed: onCurhatLagi,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  String _formatDate(DateTime d) =>
+      '${d.day.toString().padLeft(2, '0')}/${d.month.toString().padLeft(2, '0')}/${d.year}';
+}
+
+class _OnlinePill extends StatelessWidget {
+  const _OnlinePill();
 
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
       decoration: BoxDecoration(
-        color: Colors.amber.shade100,
-        borderRadius: BorderRadius.circular(12),
-        border: Border.all(color: Colors.amber.shade700, width: 0.5),
+        color: HaloTokens.success.withAlpha(36),
+        borderRadius: BorderRadius.circular(999),
+      ),
+      child: const Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _Dot(color: HaloTokens.success),
+          SizedBox(width: 4),
+          Text(
+            'ONLINE',
+            style: TextStyle(
+              fontFamily: HaloTokens.fontBody,
+              fontSize: 10,
+              fontWeight: FontWeight.w700,
+              letterSpacing: 0.6,
+              color: HaloTokens.success,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _Dot extends StatelessWidget {
+  final Color color;
+  const _Dot({required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 6,
+      height: 6,
+      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+    );
+  }
+}
+
+class _TopicPill extends StatelessWidget {
+  final String label;
+  const _TopicPill({required this.label});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: HaloSpacing.s12,
+        vertical: 4,
+      ),
+      decoration: BoxDecoration(
+        color: HaloTokens.brandSofter,
+        borderRadius: BorderRadius.circular(999),
       ),
       child: Text(
-        'Belum ditutup',
-        style: TextStyle(
-          fontSize: 10,
-          color: Colors.amber.shade900,
+        label,
+        style: const TextStyle(
+          fontFamily: HaloTokens.fontBody,
+          fontSize: 11.5,
           fontWeight: FontWeight.w600,
+          color: HaloTokens.brandDark,
+        ),
+      ),
+    );
+  }
+}
+
+class _ClosingBadge extends StatelessWidget {
+  const _ClosingBadge();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      decoration: BoxDecoration(
+        color: HaloTokens.accentSoft,
+        borderRadius: BorderRadius.circular(999),
+      ),
+      child: const Text(
+        'Belum ditutup',
+        style: TextStyle(
+          fontFamily: HaloTokens.fontBody,
+          fontSize: 10,
+          fontWeight: FontWeight.w600,
+          color: HaloTokens.brandDark,
         ),
       ),
     );

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

@@ -8,8 +8,8 @@ import '../../../core/chat/session_closure_notifier.dart';
 import '../../../core/config/app_config_provider.dart';
 import '../../../core/constants.dart';
 import '../../../core/theme/halo_tokens.dart';
-import '../../../core/theme/widgets/halo_popup.dart';
 import '../../../core/theme/widgets/halo_snackbar.dart';
+import '../widgets/bestie_unavailable_dialog.dart';
 import '../widgets/chat_expired_banner.dart';
 import '../widgets/closing_message_sheet.dart';
 import '../widgets/confirm_end_step1.dart';
@@ -169,13 +169,10 @@ class _ChatScreenState extends ConsumerState<ChatScreen> {
     if (_rejectPopupShown) return;
     _rejectPopupShown = true;
     if (!mounted) return;
-    // TODO(stage8): replace with BestieOfflinePopup variant: 'returning'
-    await HaloPopup.show<void>(
+    await BestieOfflinePopup.show(
       context,
-      title: 'bestie lagi balik...',
-      body: 'sesi belum bisa ditutup karena bestie masih nyaut. coba lagi sebentar ya.',
-      icon: const Text('🔄', style: TextStyle(fontSize: 40)),
-      primary: HaloPopupAction(label: 'oke', onPressed: () {}),
+      variant: BestieOfflineVariant.returning,
+      mitraName: widget.mitraName,
     );
     _rejectPopupShown = false;
     // Reset closure state so the user can retry without a stale-error block.

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

@@ -70,10 +70,11 @@ class _SearchingScreenState extends ConsumerState<SearchingScreen> {
     if (next is PairingTargetedUnavailableData && !_unavailableDialogShown) {
       _unavailableDialogShown = true;
       // ignore: discarded_futures
-      BestieUnavailableDialog.show(
+      BestieOfflinePopup.show(
         context,
-        paymentSessionId: next.paymentSessionId,
+        variant: BestieOfflineVariant.returning,
         mitraName: next.mitraName,
+        paymentSessionId: next.paymentSessionId,
         topicSensitivity: next.topicSensitivity,
       ).then((_) {
         if (mounted) _unavailableDialogShown = false;

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

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import '../../../core/pairing/pairing_notifier.dart';
 import '../../../core/theme/halo_tokens.dart';
 import '../../../core/theme/widgets/widgets.dart';
+import '../widgets/bestie_unavailable_dialog.dart';
 
 /// Phase 4 Stage 5 — `SWaitingBestie` overlay.
 ///
@@ -16,9 +17,9 @@ import '../../../core/theme/widgets/widgets.dart';
 ///   The countdown is purely cosmetic; the server owns the auto-reject timer.
 /// - `accepted` (PairingBestieFoundData / PairingActiveData) — routes into
 ///   the chat screen immediately.
-/// - `declined` (PairingTargetedUnavailableData) — shows the bestie-offline
-///   popup. TODO(stage8): swap this stub for the proper BestieOfflinePopup
-///   component once Stage 8 lands.
+/// - `declined` (PairingTargetedUnavailableData) — shows the
+///   [BestieOfflinePopup] returning variant; the popup may offer a
+///   fallback-to-blast CTA when other besties are reachable.
 class TargetedWaitingScreen extends ConsumerStatefulWidget {
   final String mitraId;
   const TargetedWaitingScreen({super.key, required this.mitraId});
@@ -58,21 +59,13 @@ class _TargetedWaitingScreenState extends ConsumerState<TargetedWaitingScreen> {
     }
     if (next is PairingTargetedUnavailableData && !_popupShown) {
       _popupShown = true;
-      // TODO(stage8): replace stub with the production BestieOfflinePopup
-      // (Stage 8 owns the proper variant + fallback-to-blast surface).
       // ignore: discarded_futures
-      HaloPopup.show(
+      BestieOfflinePopup.show(
         context,
-        title: '${next.mitraName} lagi nggak online',
-        body:
-            'bestie kamu belum bisa nerima chat sekarang. coba bestie lain atau balik ke beranda dulu ya.',
-        primary: HaloPopupAction(
-          label: 'kembali ke home',
-          onPressed: () {
-            ref.read(pairingProvider.notifier).reset();
-            if (mounted) context.go('/home');
-          },
-        ),
+        variant: BestieOfflineVariant.returning,
+        mitraName: next.mitraName,
+        paymentSessionId: next.paymentSessionId,
+        topicSensitivity: next.topicSensitivity,
       ).then((_) {
         if (mounted) _popupShown = false;
       });

client_app/lib/features/chat/widgets/bestie_unavailable_dialog.dart

@@ -4,50 +4,56 @@ import 'package:go_router/go_router.dart';
 import '../../../core/availability/mitra_availability_notifier.dart';
 import '../../../core/constants.dart';
 import '../../../core/pairing/pairing_notifier.dart';
+import '../../../core/theme/halo_tokens.dart';
+import '../../../core/theme/widgets/widgets.dart';
+import '../../support/widgets/tanya_admin_sheet.dart';
 
-/// Shown when a "Curhat lagi" attempt against a specific bestie can't proceed
-/// — either a 409 `targeted_mitra_offline` response on the targeted POST, or
-/// one of the intermediate WS events (`returning_chat_timeout`,
-/// `returning_chat_rejected`).
+/// Phase 4 Stage 8 — `BestieOfflinePopup`.
 ///
-/// CTAs:
-/// - "Chat dengan bestie lain" — only rendered when
-///   [mitraAvailabilityProvider] reports `available == true` at the time of
-///   build. Tapping calls [Pairing.fallbackToBlast] (reuses the same payment
-///   session — no double-charge) and closes the dialog. The caller is expected
-///   to be the searching screen, which will transition into PairingSearchingData
-///   and stay put.
-/// - "Kembali" — pops dialog and routes home. Backend has already audit-logged
-///   the targeted failure; payment session stays `confirmed` until the sweeper
-///   expires it.
-class BestieUnavailableDialog extends ConsumerWidget {
-  final String paymentSessionId;
-  final String mitraName;
-  final TopicSensitivity topicSensitivity;
+/// Two variants:
+/// - [BestieOfflineVariant.returning] — the customer tried to chat with a
+///   specific mitra (history "Curhat lagi"); the targeted attempt failed
+///   (409 `targeted_mitra_offline`, or WS `returning_chat_timeout` /
+///   `returning_chat_rejected`). Payment session is still `confirmed`, so we
+///   surface a `Chat dengan bestie lain` primary CTA when other besties are
+///   reachable (calls [Pairing.fallbackToBlast]).
+/// - [BestieOfflineVariant.new_] — the customer triggered a general blast
+///   that bottomed out (no online besties). No fallback button; just a
+///   ghost `tanya admin` and a `kembali ke home` exit.
+///
+/// Both variants expose `tanya admin` via a ghost CTA that opens the
+/// [TanyaAdminSheet].
+enum BestieOfflineVariant { returning, new_ }
 
-  const BestieUnavailableDialog({
+class BestieOfflinePopup extends ConsumerWidget {
+  final BestieOfflineVariant variant;
+  final String mitraName;
+  final String? paymentSessionId;
+  final TopicSensitivity? topicSensitivity;
+
+  const BestieOfflinePopup({
     super.key,
-    required this.paymentSessionId,
+    required this.variant,
     required this.mitraName,
-    required this.topicSensitivity,
+    this.paymentSessionId,
+    this.topicSensitivity,
   });
 
-  /// Convenience: show this dialog and return when it closes. Per project
-  /// memory ("Riverpod ref.listen in build is unsafe"), callers should
-  /// invoke this from `ref.listenManual` callbacks in `initState`, not from
-  /// `build`.
   static Future<void> show(
     BuildContext context, {
-    required String paymentSessionId,
+    required BestieOfflineVariant variant,
     required String mitraName,
-    required TopicSensitivity topicSensitivity,
+    String? paymentSessionId,
+    TopicSensitivity? topicSensitivity,
   }) {
     return showDialog<void>(
       context: context,
       barrierDismissible: false,
-      builder: (_) => BestieUnavailableDialog(
-        paymentSessionId: paymentSessionId,
+      barrierColor: const Color(0x66000000),
+      builder: (_) => BestieOfflinePopup(
+        variant: variant,
         mitraName: mitraName,
+        paymentSessionId: paymentSessionId,
         topicSensitivity: topicSensitivity,
       ),
     );
@@ -55,44 +61,122 @@ class BestieUnavailableDialog extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    // Snapshot at dialog-open time — we don't keep listening, we just check
-    // whether other bestie are around right now.
     final availabilityAsync = ref.watch(mitraAvailabilityProvider);
     final hasOtherAvailable = availabilityAsync.valueOrNull ?? false;
 
-    return AlertDialog(
-      title: const Text('Bestie sedang tidak online'),
-      content: Text(
-        '$mitraName sedang tidak bisa menerima chat saat ini. '
-        'Kamu bisa coba chat dengan bestie lain atau kembali ke beranda.',
-      ),
-      actions: [
-        TextButton(
-          onPressed: () {
-            // Reset pairing state and route home. Payment session stays
-            // confirmed until sweeper expires it — no extra API call needed.
-            ref.read(pairingProvider.notifier).reset();
-            Navigator.of(context).pop();
-            context.go('/home');
-          },
-          child: const Text('Kembali'),
+    final isReturning = variant == BestieOfflineVariant.returning;
+    final title = isReturning ? '$mitraName lagi nggak online' : 'semua bestie lagi istirahat';
+    final body = isReturning
+        ? 'bestie kamu belum bisa nerima chat sekarang. coba bestie lain atau balik ke beranda dulu ya.'
+        : 'lagi nggak ada bestie yang siap dengerin. coba lagi bentar, atau hubungin admin biar dibantu.';
+
+    final canFallbackToBlast = isReturning &&
+        hasOtherAvailable &&
+        paymentSessionId != null &&
+        topicSensitivity != null;
+
+    return Dialog(
+      backgroundColor: HaloTokens.surface,
+      elevation: 0,
+      shape: const RoundedRectangleBorder(borderRadius: HaloRadius.xl),
+      insetPadding: const EdgeInsets.symmetric(horizontal: HaloSpacing.s24),
+      child: Padding(
+        padding: const EdgeInsets.all(HaloSpacing.s24),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Center(
+              child: Container(
+                width: 64,
+                height: 64,
+                decoration: const BoxDecoration(
+                  color: HaloTokens.brandSofter,
+                  shape: BoxShape.circle,
+                ),
+                alignment: Alignment.center,
+                child: const Icon(
+                  Icons.cloud_off_outlined,
+                  color: HaloTokens.brandDark,
+                  size: 28,
+                ),
+              ),
+            ),
+            const SizedBox(height: HaloSpacing.s16),
+            Text(
+              title,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontFamily: HaloTokens.fontDisplay,
+                fontSize: 22,
+                height: 28 / 22,
+                fontWeight: FontWeight.w700,
+                color: HaloTokens.ink,
+              ),
+            ),
+            const SizedBox(height: HaloSpacing.s12),
+            Text(
+              body,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontFamily: HaloTokens.fontBody,
+                fontSize: 15,
+                height: 22 / 15,
+                color: HaloTokens.inkSoft,
+              ),
+            ),
+            const SizedBox(height: HaloSpacing.s24),
+            if (canFallbackToBlast)
+              HaloButton(
+                label: 'chat dengan bestie lain',
+                fullWidth: true,
+                onPressed: () {
+                  Navigator.of(context).pop();
+                  // ignore: discarded_futures
+                  ref.read(pairingProvider.notifier).fallbackToBlast(
+                        paymentSessionId: paymentSessionId!,
+                        topicSensitivity: topicSensitivity!,
+                      );
+                },
+              )
+            else
+              HaloButton(
+                label: 'kembali ke home',
+                fullWidth: true,
+                onPressed: () {
+                  ref.read(pairingProvider.notifier).reset();
+                  Navigator.of(context).pop();
+                  context.go('/home');
+                },
+              ),
+            const SizedBox(height: HaloSpacing.s8),
+            HaloButton(
+              label: 'tanya admin',
+              variant: HaloButtonVariant.ghost,
+              fullWidth: true,
+              onPressed: () {
+                // Keep the popup open underneath; the sheet sits on top and
+                // closes back to it.
+                // ignore: discarded_futures
+                TanyaAdminSheet.show(context);
+              },
+            ),
+            if (canFallbackToBlast) ...[
+              const SizedBox(height: HaloSpacing.s4),
+              HaloButton(
+                label: 'kembali ke home',
+                variant: HaloButtonVariant.ghost,
+                fullWidth: true,
+                onPressed: () {
+                  ref.read(pairingProvider.notifier).reset();
+                  Navigator.of(context).pop();
+                  context.go('/home');
+                },
+              ),
+            ],
+          ],
         ),
-        if (hasOtherAvailable)
-          ElevatedButton(
-            onPressed: () {
-              // Close the dialog first, then kick off the fallback. The
-              // searching screen will pick up the new PairingSearchingData
-              // state and render normally (no targeted overlay).
-              Navigator.of(context).pop();
-              // ignore: discarded_futures
-              ref.read(pairingProvider.notifier).fallbackToBlast(
-                    paymentSessionId: paymentSessionId,
-                    topicSensitivity: topicSensitivity,
-                  );
-            },
-            child: const Text('Chat dengan bestie lain'),
-          ),
-      ],
+      ),
     );
   }
 }

client_app/lib/features/home/home_screen.dart

@@ -6,6 +6,8 @@ import '../../core/availability/mitra_availability_notifier.dart';
 import '../../core/chat/active_session_notifier.dart';
 import '../../core/notifications/notif_permission.dart';
 import '../../core/theme/halo_tokens.dart';
+import 'providers/bestie_history_provider.dart';
+import 'widgets/bestie_choice_sheet.dart';
 
 /// Session-only dismiss flag for the "notif denied" banner. Resets on cold
 /// restart by design — `StateProvider` lives in memory only.
@@ -58,16 +60,27 @@ class _HomeScreenState extends ConsumerState<HomeScreen> with WidgetsBindingObse
     }
   }
 
-  void _onStartChatPressed(BuildContext context) {
+  Future<void> _onStartChatPressed(BuildContext context) async {
     // Phase 4 Stage 2 removes the home-screen topic sensitivity prompt; the
     // ESP picks collected during onboarding feed the same column server-side
     // (info-only — no longer drives matching). Mitras still flip
     // `topic_sensitivity` mid-session via the AppBar toggle.
     //
-    // Phase 4 Stage 3: enter the new multi-screen payment shell. The entry
-    // route picks discount-paywall vs. method-pick based on first-session
-    // eligibility. The legacy `/payment` route is preserved for the
-    // chat-history "Curhat lagi" path until Stage 5 migrates it.
+    // Phase 4 Stage 8: returning users get the bestie-choice sheet first; new
+    // users skip straight to the multi-screen payment shell. We fetch the
+    // history-has-items flag on-tap so a stale cache from logout/login doesn't
+    // mis-route. On error (e.g. offline), fall back to the new-user path.
+    bool hasHistory;
+    try {
+      hasHistory = await ref.read(bestieHistoryHasItemsProvider.future);
+    } catch (_) {
+      hasHistory = false;
+    }
+    if (!context.mounted) return;
+    if (hasHistory) {
+      await BestieChoiceSheet.show(context);
+      return;
+    }
     context.push('/payment/entry');
   }
 

client_app/lib/features/home/providers/bestie_history_provider.dart

@@ -0,0 +1,50 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../core/api/api_client_provider.dart';
+
+class BestieHistoryItem {
+  final String sessionId;
+  final String? mitraId;
+  final String mitraName;
+  final DateTime? endedAt;
+  final List<String> topics;
+  final int sessionsCount;
+  final bool mitraIsOnline;
+
+  const BestieHistoryItem({
+    required this.sessionId,
+    required this.mitraId,
+    required this.mitraName,
+    required this.endedAt,
+    required this.topics,
+    required this.sessionsCount,
+    required this.mitraIsOnline,
+  });
+
+  factory BestieHistoryItem.fromJson(Map<String, dynamic> json) {
+    final endedAtRaw = json['ended_at'];
+    return BestieHistoryItem(
+      sessionId: json['id'] as String,
+      mitraId: json['mitra_id'] as String?,
+      mitraName: json['mitra_display_name'] as String? ?? 'Bestie',
+      endedAt: endedAtRaw is String ? DateTime.tryParse(endedAtRaw)?.toLocal() : null,
+      topics: (json['topics'] as List?)?.cast<String>() ?? const [],
+      sessionsCount: (json['sessions_count'] as num?)?.toInt() ?? 1,
+      mitraIsOnline: json['mitra_is_online'] as bool? ?? false,
+    );
+  }
+}
+
+final bestieHistoryProvider = FutureProvider<List<BestieHistoryItem>>((ref) async {
+  final api = ref.read(apiClientProvider);
+  final response = await api.get('/api/client/chat/history');
+  final items = (response['data']['items'] as List<dynamic>? ?? [])
+      .cast<Map<String, dynamic>>();
+  return items.map(BestieHistoryItem.fromJson).toList();
+});
+
+/// Cheap derived provider used by the home CTA to decide whether to show the
+/// bestie-choice sheet or skip straight into the new-payment flow.
+final bestieHistoryHasItemsProvider = FutureProvider<bool>((ref) async {
+  final items = await ref.watch(bestieHistoryProvider.future);
+  return items.isNotEmpty;
+});

client_app/lib/features/home/widgets/bestie_choice_sheet.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import '../../../core/theme/halo_tokens.dart';
+import '../../../core/theme/widgets/widgets.dart';
+
+/// Phase 4 Stage 8 — Bestie Choice Sheet.
+///
+/// Triggered from the home `Mulai Curhat` CTA when the user has at least one
+/// prior session. Two cards: continue with a known bestie (→ history list)
+/// vs. find a new bestie (→ soft-prompt + blast).
+class BestieChoiceSheet extends StatelessWidget {
+  const BestieChoiceSheet({super.key});
+
+  static Future<void> show(BuildContext context) {
+    return HaloBottomSheet.show<void>(
+      context,
+      child: const BestieChoiceSheet(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Text(
+          'mau curhat sama siapa?',
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            fontFamily: HaloTokens.fontDisplay,
+            fontSize: 22,
+            fontWeight: FontWeight.w700,
+            color: HaloTokens.ink,
+          ),
+        ),
+        const SizedBox(height: HaloSpacing.s8),
+        const Text(
+          'pilih lanjut sama bestie yang udah kenal, atau coba bestie baru.',
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            fontFamily: HaloTokens.fontBody,
+            fontSize: 14,
+            color: HaloTokens.inkSoft,
+          ),
+        ),
+        const SizedBox(height: HaloSpacing.s24),
+        _ChoiceCard(
+          title: 'bestie yang udah kenal',
+          subtitle: 'lanjut cerita ke bestie yang pernah dengerin kamu.',
+          icon: Icons.favorite_outline,
+          onTap: () {
+            Navigator.of(context).pop();
+            context.push('/chat/history');
+          },
+        ),
+        const SizedBox(height: HaloSpacing.s12),
+        _ChoiceCard(
+          title: 'bestie baru',
+          subtitle: 'cari bestie baru yang siap dengerin sekarang.',
+          icon: Icons.auto_awesome_outlined,
+          onTap: () {
+            Navigator.of(context).pop();
+            context.push('/payment/entry');
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class _ChoiceCard extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final VoidCallback onTap;
+
+  const _ChoiceCard({
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: HaloTokens.brandSofter,
+      borderRadius: HaloRadius.lg,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: HaloRadius.lg,
+        child: Padding(
+          padding: const EdgeInsets.all(HaloSpacing.s16),
+          child: Row(
+            children: [
+              Container(
+                width: 48,
+                height: 48,
+                decoration: const BoxDecoration(
+                  color: HaloTokens.brandSoft,
+                  shape: BoxShape.circle,
+                ),
+                alignment: Alignment.center,
+                child: Icon(icon, color: HaloTokens.brandDark, size: 24),
+              ),
+              const SizedBox(width: HaloSpacing.s12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: const TextStyle(
+                        fontFamily: HaloTokens.fontDisplay,
+                        fontSize: 16,
+                        fontWeight: FontWeight.w700,
+                        color: HaloTokens.ink,
+                      ),
+                    ),
+                    const SizedBox(height: 2),
+                    Text(
+                      subtitle,
+                      style: const TextStyle(
+                        fontFamily: HaloTokens.fontBody,
+                        fontSize: 13,
+                        height: 18 / 13,
+                        color: HaloTokens.inkSoft,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const Icon(Icons.chevron_right, color: HaloTokens.brandDark),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

client_app/lib/features/support/providers/support_handles_provider.dart

@@ -0,0 +1,33 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../core/api/api_client_provider.dart';
+
+class SupportHandle {
+  final String label;
+  final String deeplink;
+  const SupportHandle({required this.label, required this.deeplink});
+
+  factory SupportHandle.fromJson(Map<String, dynamic> json) =>
+      SupportHandle(
+        label: json['label'] as String? ?? '',
+        deeplink: json['deeplink'] as String? ?? '',
+      );
+}
+
+class SupportHandles {
+  final SupportHandle? wa;
+  final SupportHandle? telegram;
+  const SupportHandles({this.wa, this.telegram});
+
+  factory SupportHandles.fromJson(Map<String, dynamic> json) {
+    SupportHandle? parse(dynamic v) =>
+        v is Map<String, dynamic> ? SupportHandle.fromJson(v) : null;
+    return SupportHandles(wa: parse(json['wa']), telegram: parse(json['telegram']));
+  }
+}
+
+final supportHandlesProvider = FutureProvider<SupportHandles>((ref) async {
+  final api = ref.read(apiClientProvider);
+  final response = await api.get('/api/client/support-handles');
+  final data = response['data'] as Map<String, dynamic>? ?? const {};
+  return SupportHandles.fromJson(data);
+});

client_app/lib/features/support/widgets/tanya_admin_sheet.dart

@@ -0,0 +1,131 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:url_launcher/url_launcher.dart';
+import '../../../core/theme/halo_tokens.dart';
+import '../../../core/theme/widgets/widgets.dart';
+import '../providers/support_handles_provider.dart';
+
+/// Phase 4 Stage 8 — Tanya Admin sheet.
+///
+/// Reads handles from `supportHandlesProvider` (CC-config-driven) and surfaces
+/// WA + Telegram deeplinks. Tap → `url_launcher` external app. No webview.
+class TanyaAdminSheet extends ConsumerWidget {
+  const TanyaAdminSheet({super.key});
+
+  static Future<void> show(BuildContext context) {
+    return HaloBottomSheet.show<void>(
+      context,
+      child: const TanyaAdminSheet(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final handlesAsync = ref.watch(supportHandlesProvider);
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Text(
+          'tanya admin',
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            fontFamily: HaloTokens.fontDisplay,
+            fontSize: 22,
+            fontWeight: FontWeight.w700,
+            color: HaloTokens.ink,
+          ),
+        ),
+        const SizedBox(height: HaloSpacing.s8),
+        const Text(
+          'pilih cara yang paling enak buat kamu — admin bakal balas secepatnya.',
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            fontFamily: HaloTokens.fontBody,
+            fontSize: 14,
+            color: HaloTokens.inkSoft,
+          ),
+        ),
+        const SizedBox(height: HaloSpacing.s24),
+        handlesAsync.when(
+          loading: () => const Padding(
+            padding: EdgeInsets.symmetric(vertical: HaloSpacing.s24),
+            child: Center(child: CircularProgressIndicator()),
+          ),
+          error: (_, __) => Padding(
+            padding: const EdgeInsets.symmetric(vertical: HaloSpacing.s16),
+            child: Column(
+              children: [
+                const Text(
+                  'gagal mengambil kontak admin. coba lagi sebentar.',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontFamily: HaloTokens.fontBody,
+                    fontSize: 13,
+                    color: HaloTokens.danger,
+                  ),
+                ),
+                const SizedBox(height: HaloSpacing.s12),
+                HaloButton(
+                  label: 'coba lagi',
+                  variant: HaloButtonVariant.secondary,
+                  fullWidth: true,
+                  onPressed: () => ref.invalidate(supportHandlesProvider),
+                ),
+              ],
+            ),
+          ),
+          data: (handles) => Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              if (handles.wa != null)
+                HaloButton(
+                  label: handles.wa!.label.isEmpty ? 'WhatsApp' : handles.wa!.label,
+                  variant: HaloButtonVariant.primary,
+                  fullWidth: true,
+                  icon: const Icon(Icons.chat_bubble_outline),
+                  onPressed: () => _launch(context, handles.wa!.deeplink),
+                ),
+              if (handles.wa != null && handles.telegram != null)
+                const SizedBox(height: HaloSpacing.s12),
+              if (handles.telegram != null)
+                HaloButton(
+                  label: handles.telegram!.label.isEmpty
+                      ? 'Telegram'
+                      : handles.telegram!.label,
+                  variant: HaloButtonVariant.secondary,
+                  fullWidth: true,
+                  icon: const Icon(Icons.send_outlined),
+                  onPressed: () => _launch(context, handles.telegram!.deeplink),
+                ),
+              if (handles.wa == null && handles.telegram == null)
+                const Padding(
+                  padding: EdgeInsets.symmetric(vertical: HaloSpacing.s16),
+                  child: Text(
+                    'kontak admin belum tersedia. coba lagi nanti ya.',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontFamily: HaloTokens.fontBody,
+                      fontSize: 13,
+                      color: HaloTokens.inkSoft,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Future<void> _launch(BuildContext context, String deeplink) async {
+    final uri = Uri.tryParse(deeplink);
+    if (uri == null) return;
+    final ok = await launchUrl(uri, mode: LaunchMode.externalApplication);
+    if (!ok && context.mounted) {
+      // Fall back to platform default if external launch refused.
+      await launchUrl(uri);
+    }
+  }
+}