openclaw-app 1.2.1 → 1.2.2

package/index.ts

@@ -1,5 +1,6 @@
 import * as fs from "fs";
 import * as path from "path";
+import { fileURLToPath } from "url";
 /**
  * OpenClaw App Channel Plugin
  *
@@ -337,7 +338,23 @@ const RECONNECT_DELAY = 5000;
 const PING_INTERVAL = 30_000; // 30s keepalive — prevents DO hibernation
 const DEFAULT_ACCOUNT_ID = "default";
 const CHANNEL_ID = "openclaw-app";
-const PLUGIN_VERSION = "1.1.9";
+
+function resolvePluginVersion(): string {
+    try {
+        const pluginDir = path.dirname(fileURLToPath(import.meta.url));
+        const pluginMetaPath = path.join(pluginDir, "openclaw.plugin.json");
+        const raw = fs.readFileSync(pluginMetaPath, "utf-8");
+        const parsed = JSON.parse(raw) as { version?: unknown };
+        const version = typeof parsed.version === "string" ? parsed.version.trim() : "";
+        if (version) return version;
+    } catch (_) {
+        // Fallback handled below.
+    }
+    const envVersion = (process.env.OPENCLAW_APP_PLUGIN_VERSION ?? "").trim();
+    return envVersion || "unknown";
+}
+
+const PLUGIN_VERSION = resolvePluginVersion();
 /** Fixed chatSessionKey that routes cron messages to the App inbox UI */
 const INBOX_CHAT_SESSION_KEY = "inbox";
 
@@ -828,7 +845,7 @@ async function handleRelayMessage(ctx: any, accountId: string, state: RelayState
 
         if (state.relayToken) {
             const peerMac = msg.mac as string | undefined;
-            const peerTs = msg.ts as number | undefined;
+            const peerTs = parseHandshakeTs(msg.ts);
             const version = msg.v as string | undefined;
 
             if (!peerMac || peerTs == null) {
@@ -843,6 +860,20 @@ async function handleRelayMessage(ctx: any, accountId: string, state: RelayState
                 ctx.log?.warn?.(`[${CHANNEL_ID}] [${accountId}] [E2E] Handshake timestamp out of window, dropping`);
                 return;
             }
+            const sessionForMac = sessionKey ?? "";
+            const macOk = await verifyHandshakeMac(
+                state.relayToken,
+                "app",
+                sessionForMac,
+                peerPubKey,
+                peerTs,
+                peerMac,
+                version
+            );
+            if (!macOk) {
+                ctx.log?.warn?.(`[${CHANNEL_ID}] [${accountId}] [E2E] Handshake MAC verification failed`);
+                return;
+            }
         }
 
         // V2: Derive persistent shared secret and store it

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
     "id": "openclaw-app",
     "name": "OpenClaw App",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "Mobile app channel for OpenClaw — chat via the OpenClaw App app through a Cloudflare Worker relay.",
     "channels": [
         "openclaw-app"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "openclaw-app",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "OpenClaw App channel plugin — relay bridge for the OpenClaw App app",
     "main": "index.ts",
     "type": "module",

package/pairing_page.dart

@@ -0,0 +1,839 @@
+import 'dart:async';
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:openclaw_mobile/core/gateway/connection_state.dart' as gateway;
+import 'package:openclaw_mobile/core/gateway/gateway_client.dart';
+import 'package:openclaw_mobile/core/storage/preferences.dart';
+import 'package:openclaw_mobile/features/settings/settings_page.dart';
+import 'package:openclaw_mobile/features/settings/settings_provider.dart';
+import 'package:openclaw_mobile/router.dart';
+import 'package:openclaw_mobile/shared/constants.dart';
+import 'package:openclaw_mobile/shared/widgets/connect_failure_dialog.dart';
+import 'package:openclaw_mobile/theme.dart';
+import 'package:openclaw_mobile/l10n/app_localizations.dart';
+
+/// Pairing status
+enum PairingStatus {
+  initial,
+  connecting,
+  connected,
+  pairingRequested,
+  paired,
+  error,
+}
+
+/// Pairing state data
+class PairingState {
+  final PairingStatus status;
+  final String gatewayUrl;
+
+  /// App-generated room id for relay; shown in install prompt and used when connecting.
+  final String? roomId;
+  final String? errorMessage;
+
+  const PairingState({
+    this.status = PairingStatus.initial,
+    this.gatewayUrl = '',
+    this.roomId,
+    this.errorMessage,
+  });
+
+  PairingState copyWith({
+    PairingStatus? status,
+    String? gatewayUrl,
+    String? roomId,
+    String? errorMessage,
+  }) {
+    return PairingState(
+      status: status ?? this.status,
+      gatewayUrl: gatewayUrl ?? this.gatewayUrl,
+      roomId: roomId ?? this.roomId,
+      errorMessage: errorMessage,
+    );
+  }
+}
+
+/// Pairing state notifier
+class PairingNotifier extends StateNotifier<PairingState> {
+  final GatewayClient _gatewayClient;
+  final Ref _ref;
+  StreamSubscription<gateway.ConnectionState>? _connectionSubscription;
+
+  PairingNotifier(this._gatewayClient, this._ref)
+      : super(const PairingState()) {
+    _init();
+  }
+
+  Future<void> _init() async {
+    await loadConfig();
+
+    _connectionSubscription =
+        _gatewayClient.connectionState.listen((connState) {
+      debugPrint('PairingNotifier: connState=$connState');
+      if (connState == gateway.ConnectionState.connected) {
+        debugPrint('PairingNotifier: relay connected, marking as paired');
+        state = state.copyWith(status: PairingStatus.paired);
+        // Persist so next launch skips the pairing page.
+        SharedPreferences.getInstance()
+            .then((p) => p.setBool(AppConstants.prefHasPaired, true));
+      } else if (connState == gateway.ConnectionState.error) {
+        state = state.copyWith(
+          status: PairingStatus.error,
+          errorMessage: 'Connection failed',
+        );
+      } else if (connState == gateway.ConnectionState.connecting ||
+          connState == gateway.ConnectionState.reconnecting) {
+        state = state.copyWith(status: PairingStatus.connecting);
+      } else if (connState == gateway.ConnectionState.disconnected) {
+        if (state.status == PairingStatus.connecting ||
+            state.status == PairingStatus.connected ||
+            state.status == PairingStatus.pairingRequested) {
+          state = state.copyWith(
+            status: PairingStatus.error,
+            errorMessage: '连接已断开，请检查 Gateway 地址是否正确',
+          );
+        } else if (state.status != PairingStatus.paired) {
+          state = state.copyWith(status: PairingStatus.initial);
+        }
+      }
+    });
+  }
+
+  Future<void> loadConfig() async {
+    final prefs = await SharedPreferences.getInstance();
+    final saved = prefs.getString(AppConstants.prefRelayUrl);
+    final relayUrl = (saved?.isNotEmpty == true)
+        ? saved!
+        : PreferencesManager.defaultRelayUrl;
+
+    final cleanUrl = relayUrl.contains('#')
+        ? relayUrl.substring(0, relayUrl.indexOf('#')).trim()
+        : relayUrl;
+
+    // Room id is generated once per device and never overwritten.
+    String? roomId = prefs.getString(AppConstants.prefRelayRoomId);
+    if (roomId == null || roomId.isEmpty) {
+      roomId = _generateRoomId();
+      await prefs.setString(AppConstants.prefRelayRoomId, roomId);
+      // Sync to AppSettingsProvider so the settings page reflects the new value.
+      _ref.read(appSettingsProvider.notifier).setRelayRoomId(roomId);
+    }
+
+    state = state.copyWith(gatewayUrl: cleanUrl, roomId: roomId);
+  }
+
+  /// Generates a hex-segment room id, e.g. `3a8f2c1b-9e4d7a6f-1c5b8e2d`.
+  static String _generateRoomId() {
+    final r = Random.secure();
+    String seg(int n) =>
+        List.generate(n, (_) => r.nextInt(16).toRadixString(16)).join();
+    return '${seg(8)}-${seg(8)}-${seg(8)}';
+  }
+
+  /// Check if already connected and mark as paired
+  bool checkAlreadyConnected() {
+    if (_gatewayClient.state == gateway.ConnectionState.connected) {
+      state = state.copyWith(status: PairingStatus.paired);
+      return true;
+    }
+    return false;
+  }
+
+  void setGatewayUrl(String url) {
+    state = state.copyWith(gatewayUrl: url);
+  }
+
+  static const _connectTimeoutSecs = 8;
+
+  Future<void> connect() async {
+    // Update UI immediately before any async work
+    state = state.copyWith(
+      status: PairingStatus.connecting,
+      errorMessage: null,
+    );
+
+    final prefs = await SharedPreferences.getInstance();
+    final savedUrl = prefs.getString(AppConstants.prefRelayUrl);
+    // Fall back to built-in default so first-run works without manual setup
+    final relayUrl = (savedUrl?.isNotEmpty == true)
+        ? savedUrl!
+        : (state.gatewayUrl.isNotEmpty
+            ? state.gatewayUrl
+            : PreferencesManager.defaultRelayUrl);
+    final relayToken = prefs.getString(AppConstants.prefRelayToken);
+    // Room id is always pre-generated in loadConfig; fall back to state value.
+    final relayRoomId = prefs.getString(AppConstants.prefRelayRoomId) ??
+        state.roomId ??
+        'default';
+
+    state = state.copyWith(gatewayUrl: relayUrl);
+
+    try {
+      await _gatewayClient
+          .connectToRelay(
+        relayUrl: relayUrl,
+        roomId: relayRoomId,
+        token: relayToken,
+      )
+          .timeout(
+        const Duration(seconds: _connectTimeoutSecs),
+        onTimeout: () {
+          state = state.copyWith(
+            status: PairingStatus.error,
+            errorMessage: '连接超时，请确认你是否已完成上方提示的操作：\n1. 安装插件\n2. 重启 Gateway',
+          );
+        },
+      );
+    } catch (e) {
+      state = state.copyWith(
+        status: PairingStatus.error,
+        errorMessage: '连接失败，请确认你是否已完成上方提示的操作：\n1. 安装插件\n2. 重启 Gateway',
+      );
+    }
+  }
+
+  Future<void> startPairing() async {
+    state = state.copyWith(status: PairingStatus.paired);
+  }
+
+  Future<void> disconnect() async {
+    await _gatewayClient.disconnect();
+    state = state.copyWith(
+      status: PairingStatus.initial,
+      errorMessage: null,
+    );
+  }
+
+  @override
+  void dispose() {
+    _connectionSubscription?.cancel();
+    super.dispose();
+  }
+}
+
+/// GatewayClient Provider
+final gatewayClientProvider = Provider<GatewayClient>((ref) {
+  final client = GatewayClient.instance;
+  client.initialize();
+  ref.onDispose(() => client.dispose());
+  return client;
+});
+
+/// Pairing state Provider
+final pairingProvider =
+    StateNotifierProvider<PairingNotifier, PairingState>((ref) {
+  final gatewayClient = ref.watch(gatewayClientProvider);
+  return PairingNotifier(gatewayClient, ref);
+});
+
+/// Pairing page — redesigned UI inspired by paring.html
+class PairingPage extends ConsumerStatefulWidget {
+  /// When true (navigated from Settings), skip the auto-jump-to-chat logic.
+  final bool fromSettings;
+
+  const PairingPage({super.key, this.fromSettings = false});
+
+  @override
+  ConsumerState<PairingPage> createState() => _PairingPageState();
+}
+
+class _PairingPageState extends ConsumerState<PairingPage> {
+  bool _copied = false;
+  int _heroTapCount = 0;
+  DateTime? _lastHeroTapTime;
+
+  void _handleHeroTap() {
+    final now = DateTime.now();
+    if (_lastHeroTapTime == null ||
+        now.difference(_lastHeroTapTime!) > const Duration(seconds: 1)) {
+      _heroTapCount = 1;
+    } else {
+      _heroTapCount++;
+    }
+    _lastHeroTapTime = now;
+
+    if (_heroTapCount >= 5) {
+      _heroTapCount = 0;
+      if (widget.fromSettings) {
+        Navigator.of(context).pop();
+      } else {
+        context.go(AppRoutes.chat);
+      }
+    }
+  }
+
+  String _buildInstallCommands(String? roomId) {
+    final id = roomId ?? '';
+    return '''
+Please complete the following steps in order:
+
+1. Run `openclaw plugins install openclaw-app`
+
+2. When the first step is completed, run `openclaw config set channels.openclaw-app.accounts.default.roomId "$id"` 
+
+3. Then run `openclaw config set channels.openclaw-app.accounts.default.relayUrl "wss://openclaw.rewen.org"` 
+
+4. Then run `openclaw config set channels.openclaw-app.accounts.default.enabled true`
+
+5. After completing steps 1–4, reply exactly:
+"Task complete. Room ID has been set to <the id you just set>.Please wait about 30 seconds, then proactively ask me whether the restart has finished. Once I confirm it is done, you can return to the OpenClaw app to complete the connection."
+
+6. After sending the reply above, run `openclaw gateway restart`
+''';
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // Already connected in this session (e.g. navigated back from chat).
+      if (!widget.fromSettings) {
+        if (ref.read(pairingProvider.notifier).checkAlreadyConnected()) {
+          if (mounted) context.go(AppRoutes.chat);
+          return;
+        }
+      }
+      ref.read(pairingProvider.notifier).loadConfig();
+    });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  void _openSettings() {
+    Navigator.of(context).push(
+      MaterialPageRoute(builder: (_) => const SettingsPage()),
+    );
+  }
+
+  Future<void> _copyCommands(BuildContext context) async {
+    final roomId = ref.read(pairingProvider).roomId ?? '';
+    await Clipboard.setData(ClipboardData(text: _buildInstallCommands(roomId)));
+    if (!mounted) return;
+    setState(() => _copied = true);
+    await Future.delayed(const Duration(seconds: 2));
+    if (mounted) setState(() => _copied = false);
+  }
+
+  // Light: #F4F5F7 — Tailwind gray-100 like
+  // Dark: AppTheme.darkBg (#1e293b in HTML roughly maps to existing AppTheme background)
+  @override
+  Widget build(BuildContext context) {
+    final pairingState = ref.watch(pairingProvider);
+    final theme = Theme.of(context);
+    final isDark = theme.brightness == Brightness.dark;
+
+    ref.listen<PairingState>(pairingProvider, (prev, next) {
+      if (prev?.status != PairingStatus.paired &&
+          next.status == PairingStatus.paired) {
+        if (widget.fromSettings) {
+          if (context.mounted) Navigator.of(context).pop();
+        } else {
+          context.go(AppRoutes.chat);
+        }
+      }
+      if (prev?.status != PairingStatus.error &&
+          next.status == PairingStatus.error &&
+          next.errorMessage != null) {
+        unawaited(showConnectFailureDialog(context));
+      }
+    });
+
+    return Scaffold(
+      backgroundColor: isDark ? AppTheme.darkBg : const Color(0xFFF4F5F7),
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        scrolledUnderElevation: 0,
+        forceMaterialTransparency: true,
+        iconTheme: IconThemeData(
+            color: isDark ? Colors.white : AppTheme.lightTextPrimary),
+        automaticallyImplyLeading: false,
+        leading: widget.fromSettings
+            ? IconButton(
+                icon: const Icon(Icons.arrow_back_rounded),
+                onPressed: () => Navigator.of(context).pop(),
+              )
+            : null,
+        actions: widget.fromSettings
+            ? null
+            : [
+                IconButton(
+                  tooltip: AppLocalizations.of(context)!.settings,
+                  icon: const Icon(Icons.settings_outlined),
+                  onPressed: _openSettings,
+                ),
+              ],
+      ),
+      body: SafeArea(
+        bottom: false,
+        child: Center(
+          child: ConstrainedBox(
+            // constrain max width like the app-frame
+            constraints: const BoxConstraints(maxWidth: 600),
+            child: _buildMainView(theme, isDark, pairingState),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // ================================================================
+  // Main view (initial / error state)
+  // ================================================================
+
+  // Remove explicit height variable since it floats in the layout now.
+  Widget _buildMainView(ThemeData theme, bool isDark, PairingState pState) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return SingleChildScrollView(
+          padding: const EdgeInsets.fromLTRB(12, 0, 12, 40),
+          child: ConstrainedBox(
+            constraints: BoxConstraints(minHeight: constraints.maxHeight - 32),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildHeroSection(),
+                _buildTitleSection(theme, isDark),
+                const SizedBox(height: 32),
+                _buildInstructionCard(theme, isDark, pState),
+                const SizedBox(height: 32),
+                _buildConnectArea(theme, isDark, pState),
+                const SizedBox(
+                    height: 64), // extra bottom space for layout bump
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildHeroSection() {
+    return GestureDetector(
+      onTap: _handleHeroTap,
+      child: Container(
+        margin: const EdgeInsets.only(top: 8, bottom: 12),
+        width: 110,
+        height: 110,
+        alignment: Alignment.center,
+        child: Image.asset(
+          AppConstants.logoAsset,
+          width: 96,
+          height: 96,
+          fit: BoxFit.contain,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildTitleSection(ThemeData theme, bool isDark) {
+    return Column(
+      children: [
+        Text(
+          AppLocalizations.of(context)!.connectToServer,
+          style: theme.textTheme.headlineSmall?.copyWith(
+            fontWeight: FontWeight.w700,
+            fontSize: 28,
+            letterSpacing: -0.5,
+            color:
+                isDark ? AppTheme.darkTextPrimary : AppTheme.lightTextPrimary,
+          ),
+          textAlign: TextAlign.center,
+        ),
+        const SizedBox(height: 8),
+        Text(
+          AppLocalizations.of(context)!.followStepsToPair,
+          style: theme.textTheme.bodyMedium?.copyWith(
+            fontSize: 16,
+            color:
+                isDark ? AppTheme.darkTextSecondary : const Color(0xFF6B7280),
+          ),
+          textAlign: TextAlign.center,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildInstructionCard(
+      ThemeData theme, bool isDark, PairingState pairingState) {
+    final cardBg = isDark ? AppTheme.darkSurface : Colors.white;
+    final codeBg =
+        isDark ? AppTheme.darkSurfaceElevated : const Color(0xFFF8FAFC);
+    final borderColor = isDark ? AppTheme.darkBorder : const Color(0xFFE2E8F0);
+
+    return Container(
+      decoration: BoxDecoration(
+        color: cardBg,
+        borderRadius: BorderRadius.circular(24),
+        border: isDark ? Border.all(color: AppTheme.darkBorderStrong) : null,
+        boxShadow: isDark
+            ? null
+            : [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.05),
+                  blurRadius: 6,
+                  offset: const Offset(0, 4),
+                ),
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.05),
+                  blurRadius: 25,
+                  offset: const Offset(0, 20),
+                ),
+              ],
+      ),
+      padding: const EdgeInsets.all(16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            AppLocalizations.of(context)!.tellYourAgent,
+            style: theme.textTheme.titleMedium?.copyWith(
+              fontSize: 18,
+              fontWeight: FontWeight.w600,
+              color:
+                  isDark ? AppTheme.darkTextPrimary : AppTheme.lightTextPrimary,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            AppLocalizations.of(context)!.sendInstructionToOpenClaw,
+            style: theme.textTheme.bodyMedium?.copyWith(
+              fontSize: 14,
+              color: isDark
+                  ? AppTheme.darkTextSecondary
+                  : AppTheme.lightTextSecondary,
+              height: 1.4,
+            ),
+          ),
+          const SizedBox(height: 16),
+          // Code block container
+          Container(
+            width: double.infinity,
+            decoration: BoxDecoration(
+              color: codeBg,
+              borderRadius: BorderRadius.circular(16),
+              border: Border.all(color: borderColor),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                // Header of code block
+                Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  decoration: BoxDecoration(
+                    border: Border(
+                      bottom: BorderSide(color: borderColor),
+                    ),
+                    color: isDark
+                        ? Colors.white.withValues(alpha: 0.05)
+                        : Colors.white.withValues(alpha: 0.5),
+                  ),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        'INSTRUCTIONS',
+                        style: TextStyle(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w600,
+                          color: isDark
+                              ? AppTheme.darkTextSecondary
+                              : const Color(0xFF6B7280),
+                          letterSpacing: 0.5,
+                        ),
+                      ),
+                      GestureDetector(
+                        onTap: () => _copyCommands(context),
+                        child: AnimatedContainer(
+                          duration: const Duration(milliseconds: 200),
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 12, vertical: 6),
+                          decoration: BoxDecoration(
+                            color: _copied
+                                ? const Color(0xFF10B981)
+                                : const Color(0xFF0EA5E9),
+                            border: Border.all(
+                                color: _copied
+                                    ? const Color(0xFF10B981)
+                                    : const Color(0xFF0EA5E9)),
+                            borderRadius: BorderRadius.circular(20),
+                            boxShadow: [
+                              BoxShadow(
+                                color: const Color(0xFF0EA5E9)
+                                    .withValues(alpha: 0.2),
+                                blurRadius: 4,
+                                offset: const Offset(0, 2),
+                              ),
+                            ],
+                          ),
+                          child: Row(
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              Icon(
+                                _copied
+                                    ? Icons.check_rounded
+                                    : Icons.copy_rounded,
+                                size: 14,
+                                color: Colors.white,
+                              ),
+                              const SizedBox(width: 6),
+                              Text(
+                                _copied ? 'Copied!' : 'Copy',
+                                style: const TextStyle(
+                                  fontSize: 13,
+                                  fontWeight: FontWeight.w600,
+                                  color: Colors.white,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                // Code content area
+                Container(
+                  constraints: const BoxConstraints(maxHeight: 110),
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+                  child: SingleChildScrollView(
+                    child: Text(
+                      _buildInstallCommands(pairingState.roomId),
+                      style: TextStyle(
+                        fontFamily: 'monospace',
+                        fontSize: 12.0,
+                        color: isDark
+                            ? const Color(0xFFCBD5E1)
+                            : const Color(0xFF334155),
+                        height: 1.15,
+                        letterSpacing: -0.5,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildErrorBanner(ThemeData theme, String messageKey) {
+    String msg = messageKey;
+    if (messageKey.contains('断开')) {
+      msg = AppLocalizations.of(context)!.connectionDisconnectedCheckAddress;
+    } else if (messageKey.contains('超时')) {
+      msg = AppLocalizations.of(context)!.connectTimeoutAction;
+    } else if (messageKey.contains('失败')) {
+      msg = AppLocalizations.of(context)!.connectFailedAction;
+    }
+
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      decoration: BoxDecoration(
+        color: AppTheme.brandRed.withValues(alpha: 0.08),
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: AppTheme.brandRed.withValues(alpha: 0.2)),
+      ),
+      child: Row(
+        children: [
+          const Icon(
+            Icons.error_outline_rounded,
+            size: 16,
+            color: AppTheme.brandRed,
+          ),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Text(
+              msg,
+              style: const TextStyle(
+                fontSize: 13,
+                color: AppTheme.brandRed,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildConnectArea(ThemeData theme, bool isDark, PairingState pState) {
+    final isLoading = pState.status == PairingStatus.connecting;
+
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (pState.status == PairingStatus.error &&
+              pState.errorMessage != null) ...[
+            _buildErrorBanner(theme, pState.errorMessage!),
+            const SizedBox(height: 12),
+          ],
+          SizedBox(
+            width: double.infinity,
+            height: 56,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                color: isLoading
+                    ? const Color(0xFFD84742)
+                    : const Color(0xFFEC5B55),
+                borderRadius: BorderRadius.circular(20),
+                boxShadow: isLoading
+                    ? null
+                    : [
+                        BoxShadow(
+                          color: const Color(0xFFEC5B55).withValues(alpha: 0.3),
+                          blurRadius: 15,
+                          offset: const Offset(0,
+                              7), // 10px 15px -3px in CSS equivalent translated loosely
+                        ),
+                      ],
+              ),
+              child: Material(
+                color: Colors.transparent,
+                borderRadius: BorderRadius.circular(20),
+                child: InkWell(
+                  borderRadius: BorderRadius.circular(20),
+                  highlightColor: const Color(0xFFD84742),
+                  splashColor: const Color(0xFFD84742).withValues(alpha: 0.5),
+                  onTap: isLoading
+                      ? null
+                      : () {
+                          // If already connected, navigate immediately without updating state
+                          final gw = ref.read(gatewayClientProvider);
+                          if (gw.state == gateway.ConnectionState.connected) {
+                            if (widget.fromSettings) {
+                              Navigator.of(context).pop();
+                            } else {
+                              context.go(AppRoutes.chat);
+                            }
+                            return;
+                          }
+                          ref.read(pairingProvider.notifier).connect();
+                        },
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: isLoading
+                        ? [
+                            const SizedBox(
+                              width: 20,
+                              height: 20,
+                              child: CircularProgressIndicator(
+                                strokeWidth: 2,
+                                color: Colors.white,
+                              ),
+                            ),
+                            const SizedBox(width: 10),
+                            Text(
+                              AppLocalizations.of(context)!.connecting,
+                              style: const TextStyle(
+                                fontSize: 18,
+                                fontWeight: FontWeight.w600,
+                                color: Colors.white,
+                              ),
+                            ),
+                          ]
+                        : [
+                            Text(
+                              AppLocalizations.of(context)!.connect,
+                              style: const TextStyle(
+                                fontSize: 18,
+                                fontWeight: FontWeight.w600,
+                                color: Colors.white,
+                              ),
+                            ),
+                            const SizedBox(width: 8),
+                            const Icon(Icons.arrow_forward_rounded,
+                                size: 20, color: Colors.white),
+                          ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 16),
+          _buildLegalText(isDark),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildLegalText(bool isDark) {
+    final l10n = AppLocalizations.of(context)!;
+    final mutedColor =
+        isDark ? AppTheme.darkTextTertiary : const Color(0xFF9CA3AF);
+    final linkColor =
+        isDark ? AppTheme.darkTextSecondary : const Color(0xFF6B7280);
+    const fontSize = 12.0;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: Text.rich(
+        TextSpan(
+          style: TextStyle(fontSize: fontSize, color: mutedColor, height: 1.5),
+          children: [
+            TextSpan(text: l10n.agreementPrefix),
+            WidgetSpan(
+              alignment: PlaceholderAlignment.baseline,
+              baseline: TextBaseline.alphabetic,
+              child: GestureDetector(
+                onTap: () => _openUrl(AppConstants.privacyPolicyUrl),
+                child: Text(
+                  l10n.privacyPolicy,
+                  style: TextStyle(
+                    fontSize: fontSize,
+                    color: linkColor,
+                    decoration: TextDecoration.underline,
+                    decorationColor: linkColor.withOpacity(0.4),
+                  ),
+                ),
+              ),
+            ),
+            TextSpan(text: l10n.agreementAnd),
+            WidgetSpan(
+              alignment: PlaceholderAlignment.baseline,
+              baseline: TextBaseline.alphabetic,
+              child: GestureDetector(
+                onTap: () => _openUrl(AppConstants.termsOfServiceUrl),
+                child: Text(
+                  l10n.termsOfService,
+                  style: TextStyle(
+                    fontSize: fontSize,
+                    color: linkColor,
+                    decoration: TextDecoration.underline,
+                    decorationColor: linkColor.withOpacity(0.4),
+                  ),
+                ),
+              ),
+            ),
+            TextSpan(text: l10n.agreementSuffix),
+          ],
+        ),
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+
+  Future<void> _openUrl(String url) async {
+    final uri = Uri.parse(url);
+    if (!await launchUrl(uri, mode: LaunchMode.externalApplication)) {
+      debugPrint('Could not launch $url');
+    }
+  }
+}