frontend/README.md

Sentinel App

中文版

Digital Legacy Management

Sentinel is a mobile application that helps users securely manage their digital legacy. Built with React Native (Expo) and TypeScript.

Features

🗞️ Flow - Captain's Journal

• Record daily thoughts, emotions, and reflections
• AI-inferred emotional state tracking
• Archive entries to the encrypted Vault
• Support for text, voice, and image entries

📦 Vault - The Deep Vault

• End-to-end encrypted asset storage
• Support for game accounts, private keys, documents, photos, wills
• Biometric authentication required for access
• Zero-knowledge architecture

⚓ Sentinel - Lighthouse Watch

• Dead Man's Switch monitoring system
• Heartbeat confirmation mechanism
• Subscription and activity tracking
• Configurable grace periods

🧭 Heritage - Fleet Legacy

• Heir management with release levels
• Customizable release order and timing
• Payment strategy configuration
• Legal document-style interface

⛵ Me - Captain's Quarters

• Subscription and protocol status
• Sentinel configuration
• Security center
• Data export and backup
• Social responsibility program

Tech Stack

• Framework: React Native (Expo SDK 52)
• Language: TypeScript
• Navigation: React Navigation (Bottom Tabs)
• Icons: @expo/vector-icons (Feather, Ionicons, FontAwesome5)
• Styling: Custom nautical theme with gradients
• State Management: React Context (AuthContext)
• Storage: AsyncStorage for auth persistence

Configuration

The application uses a centralized configuration file located at src/config/index.ts.

Key Configuration Options

Option	Description	Default
NO_BACKEND_MODE	Use mock data instead of real backend	false
DEBUG_MODE	Enable API debug logging	true
API_BASE_URL	Backend API server URL	http://localhost:8000
API_TIMEOUT	Request timeout (ms)	30000

API Endpoints

All backend API routes are defined in API_ENDPOINTS:

• AUTH: /login, /register
• ASSETS: /assets/get, /assets/create, /assets/claim, /assets/assign
• AI: /ai/proxy
• ADMIN: /admin/declare-guale

Environment Setup

For development, you may need to modify API_BASE_URL in the config file to match your backend server address.

Project Structure

src/
├── components/
│   └── common/
│       ├── BiometricModal.tsx
│       ├── Icons.tsx
│       └── VaultDoorAnimation.tsx
├── config/
│   └── index.ts          # Centralized configuration
├── context/
│   └── AuthContext.tsx   # Authentication state management
├── navigation/
│   ├── AuthNavigator.tsx # Login/Register navigation
│   └── TabNavigator.tsx  # Main app navigation
├── screens/
│   ├── FlowScreen.tsx    # AI chat interface
│   ├── VaultScreen.tsx
│   ├── SentinelScreen.tsx
│   ├── HeritageScreen.tsx
│   ├── MeScreen.tsx
│   ├── LoginScreen.tsx
│   └── RegisterScreen.tsx
├── services/
│   ├── index.ts          # Service exports
│   ├── ai.service.ts     # AI API integration
│   ├── auth.service.ts   # Authentication API
│   ├── assets.service.ts # Asset management API
│   └── admin.service.ts  # Admin operations API
├── theme/
│   └── colors.ts
└── types/
    └── index.ts

assets/
├── icon.png              # App icon (1024x1024)
├── adaptive-icon.png     # Android adaptive icon
├── splash.png            # Splash screen
├── favicon.png           # Web favicon (32x32)
├── favicon.svg           # SVG favicon for web
├── logo.svg              # Vector logo (512x512)
└── images/
    └── captain-avatar.svg  # Avatar placeholder

Services

The application uses a modular service architecture for API communication:

• AuthService: User authentication (login, register)
• AIService: AI conversation proxy with support for text and image input
• AssetsService: Digital asset management
• AdminService: Administrative operations

Icons & Branding

The Sentinel brand uses a nautical anchor-and-star logo on a teal (#459E9E) background.

Logo Elements

• Anchor: Symbolizes stability and anchoring your digital legacy
• Star/Compass: Represents guidance and direction for heirs
• Teal Color: Evokes ocean depth and calm security

Generating Icons

# View icon specifications
node scripts/generate-icons.js

Use the assets/logo.svg as the source and export to required sizes.

Getting Started

# Install dependencies
npm install

# Start the development server
npx expo start

Design Philosophy

• Nautical Theme: Captain's sanctum aesthetic with anchors, ship wheels, and ocean colors
• Emotional Balance: Warm and secure feeling across different tabs
• Privacy First: Zero-knowledge architecture, local encryption
• Elegant UI: Mint gradients, serif typography, subtle shadows

---

中文版

English Version

数字遗产管理

Sentinel 是一款帮助用户安全管理数字遗产的移动应用程序。使用 React Native (Expo) 和 TypeScript 构建。

功能特性

🗞️ Flow - 船长日志

• 记录日常想法、情感和反思
• AI 推断情感状态追踪
• 将条目归档到加密保险库
• 支持文本、语音和图像条目

📦 Vault - 深海宝库

• 端到端加密资产存储
• 支持游戏账号、私钥、文档、照片、遗嘱
• 需要生物识别认证才能访问
• 零知识架构

⚓ Sentinel - 灯塔守望

• 死人开关监控系统
• 心跳确认机制
• 订阅和活动追踪
• 可配置的冷静期

🧭 Heritage - 舰队遗产

• 继承人管理与释放等级
• 可自定义释放顺序和时间
• 付款策略配置
• 法律文书风格界面

⛵ Me - 船长室

• 订阅和协议状态
• 哨兵配置
• 安全中心
• 数据导出和备份
• 社会责任计划

技术栈

• 框架: React Native (Expo SDK 52)
• 语言: TypeScript
• 导航: React Navigation (底部标签)
• 图标: @expo/vector-icons (Feather, Ionicons, FontAwesome5)
• 样式: 自定义航海主题配渐变
• 状态管理: React Context (AuthContext)
• 存储: AsyncStorage 用于认证持久化

配置说明

应用使用位于 src/config/index.ts 的集中配置文件。

主要配置项

选项	说明	默认值
NO_BACKEND_MODE	使用模拟数据而非真实后端	false
DEBUG_MODE	启用 API 调试日志	true
API_BASE_URL	后端 API 服务器地址	http://localhost:8000
API_TIMEOUT	请求超时时间（毫秒）	30000

API 端点

所有后端 API 路由定义在 API_ENDPOINTS 中：

• AUTH: /login, /register
• ASSETS: /assets/get, /assets/create, /assets/claim, /assets/assign
• AI: /ai/proxy
• ADMIN: /admin/declare-guale

环境配置

开发时，您可能需要修改配置文件中的 API_BASE_URL 以匹配您的后端服务器地址。

服务层

应用使用模块化的服务架构进行 API 通信：

• AuthService: 用户认证（登录、注册）
• AIService: AI 对话代理，支持文本和图片输入
• AssetsService: 数字资产管理
• AdminService: 管理员操作

运行项目

# 安装依赖
npm install

# 启动开发服务器
npx expo start

图标与品牌

Sentinel 品牌使用青色(#459E9E)背景上的航海锚与星星标志。

标志元素

• 锚: 象征稳定性和锚定你的数字遗产
• 星星/指南针: 代表对继承人的指引和方向
• 青色: 唤起海洋深度和平静的安全感

生成图标

# 查看图标规格
node scripts/generate-icons.js

使用 assets/logo.svg 作为源文件并导出所需尺寸。

设计理念

• 航海主题: 船长圣殿美学，配以锚、船舵和海洋色彩
• 情感平衡: 不同标签页带来温暖而安全的感觉
• 隐私优先: 零知识架构，本地加密
• 优雅界面: 薄荷渐变、衬线字体、柔和阴影