Merge pull request #68 from bobleer/main

feat(remote): update notices

Author: GCWing

src/apps/desktop/src/api/remote_connect_api.rs

@@ -1,12 +1,14 @@
 //! Tauri commands for Remote Connect.
 
 use bitfun_core::service::remote_connect::{
-    bot::BotConfig, ConnectionMethod, ConnectionResult, PairingState, RemoteConnectConfig,
+    bot::BotConfig, lan, ConnectionMethod, ConnectionResult, PairingState, RemoteConnectConfig,
     RemoteConnectService,
 };
 use once_cell::sync::OnceCell;
+use regex::Regex;
 use serde::{Deserialize, Serialize};
 use std::path::PathBuf;
+use std::process::Command;
 use std::sync::Arc;
 use tokio::sync::RwLock;
 
@@ -220,6 +222,65 @@ pub struct DeviceInfo {
     pub mac_address: String,
 }
 
+#[derive(Debug, Serialize)]
+pub struct LanNetworkInfo {
+    pub local_ip: String,
+    pub gateway_ip: Option<String>,
+}
+
+fn detect_default_gateway_ip() -> Option<String> {
+    #[cfg(target_os = "macos")]
+    {
+        let output = Command::new("route")
+            .args(["-n", "get", "default"])
+            .output()
+            .ok()?;
+        if !output.status.success() {
+            return None;
+        }
+        let stdout = String::from_utf8_lossy(&output.stdout);
+        let re = Regex::new(r"(?m)^\s*gateway:\s*([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)\s*$").ok()?;
+        return re
+            .captures(&stdout)
+            .and_then(|c| c.get(1).map(|m| m.as_str().to_string()));
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        let output = Command::new("ip")
+            .args(["route", "show", "default"])
+            .output()
+            .ok()?;
+        if !output.status.success() {
+            return None;
+        }
+        let stdout = String::from_utf8_lossy(&output.stdout);
+        let re = Regex::new(r"(?m)^default\s+via\s+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)\b").ok()?;
+        return re
+            .captures(&stdout)
+            .and_then(|c| c.get(1).map(|m| m.as_str().to_string()));
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+        let output = Command::new("route").args(["print", "-4"]).output().ok()?;
+        if !output.status.success() {
+            return None;
+        }
+        let stdout = String::from_utf8_lossy(&output.stdout);
+        let re = Regex::new(
+            r"(?m)^\s*0\.0\.0\.0\s+0\.0\.0\.0\s+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)\s+",
+        )
+        .ok()?;
+        return re
+            .captures(&stdout)
+            .and_then(|c| c.get(1).map(|m| m.as_str().to_string()));
+    }
+
+    #[allow(unreachable_code)]
+    None
+}
+
 // ── Tauri Commands ─────────────────────────────────────────────────
 
 #[tauri::command]
@@ -236,6 +297,21 @@ pub async fn remote_connect_get_device_info() -> Result<DeviceInfo, String> {
     })
 }
 
+#[tauri::command]
+pub async fn remote_connect_get_lan_ip() -> Result<String, String> {
+    lan::get_local_ip().map_err(|e| format!("get local ip: {e}"))
+}
+
+#[tauri::command]
+pub async fn remote_connect_get_lan_network_info() -> Result<LanNetworkInfo, String> {
+    let local_ip = lan::get_local_ip().map_err(|e| format!("get local ip: {e}"))?;
+    let gateway_ip = detect_default_gateway_ip();
+    Ok(LanNetworkInfo {
+        local_ip,
+        gateway_ip,
+    })
+}
+
 #[tauri::command]
 pub async fn remote_connect_get_methods() -> Result<Vec<ConnectionMethodInfo>, String> {
     ensure_service().await?;

src/apps/desktop/src/lib.rs

@@ -557,6 +557,8 @@ pub async fn run() {
             i18n_set_config,
             // Remote Connect
             api::remote_connect_api::remote_connect_get_device_info,
+            api::remote_connect_api::remote_connect_get_lan_ip,
+            api::remote_connect_api::remote_connect_get_lan_network_info,
             api::remote_connect_api::remote_connect_get_methods,
             api::remote_connect_api::remote_connect_start,
             api::remote_connect_api::remote_connect_stop,

src/web-ui/src/app/components/NavPanel/NavPanel.scss

@@ -620,6 +620,76 @@ $_section-header-height: 24px;
   }
 }
 
+.bitfun-nav-panel__remote-disclaimer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--color-text-secondary);
+  padding: 12px 0 14px;
+}
+
+.bitfun-nav-panel__remote-disclaimer-text {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.2;
+  color: var(--color-text-muted);
+}
+
+.bitfun-nav-panel__remote-disclaimer-list {
+  margin: 0;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  li {
+    font-size: 12px;
+    line-height: 1.2;
+    color: var(--color-text-secondary);
+    padding-right: 0;
+  }
+}
+
+.bitfun-nav-panel__remote-disclaimer-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.bitfun-nav-panel__remote-disclaimer-btn {
+  border-radius: 6px;
+  border: 1px solid transparent;
+  min-width: 112px;
+  padding: 7px 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all $motion-fast $easing-standard;
+}
+
+.bitfun-nav-panel__remote-disclaimer-btn--secondary {
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
+  border-color: var(--border-subtle);
+
+  &:hover:not(:disabled) {
+    color: var(--color-text-primary);
+    border-color: var(--border-medium);
+  }
+}
+
+.bitfun-nav-panel__remote-disclaimer-btn--primary {
+  background: var(--color-accent-600, #2563eb);
+  color: #fff;
+  border-color: color-mix(in srgb, var(--color-accent-700, #1d4ed8) 35%, transparent);
+
+  &:hover:not(:disabled) {
+    background: var(--color-accent-700, #1d4ed8);
+  }
+}
+
 // ──────────────────────────────────────────────
 // Reduced motion
 // ──────────────────────────────────────────────

src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { Settings, Info, MoreVertical, PictureInPicture2, Wifi } from 'lucide-react';
-import { Tooltip } from '@/component-library';
+import { Tooltip, Modal } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useSceneManager } from '../../../hooks/useSceneManager';
 import { useToolbarModeContext } from '@/flow_chat/components/toolbar-mode/ToolbarModeContext';
@@ -10,6 +10,16 @@ import NotificationButton from '../../TitleBar/NotificationButton';
 import { AboutDialog } from '../../AboutDialog';
 import { RemoteConnectDialog } from '../../RemoteConnectDialog';
 
+const REMOTE_CONNECT_DISCLAIMER_KEY = 'bitfun:remote-connect:disclaimer-agreed:v1';
+
+const getRemoteDisclaimerAgreed = (): boolean => {
+  try {
+    return localStorage.getItem(REMOTE_CONNECT_DISCLAIMER_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
 const PersistentFooterActions: React.FC = () => {
   const { t } = useI18n('common');
   const { openScene } = useSceneManager();
@@ -21,6 +31,8 @@ const PersistentFooterActions: React.FC = () => {
   const [menuClosing, setMenuClosing] = useState(false);
   const [showAbout, setShowAbout] = useState(false);
   const [showRemoteConnect, setShowRemoteConnect] = useState(false);
+  const [showRemoteDisclaimer, setShowRemoteDisclaimer] = useState(false);
+  const [hasAgreedRemoteDisclaimer, setHasAgreedRemoteDisclaimer] = useState<boolean>(() => getRemoteDisclaimerAgreed());
 
   const closeMenu = useCallback(() => {
     setMenuClosing(true);
@@ -53,14 +65,33 @@ const PersistentFooterActions: React.FC = () => {
     enableToolbarMode();
   };
 
-  const handleRemoteConnect = () => {
+  const handleRemoteConnect = useCallback(async () => {
     if (!hasWorkspace) {
       warning(t('header.remoteConnectRequiresWorkspace'));
       return;
     }
+
     closeMenu();
+
+    if (hasAgreedRemoteDisclaimer || getRemoteDisclaimerAgreed()) {
+      setHasAgreedRemoteDisclaimer(true);
+      setShowRemoteConnect(true);
+      return;
+    }
+
+    setShowRemoteDisclaimer(true);
+  }, [hasWorkspace, warning, t, closeMenu, hasAgreedRemoteDisclaimer]);
+
+  const handleAgreeDisclaimer = useCallback(() => {
+    try {
+      localStorage.setItem(REMOTE_CONNECT_DISCLAIMER_KEY, 'true');
+    } catch {
+      // Ignore storage failures and keep in-memory consent for current session.
+    }
+    setHasAgreedRemoteDisclaimer(true);
+    setShowRemoteDisclaimer(false);
     setShowRemoteConnect(true);
-  };
+  }, []);
 
   return (
     <div className="bitfun-nav-panel__footer">
@@ -140,6 +171,53 @@ const PersistentFooterActions: React.FC = () => {
       <NotificationButton className="bitfun-nav-panel__footer-btn" />
       <AboutDialog isOpen={showAbout} onClose={() => setShowAbout(false)} />
       <RemoteConnectDialog isOpen={showRemoteConnect} onClose={() => setShowRemoteConnect(false)} />
+      <Modal
+        isOpen={showRemoteDisclaimer}
+        onClose={() => setShowRemoteDisclaimer(false)}
+        title={t('remoteConnect.disclaimerTitle')}
+        showCloseButton
+        size="large"
+        contentInset
+      >
+        <div className="bitfun-nav-panel__remote-disclaimer">
+          <p className="bitfun-nav-panel__remote-disclaimer-text">{t('remoteConnect.disclaimerIntro')}</p>
+          <ol className="bitfun-nav-panel__remote-disclaimer-list">
+            <li>{t('remoteConnect.disclaimerItemBeta')}</li>
+            <li>{t('remoteConnect.disclaimerItemSecurity')}</li>
+            <li>{t('remoteConnect.disclaimerItemEncryption')}</li>
+            <li>{t('remoteConnect.disclaimerItemOpenSource')}</li>
+            <li>{t('remoteConnect.disclaimerItemPrivacy')}</li>
+            <li>{t('remoteConnect.disclaimerItemDataUsage')}</li>
+            <li>{t('remoteConnect.disclaimerItemCredentials')}</li>
+            <li>{t('remoteConnect.disclaimerItemQrCode')}</li>
+            <li>{t('remoteConnect.disclaimerItemNgrok')}</li>
+            <li>{t('remoteConnect.disclaimerItemSelfHosted')}</li>
+            <li>{t('remoteConnect.disclaimerItemNetwork')}</li>
+            <li>{t('remoteConnect.disclaimerItemBot')}</li>
+            <li>{t('remoteConnect.disclaimerItemBotPersistence')}</li>
+            <li>{t('remoteConnect.disclaimerItemMobileBrowser')}</li>
+            <li>{t('remoteConnect.disclaimerItemCompliance')}</li>
+            <li>{t('remoteConnect.disclaimerItemLiability')}</li>
+          </ol>
+
+          <div className="bitfun-nav-panel__remote-disclaimer-actions">
+            <button
+              type="button"
+              className="bitfun-nav-panel__remote-disclaimer-btn bitfun-nav-panel__remote-disclaimer-btn--secondary"
+              onClick={() => setShowRemoteDisclaimer(false)}
+            >
+              {t('remoteConnect.disclaimerDecline')}
+            </button>
+            <button
+              type="button"
+              className="bitfun-nav-panel__remote-disclaimer-btn bitfun-nav-panel__remote-disclaimer-btn--primary"
+              onClick={handleAgreeDisclaimer}
+            >
+              {t('remoteConnect.disclaimerAgree')}
+            </button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };

src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss

@@ -206,6 +206,16 @@
   max-width: 420px;
 }
 
+.bitfun-remote-connect__description-link {
+  color: var(--color-text-muted);
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-text-muted);
+  }
+}
+
 .bitfun-remote-connect__error {
   font-size: 12px;
   color: var(--color-danger);
@@ -276,11 +286,17 @@
   transition: all 0.15s ease;
 
   &--connect {
-    background: var(--color-accent);
+    background: var(--color-accent-600, #2563eb);
     color: #fff;
+    border: 1px solid color-mix(in srgb, var(--color-accent-700, #1d4ed8) 35%, transparent);
 
     &:hover:not(:disabled) {
-      opacity: 0.9;
+      background: var(--color-accent-700, #1d4ed8);
+    }
+
+    &:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--color-accent-500, #3b82f6) 55%, transparent);
+      outline-offset: 1px;
     }
 
     &:disabled {
@@ -326,11 +342,12 @@
 }
 
 .bitfun-remote-connect__step-link {
-  color: var(--color-accent);
+  color: var(--color-text-muted);
   text-decoration: underline;
   cursor: pointer;
 
   &:hover {
-    opacity: 0.85;
+    color: var(--color-text-muted);
   }
 }
+