mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-03 04:42:39 +02:00
feat: Add initial strategic planning, UX design, and verification artifacts, define a new AI-powered crypto assistant epic, update existing epics, and disable SSL for local database connection.
This commit is contained in:
parent
f21e1a5b58
commit
f2e38c52a1
17 changed files with 7028 additions and 739 deletions
800
_bmad-epics/epic-1-ai-powered-crypto-assistant.md
Normal file
800
_bmad-epics/epic-1-ai-powered-crypto-assistant.md
Normal file
|
|
@ -0,0 +1,800 @@
|
||||||
|
# Epic 1: Trợ lý Crypto AI trên Trình duyệt
|
||||||
|
|
||||||
|
**Trạng thái:** ✅ ĐÃ HOÀN THÀNH
|
||||||
|
**Giai đoạn:** Phase 1
|
||||||
|
**Thời gian:** 2 tuần
|
||||||
|
**Mức độ ưu tiên:** P0 (Nghiêm trọng)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tổng quan Epic
|
||||||
|
|
||||||
|
Mang AI co-pilot của SurfSense vào trình duyệt, cho phép users chat với AI, nhận insights về token, và lưu thông tin quan trọng ngay khi đang browse các trang crypto.
|
||||||
|
|
||||||
|
**Giá trị cho User:**
|
||||||
|
- **Chat với AI ngay trong browser** - Không cần chuyển tab, hỏi AI về bất kỳ token nào đang xem.
|
||||||
|
- **Tự động hiểu context** - AI biết bạn đang xem token gì trên DexScreener và đưa ra insights phù hợp.
|
||||||
|
- **Lưu thông tin nhanh** - Một cú click để lưu trang, token, insights vào knowledge base.
|
||||||
|
- **Đồng bộ mọi nơi** - Cài đặt và lịch sử chat được đồng bộ giữa extension và web dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Các phụ thuộc kỹ thuật (Technical Dependencies)
|
||||||
|
|
||||||
|
Epic này phụ thuộc vào các API bên ngoài và backend services. Tất cả các integrations phải đáp ứng tiêu chí Định nghĩa hoàn thành (DoD) bên dưới.
|
||||||
|
|
||||||
|
### 1. DexScreener API Integration [FR-DAT-01]
|
||||||
|
|
||||||
|
**Mục đích:** Trích xuất dữ liệu token thời gian thực cho tính năng hỗ trợ AI nhận biết ngữ cảnh.
|
||||||
|
|
||||||
|
**API Endpoints:**
|
||||||
|
```typescript
|
||||||
|
// Public API (no auth required)
|
||||||
|
GET https://api.dexscreener.com/latest/dex/tokens/{tokenAddress}
|
||||||
|
GET https://api.dexscreener.com/latest/dex/pairs/{chainId}/{pairAddress}
|
||||||
|
GET https://api.dexscreener.com/latest/dex/search?q={query}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Giới hạn tốc độ (Rate Limits):**
|
||||||
|
- **Free Tier:** 300 requests/phút
|
||||||
|
- **Xử lý:** Implement exponential backoff với tối đa 3 lần thử lại (retries)
|
||||||
|
- **Caching:** Cache token data trong 30 giây để giảm lượng API calls
|
||||||
|
|
||||||
|
**Xử lý lỗi (Error Handling):**
|
||||||
|
```typescript
|
||||||
|
// Retry logic
|
||||||
|
async function fetchDexScreenerData(tokenAddress: string, retries = 3) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://api.dexscreener.com/latest/dex/tokens/${tokenAddress}`);
|
||||||
|
|
||||||
|
if (response.status === 429) {
|
||||||
|
// Rate limit exceeded
|
||||||
|
if (retries > 0) {
|
||||||
|
await sleep(2 ** (3 - retries) * 1000); // Exponential backoff
|
||||||
|
return fetchDexScreenerData(tokenAddress, retries - 1);
|
||||||
|
}
|
||||||
|
throw new Error('Rate limit exceeded. Please try again later.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`DexScreener API error: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
// Show user-friendly error
|
||||||
|
showToast('Failed to fetch token data. Please try again.', 'error');
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Định nghĩa hoàn thành (DoD):**
|
||||||
|
- [ ] Rate limiting được implement với exponential backoff
|
||||||
|
- [ ] Xử lý lỗi với thông báo thân thiện cho user
|
||||||
|
- [ ] Caching layer để giảm API calls
|
||||||
|
- [ ] Logic thử lại (tối đa 3 lần)
|
||||||
|
- [ ] Xử lý Timeout (tối đa 5 giây)
|
||||||
|
- [ ] Hỗ trợ chế độ Offline (hiện data đã cache)
|
||||||
|
- [ ] Unit tests cho các kịch bản lỗi
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. DefiLlama API Integration [FR-DAT-02]
|
||||||
|
|
||||||
|
**Mục đích:** TVL, protocol data, và các chỉ số DeFi để phân tích token toàn diện.
|
||||||
|
|
||||||
|
**API Endpoints:**
|
||||||
|
```typescript
|
||||||
|
// Public API (no auth required)
|
||||||
|
GET https://api.llama.fi/protocol/{protocol}
|
||||||
|
GET https://api.llama.fi/tvl/{protocol}
|
||||||
|
GET https://api.llama.fi/charts/{protocol}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Giới hạn tốc độ (Rate Limits):**
|
||||||
|
- **Free Tier:** Không giới hạn (nhưng khuyến nghị tối đa 60 requests/phút)
|
||||||
|
- **Xử lý:** Implement rate limiting ở phía client
|
||||||
|
- **Caching:** Cache protocol data trong 5 phút
|
||||||
|
|
||||||
|
**Error Handling:**
|
||||||
|
```typescript
|
||||||
|
async function fetchDefiLlamaData(protocol: string) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://api.llama.fi/protocol/${protocol}`, {
|
||||||
|
signal: AbortSignal.timeout(5000), // 5 second timeout
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`DefiLlama API error: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
if (error.name === 'TimeoutError') {
|
||||||
|
showToast('Request timed out. Please try again.', 'error');
|
||||||
|
} else {
|
||||||
|
showToast('Failed to fetch protocol data.', 'error');
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Định nghĩa hoàn thành (DoD):**
|
||||||
|
- [ ] Client-side rate limiting (tối đa 60 req/phút)
|
||||||
|
- [ ] Xử lý lỗi với timeout (5 giây)
|
||||||
|
- [ ] Caching layer (5 phút TTL)
|
||||||
|
- [ ] Logic thử lại cho các lỗi tạm thời (transient errors)
|
||||||
|
- [ ] Hỗ trợ chế độ Offline
|
||||||
|
- [ ] Unit tests cho các kịch bản lỗi
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Backend APIs
|
||||||
|
|
||||||
|
**Authentication:**
|
||||||
|
```typescript
|
||||||
|
GET /auth/google // OAuth URL
|
||||||
|
POST /auth/callback // OAuth callback
|
||||||
|
POST /auth/login // Email/password login
|
||||||
|
POST /auth/refresh // Refresh JWT
|
||||||
|
POST /auth/logout // Invalidate token
|
||||||
|
GET /auth/me // Get current user
|
||||||
|
```
|
||||||
|
|
||||||
|
**Settings:**
|
||||||
|
```typescript
|
||||||
|
GET /api/settings // Get user settings (model, search space, connectors)
|
||||||
|
PUT /api/settings // Update settings
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chat:**
|
||||||
|
```typescript
|
||||||
|
GET /api/chat/messages // Get chat history
|
||||||
|
POST /api/chat/messages // Send message (streaming response)
|
||||||
|
POST /api/chat/save // Save chat to backend
|
||||||
|
```
|
||||||
|
|
||||||
|
**Capture:**
|
||||||
|
```typescript
|
||||||
|
POST /api/capture // Capture page content
|
||||||
|
GET /api/captures // List captured pages
|
||||||
|
```
|
||||||
|
|
||||||
|
**Định nghĩa hoàn thành (DoD):**
|
||||||
|
- [ ] Tất cả endpoints được document trong API spec
|
||||||
|
- [ ] Yêu cầu JWT authentication cho các protected endpoints
|
||||||
|
- [ ] Phản hồi lỗi tuân theo format chuẩn:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"error": "Error message",
|
||||||
|
"code": "ERROR_CODE",
|
||||||
|
"details": {}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- [ ] Rate limiting trên backend (100 req/phút mỗi user)
|
||||||
|
- [ ] CORS được cấu hình cho extension origin
|
||||||
|
- [ ] Unit tests cho tất cả endpoints
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Chrome APIs
|
||||||
|
|
||||||
|
**Required Permissions:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"permissions": [
|
||||||
|
"sidePanel",
|
||||||
|
"storage",
|
||||||
|
"tabs",
|
||||||
|
"identity",
|
||||||
|
"activeTab"
|
||||||
|
],
|
||||||
|
"host_permissions": [
|
||||||
|
"https://dexscreener.com/*",
|
||||||
|
"https://api.dexscreener.com/*",
|
||||||
|
"https://api.llama.fi/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chrome Identity API:**
|
||||||
|
```typescript
|
||||||
|
chrome.identity.launchWebAuthFlow({
|
||||||
|
url: `${BACKEND_URL}/auth/google`,
|
||||||
|
interactive: true,
|
||||||
|
}, (redirectUrl) => {
|
||||||
|
// Handle OAuth callback
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chrome Storage API:**
|
||||||
|
```typescript
|
||||||
|
// Plasmo Storage wrapper
|
||||||
|
import { Storage } from "@plasmohq/storage";
|
||||||
|
|
||||||
|
const storage = new Storage();
|
||||||
|
await storage.set("auth_token", encryptedJWT);
|
||||||
|
const token = await storage.get("auth_token");
|
||||||
|
```
|
||||||
|
|
||||||
|
**Định nghĩa hoàn thành (DoD):**
|
||||||
|
- [ ] Manifest permissions được cấu hình
|
||||||
|
- [ ] Host permissions cho tất cả external APIs
|
||||||
|
- [ ] Storage encryption cho dữ liệu nhạy cảm
|
||||||
|
- [ ] Xử lý lỗi khi permission bị từ chối
|
||||||
|
- [ ] Unit tests cho các interactions với Chrome API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
### Story 1.0: Hệ thống Xác thực (Authentication System)
|
||||||
|
**[FR-EXT-00]** ⚠️ **P0 BLOCKER**
|
||||||
|
|
||||||
|
**Là một** SurfSense user,
|
||||||
|
**Tôi muốn** đăng nhập vào extension với tài khoản SurfSense của tôi,
|
||||||
|
**Để** extension có thể đồng bộ settings, lịch sử chat, và truy cập backend APIs.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.0.1: User Login Flow
|
||||||
|
**Given** user chưa đăng nhập vào extension
|
||||||
|
**When** user click nút "Login" trong side panel header
|
||||||
|
**Then** Chrome Identity API popup mở ra với các tùy chọn OAuth (Google, Email/Password)
|
||||||
|
**And** user chọn Google OAuth
|
||||||
|
**And** user hoàn tất quy trình OAuth
|
||||||
|
**Then** extension nhận JWT token từ backend
|
||||||
|
**And** extension chuyển hướng (redirects) về side panel
|
||||||
|
**And** avatar/email của user hiển thị trong header
|
||||||
|
|
||||||
|
**Kịch bản lỗi (Error Scenario):**
|
||||||
|
**Given** user đang trong quy trình OAuth
|
||||||
|
**When** OAuth thất bại (user hủy hoặc lỗi mạng)
|
||||||
|
**Then** extension hiển thị error toast "Login failed. Please try again."
|
||||||
|
**And** user vẫn ở trạng thái chưa xác thực (unauthenticated state)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.0.2: Quản lý JWT Token
|
||||||
|
**Given** backend trả về JWT token (hết hạn sau 7 ngày)
|
||||||
|
**When** extension nhận được token
|
||||||
|
**Then** extension lưu encrypted JWT trong Plasmo Storage
|
||||||
|
**And** thời gian hết hạn của token được lưu
|
||||||
|
|
||||||
|
**Auto-Refresh:**
|
||||||
|
**Given** JWT token còn < 1 ngày là hết hạn
|
||||||
|
**When** extension kiểm tra token expiry (mỗi giờ)
|
||||||
|
**Then** extension gọi API `/auth/refresh`
|
||||||
|
**And** backend trả về JWT token mới
|
||||||
|
**And** extension cập nhật token đã lưu
|
||||||
|
|
||||||
|
**Logout:**
|
||||||
|
**Given** user click "Logout" trong settings dropdown
|
||||||
|
**When** hành động logout được kích hoạt
|
||||||
|
**Then** extension xóa JWT khỏi Plasmo Storage
|
||||||
|
**And** extension gọi API `/auth/logout`
|
||||||
|
**And** user chuyển hướng về màn hình welcome
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.0.3: Authenticated API Requests
|
||||||
|
**Given** user đã đăng nhập (JWT đã lưu)
|
||||||
|
**When** extension thực hiện API request (ví dụ: `/chat/messages`)
|
||||||
|
**Then** request bao gồm header `Authorization: Bearer {JWT}`
|
||||||
|
**And** backend xác thực chữ ký JWT
|
||||||
|
**And** request thành công với status 200
|
||||||
|
|
||||||
|
**Expired Token:**
|
||||||
|
**Given** JWT token đã hết hạn
|
||||||
|
**When** extension thực hiện API request
|
||||||
|
**Then** backend trả về lỗi 401 Unauthorized
|
||||||
|
**And** extension cố gắng auto-refresh
|
||||||
|
**And** nếu refresh thành công, thử lại request ban đầu
|
||||||
|
**And** nếu refresh thất bại, chuyển hướng user đến trang login
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.0.4: Xử lý Offline
|
||||||
|
**Given** user đã đăng nhập trước đó
|
||||||
|
**And** user mất kết nối internet
|
||||||
|
**When** extension cố gắng kết nối backend
|
||||||
|
**Then** extension hiển thị chỉ báo "Offline" trong header
|
||||||
|
**And** extension cache trạng thái auth gần nhất
|
||||||
|
**And** hành động của user (ví dụ: tin nhắn chat) được đưa vào hàng đợi (queued)
|
||||||
|
|
||||||
|
**Khi có mạng trở lại (Back Online):**
|
||||||
|
**Given** user đang offline với các hành động trong hàng đợi
|
||||||
|
**When** kết nối internet được khôi phục
|
||||||
|
**Then** extension đồng bộ các hành động trong hàng đợi với backend
|
||||||
|
**And** chỉ báo "Offline" biến mất
|
||||||
|
**And** user thấy toast thành công "Synced {N} actions"
|
||||||
|
|
||||||
|
**Triển khai kỹ thuật:**
|
||||||
|
```typescript
|
||||||
|
// Use Chrome Identity API for OAuth
|
||||||
|
chrome.identity.launchWebAuthFlow({
|
||||||
|
url: `${BACKEND_URL}/auth/google`,
|
||||||
|
interactive: true,
|
||||||
|
}, (redirectUrl) => {
|
||||||
|
// Extract JWT from redirect URL
|
||||||
|
const jwt = new URL(redirectUrl).searchParams.get('token');
|
||||||
|
|
||||||
|
// Store encrypted JWT
|
||||||
|
await storage.set('auth_token', encrypt(jwt));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-refresh token
|
||||||
|
setInterval(async () => {
|
||||||
|
const token = await storage.get('auth_token');
|
||||||
|
const decoded = decodeJWT(token);
|
||||||
|
|
||||||
|
if (isExpiringSoon(decoded.exp, 1 * 24 * 60 * 60)) {
|
||||||
|
const newToken = await refreshToken(token);
|
||||||
|
await storage.set('auth_token', encrypt(newToken));
|
||||||
|
}
|
||||||
|
}, 60 * 60 * 1000); // Check every hour
|
||||||
|
|
||||||
|
// Include JWT in all API requests
|
||||||
|
const api = {
|
||||||
|
async request(endpoint: string, options: RequestInit = {}) {
|
||||||
|
const token = await storage.get('auth_token');
|
||||||
|
return fetch(`${BACKEND_URL}${endpoint}`, {
|
||||||
|
...options,
|
||||||
|
headers: {
|
||||||
|
...options.headers,
|
||||||
|
'Authorization': `Bearer ${decrypt(token)}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**Cân nhắc bảo mật (Security Considerations):**
|
||||||
|
- Không bao giờ lưu API keys trong extension code (hiển thị cho users)
|
||||||
|
- Mã hóa JWT trong Plasmo Storage
|
||||||
|
- Sử dụng HTTPS cho tất cả API calls
|
||||||
|
- Triển khai CSRF protection
|
||||||
|
- Validate chữ ký JWT trên backend
|
||||||
|
|
||||||
|
**Backend APIs Needed:**
|
||||||
|
```typescript
|
||||||
|
GET /auth/google // OAuth URL
|
||||||
|
POST /auth/callback // OAuth callback
|
||||||
|
POST /auth/login // Email/password login
|
||||||
|
POST /auth/refresh // Refresh JWT
|
||||||
|
POST /auth/logout // Invalidate token
|
||||||
|
GET /auth/me // Get current user
|
||||||
|
```
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `lib/auth/chrome-identity.ts` (new) - Chrome Identity API wrapper
|
||||||
|
- `lib/auth/jwt-manager.ts` (new) - JWT storage, refresh, validation
|
||||||
|
- `lib/auth/api-client.ts` (new) - Authenticated API client
|
||||||
|
- `sidepanel/auth/LoginButton.tsx` (new) - Login UI
|
||||||
|
- `sidepanel/auth/UserProfile.tsx` (new) - User avatar/menu
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.1: Kiến trúc Side Panel (Side Panel Architecture)
|
||||||
|
**[FR-EXT-01]**
|
||||||
|
|
||||||
|
**Là một** crypto trader,
|
||||||
|
**Tôi muốn** mở AI assistant dưới dạng side panel (không phải popup nhỏ),
|
||||||
|
**Để** tôi có thể chat với AI trong khi vẫn xem được DexScreener chart.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.1.1: Mở Side Panel khi Click Icon
|
||||||
|
**Given** user đã cài đặt extension
|
||||||
|
**When** user click icon extension trong Chrome toolbar
|
||||||
|
**Then** side panel mở ra bên phải màn hình
|
||||||
|
**And** chiều rộng của side panel là 400px (mặc định)
|
||||||
|
**And** side panel không che khuất nội dung chính
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.1.2: Thay đổi kích thước Side Panel (Resizable)
|
||||||
|
**Given** side panel đang mở
|
||||||
|
**When** user kéo cạnh trái của panel
|
||||||
|
**Then** chiều rộng panel thay đổi
|
||||||
|
**And** chiều rộng tối thiểu là 300px
|
||||||
|
**And** chiều rộng tối đa là 600px
|
||||||
|
**And** tùy chọn kích thước (resize preference) được lưu trong Plasmo Storage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.1.3: Side Panel Tồn tại qua các Tab
|
||||||
|
**Given** side panel đang mở trên tab A
|
||||||
|
**When** user chuyển sang tab B
|
||||||
|
**Then** side panel vẫn hiển thị trên tab B
|
||||||
|
**And** nội dung panel reload với context của tab B (nếu có)
|
||||||
|
|
||||||
|
**Edge Case:**
|
||||||
|
**Given** user đóng side panel trên tab A
|
||||||
|
**When** user chuyển sang tab B
|
||||||
|
**Then** side panel vẫn đóng trên tab B
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.1.4: Manifest Permissions
|
||||||
|
**Given** extension được build
|
||||||
|
**When** developer kiểm tra `manifest.json`
|
||||||
|
**Then** `sidePanel` permission có trong manifest
|
||||||
|
**And** `openPanelOnActionClick: true` được thiết lập trong background script
|
||||||
|
|
||||||
|
**Ghi chú kỹ thuật (Technical Notes):**
|
||||||
|
```typescript
|
||||||
|
// background/index.ts
|
||||||
|
chrome.sidePanel
|
||||||
|
.setPanelBehavior({ openPanelOnActionClick: true })
|
||||||
|
.catch((error) => console.error("Failed to set side panel behavior:", error));
|
||||||
|
```
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `surfsense_browser_extension/sidepanel.tsx` ✅
|
||||||
|
- `surfsense_browser_extension/package.json` (thêm sidePanel permission) ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.2: Tích hợp Giao diện AI Chat (AI Chat Interface Integration)
|
||||||
|
**[FR-EXT-02, FR-INT-01]** ⭐ **AI MOAT**
|
||||||
|
|
||||||
|
**Là một** crypto trader,
|
||||||
|
**Tôi muốn** chat với AI trong extension giống như trên web dashboard,
|
||||||
|
**Để** tôi có trải nghiệm nhất quán và đầy đủ tính năng.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.2.1: Tích hợp Giao diện Chat
|
||||||
|
**Given** user đã đăng nhập và mở side panel
|
||||||
|
**When** user gõ tin nhắn "Is BULLA token safe?" và nhấn Enter
|
||||||
|
**Then** tin nhắn hiển thị trong khung chat với avatar user
|
||||||
|
**And** phản hồi của AI bắt đầu streaming
|
||||||
|
**And** `@assistant-ui/react` Thread component renders chính xác
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.2.2: Phản hồi Streaming
|
||||||
|
**Given** user đã gửi tin nhắn
|
||||||
|
**When** AI bắt đầu phản hồi
|
||||||
|
**Then** text phản hồi hiển thị từng từ (streaming)
|
||||||
|
**And** hiển thị các bước suy nghĩ (thinking steps visualization) (nếu có)
|
||||||
|
**And** user có thể cuộn trong khi AI đang phản hồi
|
||||||
|
**And** tự động cuộn xuống dưới cùng khi có nội dung mới
|
||||||
|
|
||||||
|
**Kịch bản lỗi (Error Scenario):**
|
||||||
|
**Given** kết nối streaming bị ngắt
|
||||||
|
**When** lỗi mạng xảy ra
|
||||||
|
**Then** extension hiển thị thông báo lỗi "Connection lost. Retrying..."
|
||||||
|
**And** extension cố gắng kết nối lại (tối đa 3 lần thử lại)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.2.3: Rendering Tool UI
|
||||||
|
**Given** AI response bao gồm tool outputs
|
||||||
|
**When** AI sử dụng tool `display_image`
|
||||||
|
**Then** component `DisplayImageToolUI` render hình ảnh
|
||||||
|
**And** hình ảnh có caption và metadata
|
||||||
|
|
||||||
|
**Link Preview:**
|
||||||
|
**Given** AI response bao gồm tool `link_preview`
|
||||||
|
**When** tool output renders
|
||||||
|
**Then** `LinkPreviewToolUI` hiển thị tiêu đề, mô tả, thumbnail
|
||||||
|
|
||||||
|
**Scraping:**
|
||||||
|
**Given** AI sử dụng tool `scrape_webpage`
|
||||||
|
**When** quá trình scraping hoàn tất
|
||||||
|
**Then** `ScrapeWebpageToolUI` hiển thị nội dung đã trích xuất
|
||||||
|
**And** user có thể mở rộng/thu gọn nội dung
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.2.4: Lưu trữ Lịch sử Chat
|
||||||
|
**Given** user đã chat với AI
|
||||||
|
**When** user đóng extension
|
||||||
|
**And** user mở lại extension
|
||||||
|
**Then** lịch sử chat vẫn hiển thị (được load từ Plasmo Storage)
|
||||||
|
**And** user có thể cuộn lên xem tin nhắn cũ
|
||||||
|
|
||||||
|
**Đồng bộ Backend (Backend Sync):**
|
||||||
|
**Given** user đã đăng nhập
|
||||||
|
**When** tin nhắn chat được gửi
|
||||||
|
**Then** tin nhắn được đồng bộ với backend API (`POST /chat/messages`)
|
||||||
|
**And** lịch sử chat có thể truy cập từ web dashboard
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.2.5: Dịch Truy vấn Ngôn ngữ Tự nhiên (Natural Language Query Translation) ⭐ [FR-INT-01]
|
||||||
|
**Given** user đang xem DexScreener
|
||||||
|
**When** user gõ "Show me trending Solana memes with >$10k liquidity"
|
||||||
|
**Then** AI dịch truy vấn thành DexScreener API filters:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"chain": "solana",
|
||||||
|
"category": "meme",
|
||||||
|
"minLiquidity": 10000,
|
||||||
|
"sort": "trending"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
**And** AI giải thích: "I'm searching for meme tokens on Solana with liquidity above $10k, sorted by trending volume."
|
||||||
|
**And** AI thực hiện tìm kiếm và trả về kết quả
|
||||||
|
|
||||||
|
**Truy vấn phức tạp (Complex Query):**
|
||||||
|
**Given** user hỏi "Find tokens launched in last 24h with >50% price increase"
|
||||||
|
**When** AI xử lý truy vấn
|
||||||
|
**Then** AI dịch thành:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"minAge": 0,
|
||||||
|
"maxAge": 86400,
|
||||||
|
"minPriceChange24h": 50
|
||||||
|
}
|
||||||
|
```
|
||||||
|
**And** AI trả về kết quả đã lọc kèm lời giải thích
|
||||||
|
|
||||||
|
**Ví dụ Placeholder:**
|
||||||
|
**Given** user focus vào ô chat input
|
||||||
|
**When** input đang trống
|
||||||
|
**Then** placeholder hiển thị các ví dụ xoay vòng:
|
||||||
|
- "Show me new Solana tokens with high volume"
|
||||||
|
- "Find tokens with locked liquidity >90%"
|
||||||
|
- "What are the top trending meme coins today?"
|
||||||
|
|
||||||
|
**Component Reuse:**
|
||||||
|
```typescript
|
||||||
|
// From frontend
|
||||||
|
import { Thread } from "@/components/assistant-ui/thread";
|
||||||
|
import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
|
||||||
|
import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
|
||||||
|
import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
|
||||||
|
```
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `sidepanel/chat/ChatInterface.tsx` ✅
|
||||||
|
- `sidepanel/chat/ChatMessages.tsx` ✅
|
||||||
|
- `sidepanel/chat/ChatInput.tsx` ✅
|
||||||
|
- `sidepanel/chat/ChatHeader.tsx` ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.3: Phát hiện Ngữ cảnh Trang (Page Context Detection)
|
||||||
|
**[FR-EXT-03]**
|
||||||
|
|
||||||
|
**Là một** crypto trader đang xem DexScreener,
|
||||||
|
**Tôi muốn** AI tự động hiểu tôi đang xem token nào,
|
||||||
|
**Để** tôi không cần copy/paste địa chỉ token mỗi lần.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.3.1: Phát hiện Loại Trang (Page Type Detection)
|
||||||
|
**Given** user điều hướng đến trang DexScreener
|
||||||
|
**When** content script chạy
|
||||||
|
**Then** loại trang (page type) được phát hiện là `dexscreener`
|
||||||
|
**And** logic trích xuất token được kích hoạt
|
||||||
|
|
||||||
|
**Các trang khác:**
|
||||||
|
**Given** user điều hướng đến CoinGecko
|
||||||
|
**When** content script chạy
|
||||||
|
**Then** loại trang được phát hiện là `coingecko`
|
||||||
|
|
||||||
|
**Given** user điều hướng đến Twitter/X
|
||||||
|
**Then** loại trang được phát hiện là `twitter`
|
||||||
|
|
||||||
|
**Given** user điều hướng đến trang không xác định
|
||||||
|
**Then** loại trang được phát hiện là `generic`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.3.2: Trích xuất Dữ liệu Token (DexScreener)
|
||||||
|
**Given** user đang xem trang token: `dexscreener.com/solana/ABC123`
|
||||||
|
**When** content script trích xuất dữ liệu
|
||||||
|
**Then** các dữ liệu sau được trích xuất:
|
||||||
|
- Token address: `ABC123`
|
||||||
|
- Chain: `solana`
|
||||||
|
- Price: `$0.0001234`
|
||||||
|
- 24h Volume: `$10,234`
|
||||||
|
- Liquidity: `$5,123`
|
||||||
|
- Pair info: `BULLA/SOL`
|
||||||
|
|
||||||
|
**And** dữ liệu được gửi đến side panel qua `chrome.runtime.sendMessage`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.3.3: Context Injection vào Chat
|
||||||
|
**Given** dữ liệu token đã được trích xuất
|
||||||
|
**When** user mở chat
|
||||||
|
**Then** AI nhận được context: "You are viewing BULLA/SOL token on Solana. Address: ABC123. Current price: $0.0001234..."
|
||||||
|
**And** user có thể hỏi "Is this safe?" mà không cần chỉ định token
|
||||||
|
|
||||||
|
**Cập nhật Context:**
|
||||||
|
**Given** user điều hướng đến token khác
|
||||||
|
**When** dữ liệu token mới được trích xuất
|
||||||
|
**Then** chat context tự động cập nhật
|
||||||
|
**And** AI nhận biết token mới trong các tin nhắn tiếp theo
|
||||||
|
|
||||||
|
**Triển khai kỹ thuật:**
|
||||||
|
```typescript
|
||||||
|
// content.ts
|
||||||
|
function detectPageType(): PageType {
|
||||||
|
const hostname = window.location.hostname;
|
||||||
|
if (hostname.includes('dexscreener.com')) return 'dexscreener';
|
||||||
|
if (hostname.includes('coingecko.com')) return 'coingecko';
|
||||||
|
if (hostname.includes('twitter.com') || hostname.includes('x.com')) return 'twitter';
|
||||||
|
return 'generic';
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractDexScreenerData(): TokenData {
|
||||||
|
// Extract from URL: /solana/address
|
||||||
|
// Or from page DOM
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `content.ts` ✅
|
||||||
|
- `sidepanel/context/PageContextProvider.tsx` ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.4: Tích hợp Thông minh với DexScreener
|
||||||
|
**[FR-EXT-04]**
|
||||||
|
|
||||||
|
**Là một** crypto trader trên DexScreener,
|
||||||
|
**Tôi muốn** thấy thẻ thông tin token (token info card) ở đầu side panel,
|
||||||
|
**Để** tôi có thể nhanh chóng kiểm tra độ an toàn hoặc xem các holders.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.4.1: Hiển thị Thẻ Thông tin Token
|
||||||
|
**Given** user điều hướng đến trang token DexScreener
|
||||||
|
**When** side panel mở ra
|
||||||
|
**Then** Token Info Card hiển thị ở đầu panel
|
||||||
|
**And** thẻ hiển thị:
|
||||||
|
- Token symbol/name: "BULLA/SOL"
|
||||||
|
- Current price: "$0.0001"
|
||||||
|
- 24h change: "+15%" (xanh nếu dương, đỏ nếu âm)
|
||||||
|
- Volume 24h: "$10K"
|
||||||
|
- Liquidity: "$5K"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.4.2: Các nút Thao tác Nhanh (Quick Action Buttons)
|
||||||
|
**Given** Token Info Card đang hiển thị
|
||||||
|
**When** user click nút "Is this token safe?"
|
||||||
|
**Then** chat input được điền sẵn "Is BULLA/SOL safe?"
|
||||||
|
**And** AI nhận đầy đủ token context
|
||||||
|
**And** AI thực hiện phân tích an toàn
|
||||||
|
|
||||||
|
**Top Holders:**
|
||||||
|
**Given** user click nút "Show top holders"
|
||||||
|
**When** hành động kích hoạt
|
||||||
|
**Then** chat được điền sẵn "Show top holders for BULLA/SOL"
|
||||||
|
**And** AI truy vấn dữ liệu blockchain
|
||||||
|
|
||||||
|
**Dự đoán giá (Price Prediction):**
|
||||||
|
**Given** user click nút "Price prediction"
|
||||||
|
**Then** chat được điền sẵn "Predict price for BULLA/SOL"
|
||||||
|
**And** AI thực hiện phân tích kỹ thuật
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.4.3: Tự động Giải quyết Context (Auto-Context Resolution)
|
||||||
|
**Given** user gõ "Is this token safe?" (không chỉ định token)
|
||||||
|
**When** tin nhắn được gửi
|
||||||
|
**Then** AI giải quyết "this token" = token hiện tại trên DexScreener
|
||||||
|
**And** AI thực hiện phân tích trên token chính xác
|
||||||
|
|
||||||
|
**UI Design:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────┐
|
||||||
|
│ 🪙 BULLA/SOL │
|
||||||
|
│ $0.0001 📈 +15% │
|
||||||
|
│ Vol: $10K | Liq: $5K │
|
||||||
|
│ [Safety Check] [Holders] │
|
||||||
|
└─────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `sidepanel/dexscreener/TokenInfoCard.tsx` ✅
|
||||||
|
- `sidepanel/chat/ChatInterface.tsx` (integrate card) ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.5: Lưu nhanh trang (Quick Capture)
|
||||||
|
**[FR-EXT-05]**
|
||||||
|
|
||||||
|
**Là một** crypto trader,
|
||||||
|
**Tôi muốn** lưu trang hiện tại vào không gian tìm kiếm (search space),
|
||||||
|
**Để** tôi có thể tham khảo lại sau.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.5.1: Nút Quick Capture
|
||||||
|
**Given** side panel đang mở
|
||||||
|
**When** user cuộn trong panel
|
||||||
|
**Then** nút "📸 Save Current Page" vẫn hiển thị (sticky footer)
|
||||||
|
**And** nút không che khuất nội dung chat
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.5.2: Quy trình Lưu Trang
|
||||||
|
**Given** user đang xem trang token DexScreener
|
||||||
|
**When** user click nút "📸 Save Current Page"
|
||||||
|
**Then** extension capture nội dung trang (HTML, metadata, screenshot)
|
||||||
|
**And** nội dung được lưu vào search space đã chọn của user
|
||||||
|
**And** thông báo toast hiển thị "Page saved successfully"
|
||||||
|
**And** trang đã lưu có thể truy cập từ web dashboard
|
||||||
|
|
||||||
|
**Kịch bản lỗi (Error Scenario):**
|
||||||
|
**Given** user chưa đăng nhập
|
||||||
|
**When** user click nút capture
|
||||||
|
**Then** extension hiển thị "Please login to save pages"
|
||||||
|
**And** login modal mở ra
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.5.3: Tái sử dụng Chức năng Capture
|
||||||
|
**Given** web dashboard có API capture hiện có
|
||||||
|
**When** extension gọi capture
|
||||||
|
**Then** extension tái sử dụng endpoint `/api/capture`
|
||||||
|
**And** cùng một logic backend xử lý capture
|
||||||
|
**And** không có implementation trùng lặp
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- `sidepanel/chat/QuickCapture.tsx` ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Story 1.6: Đồng bộ Cài đặt (Settings Sync) với Frontend
|
||||||
|
**[FR-EXT-06]**
|
||||||
|
|
||||||
|
**Là một** SurfSense user,
|
||||||
|
**Tôi muốn** extension sử dụng cùng model và search space như web dashboard,
|
||||||
|
**Để** tôi không phải cấu hình lại.
|
||||||
|
|
||||||
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
|
|
||||||
|
#### AC 1.6.1: Hiển thị Dropdown Cài đặt
|
||||||
|
**Given** user đã đăng nhập
|
||||||
|
**When** user click icon ⚙️ trong header
|
||||||
|
**Then** settings dropdown mở ra
|
||||||
|
**And** dropdown hiển thị:
|
||||||
|
- Current model: "GPT-4 Turbo" (chỉ xem, bị mờ)
|
||||||
|
- Current search space: "Crypto Research" (chỉ xem, bị mờ)
|
||||||
|
- Links đến web dashboard:
|
||||||
|
- "🔗 Manage Connectors"
|
||||||
|
- "💬 View All Chats"
|
||||||
|
- "⚙️ Full Settings"
|
||||||
|
- Nút "🚪 Logout"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.6.2: Đồng bộ Cài đặt khi Đăng nhập
|
||||||
|
**Given** user hoàn tất đăng nhập
|
||||||
|
**When** nhận được JWT token
|
||||||
|
**Then** extension gọi `GET /api/settings`
|
||||||
|
**And** backend trả về:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"model": "gpt-4-turbo",
|
||||||
|
"searchSpace": "crypto-research",
|
||||||
|
"connectors": ["dexscreener", "helius"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
**And** settings được lưu trong Plasmo Storage
|
||||||
|
**And** settings hiển thị trong dropdown
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 1.6.3: Tự động cập nhật Cài đặt
|
||||||
|
**Given** user thay đổi model trên web dashboard
|
||||||
|
**When** extension phát hiện thay đổi (qua polling hoặc webhook)
|
||||||
|
**Then** extension lấy settings đã cập nhật
|
||||||
|
**And** dropdown phản ánh model mới
|
||||||
|
**And** các cuộc chat tiếp theo sử dụng model mới
|
||||||
|
|
||||||
|
**Polling:**
|
||||||
|
**Given** extension đang hoạt động
|
||||||
|
**When** mỗi 5 phút
|
||||||
|
**Then** extension polls `GET /api/settings`
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
# Epic 1: Extension Core Infrastructure
|
|
||||||
|
|
||||||
**Status:** ✅ COMPLETED
|
|
||||||
**Phase:** Phase 1
|
|
||||||
**Duration:** 2 weeks
|
|
||||||
**Priority:** P0 (Critical)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Epic Overview
|
|
||||||
|
|
||||||
Xây dựng nền tảng cơ bản cho Chrome Extension với Side Panel architecture, tích hợp AI chat interface từ frontend, và context detection cho các trang crypto.
|
|
||||||
|
|
||||||
**Business Value:**
|
|
||||||
- Cho phép users chat với AI ngay trong browser
|
|
||||||
- Tự động detect và extract thông tin token từ DexScreener
|
|
||||||
- Tái sử dụng tối đa frontend components (giảm development time)
|
|
||||||
- Foundation cho tất cả features sau này
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## User Stories
|
|
||||||
|
|
||||||
### Story 1.1: Side Panel Architecture
|
|
||||||
**[FR-EXT-01]**
|
|
||||||
|
|
||||||
**Là một** crypto trader,
|
|
||||||
**Tôi muốn** mở AI assistant dưới dạng side panel (không phải popup nhỏ),
|
|
||||||
**Để** tôi có thể chat với AI trong khi vẫn xem được DexScreener chart.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] Extension icon click → Mở side panel bên phải màn hình
|
|
||||||
- [ ] Side panel width: 400px (default), resizable 300-600px
|
|
||||||
- [ ] Side panel không che khuất nội dung chính
|
|
||||||
- [ ] Side panel persist khi switch tabs
|
|
||||||
- [ ] Manifest có permission `sidePanel`
|
|
||||||
|
|
||||||
**Technical Notes:**
|
|
||||||
```typescript
|
|
||||||
// background/index.ts
|
|
||||||
chrome.sidePanel
|
|
||||||
.setPanelBehavior({ openPanelOnActionClick: true })
|
|
||||||
.catch((error) => console.error("Failed to set side panel behavior:", error));
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `surfsense_browser_extension/sidepanel.tsx` ✅
|
|
||||||
- `surfsense_browser_extension/package.json` (add sidePanel permission) ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Story 1.2: AI Chat Interface Integration
|
|
||||||
**[FR-EXT-02]**
|
|
||||||
|
|
||||||
**Là một** crypto trader,
|
|
||||||
**Tôi muốn** chat với AI trong extension giống như trên web dashboard,
|
|
||||||
**Để** tôi có trải nghiệm nhất quán và đầy đủ tính năng.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] Tích hợp `@assistant-ui/react` Thread component
|
|
||||||
- [ ] Streaming responses hoạt động
|
|
||||||
- [ ] Thinking steps visualization hiển thị
|
|
||||||
- [ ] Tool UIs render đúng (images, links, scraping)
|
|
||||||
- [ ] Attachment handling (upload files/images)
|
|
||||||
- [ ] Chat history lưu vào Plasmo Storage
|
|
||||||
- [ ] Chat history sync với backend API
|
|
||||||
|
|
||||||
**Component Reuse:**
|
|
||||||
```typescript
|
|
||||||
// From frontend
|
|
||||||
import { Thread } from "@/components/assistant-ui/thread";
|
|
||||||
import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
|
|
||||||
import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
|
|
||||||
import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `sidepanel/chat/ChatInterface.tsx` ✅
|
|
||||||
- `sidepanel/chat/ChatMessages.tsx` ✅
|
|
||||||
- `sidepanel/chat/ChatInput.tsx` ✅
|
|
||||||
- `sidepanel/chat/ChatHeader.tsx` ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Story 1.3: Page Context Detection
|
|
||||||
**[FR-EXT-03]**
|
|
||||||
|
|
||||||
**Là một** crypto trader đang xem DexScreener,
|
|
||||||
**Tôi muốn** AI tự động hiểu tôi đang xem token nào,
|
|
||||||
**Để** tôi không cần copy/paste token address mỗi lần.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] Content script detect page type:
|
|
||||||
- DexScreener → Extract token data
|
|
||||||
- CoinGecko → Extract coin info
|
|
||||||
- Twitter/X → Extract crypto discussions
|
|
||||||
- Generic → Basic page info
|
|
||||||
- [ ] Token data extracted:
|
|
||||||
- Token address
|
|
||||||
- Chain (Solana, Ethereum, Base)
|
|
||||||
- Price, volume, liquidity
|
|
||||||
- Pair info
|
|
||||||
- [ ] Context injected vào chat: "You are viewing $TOKEN on Solana..."
|
|
||||||
- [ ] Context updates khi user navigate to different token
|
|
||||||
|
|
||||||
**Technical Implementation:**
|
|
||||||
```typescript
|
|
||||||
// content.ts
|
|
||||||
function detectPageType(): PageType {
|
|
||||||
const hostname = window.location.hostname;
|
|
||||||
if (hostname.includes('dexscreener.com')) return 'dexscreener';
|
|
||||||
if (hostname.includes('coingecko.com')) return 'coingecko';
|
|
||||||
if (hostname.includes('twitter.com') || hostname.includes('x.com')) return 'twitter';
|
|
||||||
return 'generic';
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractDexScreenerData(): TokenData {
|
|
||||||
// Extract from URL: /solana/address
|
|
||||||
// Or from page DOM
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `content.ts` ✅
|
|
||||||
- `sidepanel/context/PageContextProvider.tsx` ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Story 1.4: DexScreener Smart Integration
|
|
||||||
**[FR-EXT-04]**
|
|
||||||
|
|
||||||
**Là một** crypto trader trên DexScreener,
|
|
||||||
**Tôi muốn** thấy token info card ở top của side panel,
|
|
||||||
**Để** tôi có thể nhanh chóng check safety hoặc xem holders.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] Token Info Card hiển thị khi detect DexScreener page
|
|
||||||
- [ ] Card shows:
|
|
||||||
- Token symbol/name
|
|
||||||
- Current price
|
|
||||||
- 24h change (%)
|
|
||||||
- Volume 24h
|
|
||||||
- Liquidity
|
|
||||||
- [ ] Quick action buttons:
|
|
||||||
- "Is this token safe?" → Trigger safety check
|
|
||||||
- "Show top holders" → Query blockchain
|
|
||||||
- "Price prediction" → AI analysis
|
|
||||||
- [ ] Buttons trigger chat with pre-filled context
|
|
||||||
- [ ] Auto-context: "this token" = token đang xem
|
|
||||||
|
|
||||||
**UI Design:**
|
|
||||||
```
|
|
||||||
┌─────────────────────────────┐
|
|
||||||
│ 🪙 BULLA/SOL │
|
|
||||||
│ $0.0001 📈 +15% │
|
|
||||||
│ Vol: $10K | Liq: $5K │
|
|
||||||
│ [Safety Check] [Holders] │
|
|
||||||
└─────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `sidepanel/dexscreener/TokenInfoCard.tsx` ✅
|
|
||||||
- `sidepanel/chat/ChatInterface.tsx` (integrate card) ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Story 1.5: Quick Capture
|
|
||||||
**[FR-EXT-05]**
|
|
||||||
|
|
||||||
**Là một** crypto trader,
|
|
||||||
**Tôi muốn** save current page vào search space,
|
|
||||||
**Để** tôi có thể reference lại sau.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] "📸 Save Current Page" button ở bottom của side panel
|
|
||||||
- [ ] Button sticky (luôn visible)
|
|
||||||
- [ ] Click → Capture page content
|
|
||||||
- [ ] Save vào selected search space
|
|
||||||
- [ ] Toast notification: "Page saved successfully"
|
|
||||||
- [ ] Reuse existing capture functionality
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `sidepanel/chat/QuickCapture.tsx` ✅
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Story 1.6: Settings Sync với Frontend
|
|
||||||
**[FR-EXT-06]**
|
|
||||||
|
|
||||||
**Là một** SurfSense user,
|
|
||||||
**Tôi muốn** extension sử dụng cùng model và search space như web dashboard,
|
|
||||||
**Để** tôi không phải config lại.
|
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
|
||||||
- [ ] Settings dropdown trong extension header
|
|
||||||
- [ ] Dropdown shows:
|
|
||||||
- Current model (read-only)
|
|
||||||
- Current search space (read-only)
|
|
||||||
- Links to frontend management
|
|
||||||
- [ ] Links:
|
|
||||||
- "Manage Connectors" → Open frontend /settings/connectors
|
|
||||||
- "View All Chats" → Open frontend /chats
|
|
||||||
- "Full Settings" → Open frontend /settings
|
|
||||||
- [ ] State sync:
|
|
||||||
- Extension reads from backend API
|
|
||||||
- Model selection synced
|
|
||||||
- Search space synced
|
|
||||||
- Enabled connectors synced (read-only)
|
|
||||||
- Chat history bidirectional sync
|
|
||||||
|
|
||||||
**API Endpoints Needed:**
|
|
||||||
```typescript
|
|
||||||
GET /api/user/settings
|
|
||||||
POST /api/user/settings
|
|
||||||
GET /api/models/available
|
|
||||||
GET /api/search-spaces
|
|
||||||
GET /api/connectors/enabled
|
|
||||||
```
|
|
||||||
|
|
||||||
**Plasmo Storage Structure:**
|
|
||||||
```typescript
|
|
||||||
interface ExtensionStorage {
|
|
||||||
settings: {
|
|
||||||
selectedModel: string;
|
|
||||||
searchSpaceId: string;
|
|
||||||
apiKey: string;
|
|
||||||
};
|
|
||||||
cachedSettings: UserSettings;
|
|
||||||
lastSync: number;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files:**
|
|
||||||
- `sidepanel/chat/ChatHeader.tsx` (add settings dropdown)
|
|
||||||
- `lib/api/settings-sync.ts` (new)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Technical Dependencies
|
|
||||||
|
|
||||||
### Frontend Components to Reuse
|
|
||||||
- `@assistant-ui/react` Thread
|
|
||||||
- Tool UIs (images, links, scraping)
|
|
||||||
- Thinking steps visualization
|
|
||||||
- Chat utilities
|
|
||||||
|
|
||||||
### Backend APIs Needed
|
|
||||||
- `/api/user/settings` - Get/update user settings
|
|
||||||
- `/api/models/available` - List available models
|
|
||||||
- `/api/search-spaces` - List search spaces
|
|
||||||
- `/api/connectors/enabled` - List enabled connectors
|
|
||||||
- `/api/chat/stream` - Chat streaming (existing)
|
|
||||||
|
|
||||||
### Chrome APIs Used
|
|
||||||
- `chrome.sidePanel` - Side panel management
|
|
||||||
- `chrome.storage` - Plasmo Storage
|
|
||||||
- `chrome.tabs` - Tab management
|
|
||||||
- `chrome.runtime` - Messaging
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Testing Strategy
|
|
||||||
|
|
||||||
### Unit Tests
|
|
||||||
- [ ] PageContextProvider state management
|
|
||||||
- [ ] Token data extraction from DexScreener
|
|
||||||
- [ ] Settings sync logic
|
|
||||||
|
|
||||||
### Integration Tests
|
|
||||||
- [ ] Side panel opens on icon click
|
|
||||||
- [ ] Chat streaming works
|
|
||||||
- [ ] Context detection works on DexScreener
|
|
||||||
- [ ] Token card displays correctly
|
|
||||||
- [ ] Quick capture saves page
|
|
||||||
|
|
||||||
### Manual Testing
|
|
||||||
- [ ] Test on DexScreener.com
|
|
||||||
- [ ] Test on CoinGecko
|
|
||||||
- [ ] Test on Twitter
|
|
||||||
- [ ] Test settings sync with frontend
|
|
||||||
- [ ] Test chat history persistence
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Definition of Done
|
|
||||||
|
|
||||||
- [ ] All 6 stories completed
|
|
||||||
- [ ] All acceptance criteria met
|
|
||||||
- [ ] Unit tests passing
|
|
||||||
- [ ] Integration tests passing
|
|
||||||
- [ ] Manual testing completed
|
|
||||||
- [ ] Code reviewed
|
|
||||||
- [ ] Documentation updated
|
|
||||||
- [ ] Deployed to staging
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
**Phase 1 Status:** ✅ COMPLETED (as of 2026-02-01)
|
|
||||||
|
|
||||||
**Next Epic:** Epic 2 - Smart Monitoring & Alerts (Phase 2)
|
|
||||||
|
|
@ -1,57 +1,159 @@
|
||||||
# Epic 2: Smart Monitoring & Alerts
|
# Epic 2: Smart Monitoring & Alerts (Giám sát & Cảnh báo Thông minh)
|
||||||
|
|
||||||
**Status:** 📋 PLANNED
|
**Trạng thái:** 📋 ĐÃ LÊN KẾ HOẠCH (PLANNED)
|
||||||
**Phase:** Phase 2
|
**Giai đoạn:** Phase 2
|
||||||
**Duration:** 2 weeks
|
**Thời gian:** 2 tuần
|
||||||
**Priority:** P0 (Critical - Risk Protection)
|
**Mức độ ưu tiên:** P0 (Nghiêm trọng - Risk Protection)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Epic Overview
|
## Tổng quan Epic
|
||||||
|
|
||||||
Xây dựng hệ thống monitoring và alerts thông minh để bảo vệ users khỏi rủi ro và giúp họ không bỏ lỡ cơ hội. Tập trung vào **risk protection** (rug pull detection) và **opportunity alerts** (whale activity, price movements).
|
Xây dựng hệ thống monitoring và alerts thông minh để bảo vệ users khỏi rủi ro và giúp họ không bỏ lỡ cơ hội. Tập trung vào **risk protection** (rug pull detection) và **opportunity alerts** (whale activity, price movements).
|
||||||
|
|
||||||
**Business Value:**
|
**Giá trị kinh doanh (Business Value):**
|
||||||
- **Risk Protection:** Giúp users tránh mất tiền vào rug pulls
|
- **Risk Protection (Bảo vệ rủi ro):** Giúp users tránh mất tiền vào rug pulls.
|
||||||
- **Opportunity Alerts:** Không bỏ lỡ whale movements và price spikes
|
- **Opportunity Alerts (Cảnh báo cơ hội):** Không bỏ lỡ whale movements và price spikes.
|
||||||
- **Always-On Monitoring:** Background monitoring ngay cả khi browser đóng
|
- **Always-On Monitoring:** Giám sát ngầm (Background monitoring) ngay cả khi browser đóng.
|
||||||
- **Competitive Advantage:** Proactive alerts vs passive dashboards (DexScreener/DexTools)
|
- **Lợi thế cạnh tranh:** Proactive alerts (Chủ động cảnh báo) so với passive dashboards (DexScreener/DexTools).
|
||||||
|
|
||||||
**Key Differentiator:** AI-driven anomaly detection, không chỉ là threshold alerts.
|
**Điểm khác biệt chính:** AI-driven anomaly detection (Phát hiện bất thường bằng AI), không chỉ là threshold alerts.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## User Stories
|
## User Stories
|
||||||
|
|
||||||
### Story 2.1: Real-time Price Alerts
|
### Story 2.1: Cảnh báo Giá Thời gian thực (Real-time Price Alerts)
|
||||||
**[FR-EXT-07]**
|
**[FR-EXT-07]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** set price alerts cho tokens trong watchlist,
|
**Tôi muốn** đặt cảnh báo giá cho tokens trong watchlist,
|
||||||
**Để** tôi được notify khi price hit target mà không cần stare vào chart cả ngày.
|
**Để** tôi được thông báo (notify) khi giá chạm target mà không cần nhìn chằm chằm vào biểu đồ cả ngày.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
- [ ] Watchlist management trong side panel
|
|
||||||
- Add token to watchlist (from DexScreener page)
|
#### AC 2.1.1: Quản lý Watchlist
|
||||||
- Remove token from watchlist
|
**Given** user đang xem token trên DexScreener
|
||||||
- View all watchlist tokens
|
**When** user click nút "Add to Watchlist" trong Token Info Card
|
||||||
- Edit token alerts
|
**Then** token được thêm vào watchlist
|
||||||
- [ ] Alert types:
|
**And** watchlist badge hiển thị "5 tokens"
|
||||||
- Price above threshold (e.g., > $0.001)
|
**And** toast notification "Added BULLA/SOL to watchlist"
|
||||||
- Price below threshold (e.g., < $0.0005)
|
|
||||||
- Price change % (e.g., +20% in 1h)
|
**Remove from Watchlist:**
|
||||||
- Volume spike (e.g., 3x average volume)
|
**Given** token đang trong watchlist
|
||||||
- Liquidity change (e.g., -50% liquidity)
|
**When** user click nút "Remove"
|
||||||
- [ ] Browser notifications:
|
**Then** confirmation modal xuất hiện "Remove BULLA/SOL from watchlist?"
|
||||||
- Work even when tab closed
|
**And** user xác nhận (confirms)
|
||||||
- Show token symbol, price, change %
|
**Then** token bị xóa khỏi watchlist
|
||||||
- Click notification → Open DexScreener page
|
**And** tất cả alerts liên quan bị xóa
|
||||||
- [ ] Sound alerts (optional):
|
|
||||||
- Enable/disable per alert
|
**View Watchlist:**
|
||||||
- Different sounds for different alert types
|
**Given** user có 5 tokens trong watchlist
|
||||||
- [ ] Alert history:
|
**When** user mở Watchlist panel
|
||||||
- View past alerts
|
**Then** tất cả 5 tokens hiển thị với:
|
||||||
- Mark as read/unread
|
- Token symbol và chain
|
||||||
|
- Giá hiện tại (Current price)
|
||||||
|
- Thay đổi 24h (24h change %)
|
||||||
|
- Số lượng active alerts
|
||||||
|
- Nút [Edit] [Remove]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.1.2: Cấu hình Loại Alert
|
||||||
|
**Given** user có token trong watchlist
|
||||||
|
**When** user click nút "Add Alert"
|
||||||
|
**Then** modal cấu hình alert mở ra với các tùy chọn:
|
||||||
|
|
||||||
|
**Price Above Threshold (Giá trên ngưỡng):**
|
||||||
|
**Given** user chọn "Price Above"
|
||||||
|
**When** user nhập ngưỡng "$0.00015"
|
||||||
|
**Then** alert được tạo
|
||||||
|
**And** background worker kiểm tra giá mỗi 1 phút
|
||||||
|
**When** giá vượt quá $0.00015
|
||||||
|
**Then** browser notification hiển thị "🚀 BULLA/SOL hit $0.00016 (+6.7%)"
|
||||||
|
|
||||||
|
**Price Below Threshold (Giá dưới ngưỡng):**
|
||||||
|
**Given** user chọn "Price Below"
|
||||||
|
**When** user nhập ngưỡng "$0.0005"
|
||||||
|
**Then** alert kích hoạt khi giá giảm xuống dưới ngưỡng
|
||||||
|
|
||||||
|
**Price Change % (Biến động giá %):**
|
||||||
|
**Given** user chọn "Price Change %"
|
||||||
|
**When** user nhập "+20% in 1h"
|
||||||
|
**Then** alert kích hoạt khi giá tăng 20% trong vòng 1 giờ
|
||||||
|
|
||||||
|
**Volume Spike (Khối lượng tăng đột biến):**
|
||||||
|
**Given** user chọn "Volume Spike"
|
||||||
|
**When** user nhập "3x average volume"
|
||||||
|
**Then** alert kích hoạt khi volume vượt quá 3 lần trung bình 24h
|
||||||
|
|
||||||
|
**Liquidity Change (Thay đổi thanh khoản):**
|
||||||
|
**Given** user chọn "Liquidity Change"
|
||||||
|
**When** user nhập "-50% liquidity"
|
||||||
|
**Then** alert kích hoạt khi thanh khoản giảm 50% so với baseline
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.1.3: Browser Notifications
|
||||||
|
**Given** user có active price alert
|
||||||
|
**When** điều kiện alert được đáp ứng
|
||||||
|
**Then** browser notification xuất hiện với:
|
||||||
|
- Token symbol: "BULLA/SOL"
|
||||||
|
- Current price: "$0.00016"
|
||||||
|
- Change %: "+6.7%"
|
||||||
|
- Alert type: "Price Above $0.00015"
|
||||||
|
|
||||||
|
**Hoạt động khi đóng Tab:**
|
||||||
|
**Given** user đã đóng tất cả browser tabs
|
||||||
|
**When** alert kích hoạt
|
||||||
|
**Then** notification vẫn xuất hiện (nhờ background service worker)
|
||||||
|
|
||||||
|
**Click Notification:**
|
||||||
|
**Given** user nhận thông báo
|
||||||
|
**When** user click vào thông báo
|
||||||
|
**Then** tab mới mở ra với trang DexScreener cho token đó
|
||||||
|
**And** side panel tự động mở với token context
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.1.4: Cảnh báo Âm thanh (Sound Alerts)
|
||||||
|
**Given** user bật sound alerts
|
||||||
|
**When** alert kích hoạt
|
||||||
|
**Then** âm thanh phát ra dựa trên loại alert:
|
||||||
|
- Price Above: "ding.mp3" (âm thanh tích cực)
|
||||||
|
- Price Below: "alert.mp3" (âm thanh cảnh báo)
|
||||||
|
- Volume Spike: "chime.mp3" (âm thanh chú ý)
|
||||||
|
|
||||||
|
**Enable/Disable Per Alert:**
|
||||||
|
**Given** user có nhiều alerts
|
||||||
|
**When** user bật tắt âm thanh cho một alert cụ thể
|
||||||
|
**Then** chỉ alert đó mới phát âm thanh
|
||||||
|
**And** các alerts khác vẫn im lặng
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.1.5: Lịch sử Alert (Alert History)
|
||||||
|
**Given** user có alerts đã kích hoạt
|
||||||
|
**When** user mở panel "Alert History"
|
||||||
|
**Then** danh sách hiển thị 100 alerts gần nhất với:
|
||||||
|
- Thời gian: "2 hours ago"
|
||||||
|
- Token: "BULLA/SOL"
|
||||||
|
- Alert type: "Price Above $0.00015"
|
||||||
|
- Triggered price: "$0.00016"
|
||||||
|
- Trạng thái Read/Unread
|
||||||
|
|
||||||
|
**Mark as Read:**
|
||||||
|
**Given** alert chưa đọc (unread)
|
||||||
|
**When** user click vào alert
|
||||||
|
**Then** alert được đánh dấu là đã đọc
|
||||||
|
**And** số lượng badge unread giảm đi
|
||||||
|
|
||||||
|
**Filter History:**
|
||||||
|
**Given** user có 100+ alerts
|
||||||
|
**When** user filter theo token "BULLA/SOL"
|
||||||
|
**Then** chỉ hiển thị alerts của BULLA
|
||||||
|
**When** user filter theo loại "Price Above"
|
||||||
|
**Then** chỉ hiển thị alerts giá trên ngưỡng
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -70,7 +172,7 @@ Xây dựng hệ thống monitoring và alerts thông minh để bảo vệ user
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface PriceAlert {
|
interface PriceAlert {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -108,35 +210,119 @@ GET /api/alerts/check // Returns triggered alerts
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 2.2: Whale Activity Tracker
|
### Story 2.2: Theo dõi Hoạt động Cá voi (Whale Activity Tracker)
|
||||||
**[FR-EXT-08]**
|
**[FR-EXT-08]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** được notify khi có whale buy/sell lớn,
|
**Tôi muốn** được thông báo khi có giao dịch mua/bán lớn (whale buy/sell),
|
||||||
**Để** tôi có thể follow smart money và tránh bị dumped.
|
**Để** tôi có thể theo chân dòng tiền thông minh (smart money) và tránh bị xả hàng (dumped).
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
- [ ] Monitor large transactions:
|
|
||||||
- Configurable thresholds: $10K, $50K, $100K
|
#### AC 2.2.1: Giám sát Giao dịch Lớn
|
||||||
- Detect buy vs sell
|
**Given** user có token trong watchlist
|
||||||
- Show transaction size in USD
|
**When** phát hiện giao dịch cá voi (whale transaction) (>$10K)
|
||||||
- [ ] Wallet clustering detection:
|
**Then** thông báo xuất hiện "🐋 $100K BUY detected for BULLA/SOL"
|
||||||
- Identify same entity (multiple wallets)
|
**And** chi tiết giao dịch hiển thị:
|
||||||
- Show total holdings across wallets
|
- Loại: BUY hoặc SELL
|
||||||
- [ ] Smart money tracking:
|
- Số lượng: "1B tokens ($100,000)"
|
||||||
- Track specific wallet addresses
|
- Ví: "0x1234...5678"
|
||||||
- Alert on their activities
|
- Thời gian: "2 min ago"
|
||||||
- Show their historical performance
|
|
||||||
- [ ] Transaction details:
|
**Configurable Thresholds (Ngưỡng có thể cấu hình):**
|
||||||
- Wallet address
|
**Given** user mở cài đặt whale
|
||||||
- Transaction hash
|
**When** user chọn ngưỡng "$50K"
|
||||||
- Amount (tokens + USD)
|
**Then** chỉ các giao dịch >$50K mới kích hoạt alerts
|
||||||
- Time
|
**And** các giao dịch nhỏ hơn bị bỏ qua
|
||||||
- Link to explorer
|
|
||||||
- [ ] Notification:
|
**Phát hiện Mua vs Bán:**
|
||||||
- Browser notification for whale activity
|
**Given** whale bán lượng token trị giá $100K
|
||||||
- Show in side panel feed
|
**When** giao dịch được phát hiện
|
||||||
- Filter by token (only watchlist or all)
|
**Then** thông báo hiển thị "🔴 SELL $100K BULLA/SOL"
|
||||||
|
**And** màu đỏ chỉ thị áp lực bán
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.2.2: Phát hiện Gom nhóm Ví (Wallet Clustering Detection)
|
||||||
|
**Given** cùng một thực thể kiểm soát nhiều ví
|
||||||
|
**When** hệ thống phát hiện các ví liên quan
|
||||||
|
**Then** các ví được nhóm lại với nhau
|
||||||
|
**And** hiển thị tổng holdings trên tất cả các ví
|
||||||
|
|
||||||
|
**Ví dụ:**
|
||||||
|
**Given** ví A và B thuộc cùng một thực thể
|
||||||
|
**When** ví A mua 500M tokens
|
||||||
|
**And** ví B mua 300M tokens
|
||||||
|
**Then** hệ thống hiển thị "Entity holds 800M tokens across 2 wallets"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.2.3: Theo dõi Smart Money
|
||||||
|
**Given** user xác định được ví có lợi nhuận cao
|
||||||
|
**When** user click "Track This Wallet"
|
||||||
|
**Then** ví được thêm vào danh sách smart money
|
||||||
|
**And** tất cả giao dịch tương lai từ ví này sẽ kích hoạt alerts
|
||||||
|
|
||||||
|
**Hiệu suất Lịch sử:**
|
||||||
|
**Given** ví đang được theo dõi là smart money
|
||||||
|
**When** user xem chi tiết ví
|
||||||
|
**Then** hệ thống hiển thị:
|
||||||
|
- Tổng số giao dịch: 50
|
||||||
|
- Tỷ lệ thắng (Win rate): 75%
|
||||||
|
- Lợi nhuận trung bình: +120%
|
||||||
|
- Các giao dịch gần đây (10 giao dịch cuối)
|
||||||
|
|
||||||
|
**Cảnh báo Hoạt động:**
|
||||||
|
**Given** ví smart money thực hiện giao dịch
|
||||||
|
**When** giao dịch được phát hiện
|
||||||
|
**Then** thông báo ưu tiên "⚠️ Smart Money Alert: Wallet 0x1234 bought $50K PEPE"
|
||||||
|
**And** thông báo có mức ưu tiên cao hơn whale alerts thông thường
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.2.4: Chi tiết Giao dịch
|
||||||
|
**Given** phát hiện giao dịch cá voi
|
||||||
|
**When** user click vào thông báo
|
||||||
|
**Then** modal chi tiết mở ra với:
|
||||||
|
- Địa chỉ ví: "0x1234...5678" (có thể copy)
|
||||||
|
- Transaction hash: "0xabcd...ef01" (có thể copy)
|
||||||
|
- Số lượng: "1B tokens ($100,000)"
|
||||||
|
- Thời gian: "2 min ago (14:30:15 UTC)"
|
||||||
|
- Link tới block explorer
|
||||||
|
- Nút [Track This Wallet]
|
||||||
|
|
||||||
|
**Link tới Explorer:**
|
||||||
|
**Given** user click "View on Explorer"
|
||||||
|
**When** link được click
|
||||||
|
**Then** tab mới mở ra với:
|
||||||
|
- Solana: Solscan.io
|
||||||
|
- Ethereum: Etherscan.io
|
||||||
|
- Base: BaseScan.org
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.2.5: Feed Hoạt động Cá voi
|
||||||
|
**Given** phát hiện nhiều giao dịch cá voi
|
||||||
|
**When** user mở panel Whale Activity
|
||||||
|
**Then** feed hiển thị danh sách theo thời gian:
|
||||||
|
- Gần nhất ở trên cùng
|
||||||
|
- 50 giao dịch cuối cùng
|
||||||
|
- Gom nhóm theo token
|
||||||
|
- Lọc theo: Tất cả tokens / Chỉ Watchlist
|
||||||
|
|
||||||
|
**Tùy chọn Lọc:**
|
||||||
|
**Given** user có 100 whale transactions
|
||||||
|
**When** user lọc "Watchlist only"
|
||||||
|
**Then** chỉ hiển thị giao dịch của tokens trong watchlist
|
||||||
|
**When** user lọc "Smart Money only"
|
||||||
|
**Then** chỉ hiển thị giao dịch của ví được theo dõi
|
||||||
|
|
||||||
|
**Cập nhật Real-time:**
|
||||||
|
**Given** user đang mở panel Whale Activity
|
||||||
|
**When** phát hiện giao dịch cá voi mới
|
||||||
|
**Then** item mới xuất hiện ở đầu feed
|
||||||
|
**And** hiệu ứng trượt mượt mà (smooth animation)
|
||||||
|
**And** badge unread tăng lên
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -157,7 +343,7 @@ GET /api/alerts/check // Returns triggered alerts
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface WhaleTransaction {
|
interface WhaleTransaction {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -196,36 +382,145 @@ async function monitorWhaleActivity() {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 2.3: Rug Pull Early Warning System
|
### Story 2.3: Hệ thống Cảnh báo Sớm Rug Pull (Rug Pull Early Warning System)
|
||||||
**[FR-EXT-09]**
|
**[FR-EXT-09]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** được cảnh báo sớm về rug pull risks,
|
**Tôi muốn** được cảnh báo sớm về rủi ro rug pull,
|
||||||
**Để** tôi không mất tiền vào scam tokens.
|
**Để** tôi không mất tiền vào các token lừa đảo (scam tokens).
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria - BDD Format):**
|
||||||
- [ ] Risk indicators monitored:
|
|
||||||
- LP removal (liquidity pulled)
|
#### AC 2.3.1: Giám sát Chỉ số Rủi ro (Risk Indicators Monitoring)
|
||||||
- Mint authority changes (can mint more tokens)
|
**Given** user đang xem token trên DexScreener
|
||||||
- Suspicious holder patterns (top 10 holders > 80%)
|
**When** hệ thống phân tích contract của token
|
||||||
- Contract ownership (not renounced)
|
**Then** các chỉ số rủi ro sau được kiểm tra:
|
||||||
- Honeypot detection (can't sell)
|
|
||||||
- [ ] Risk score calculation:
|
**Phát hiện Rút thanh khoản (LP Removal Detection):**
|
||||||
- 0-3: Low risk (green)
|
**Given** token có liquidity pool
|
||||||
- 4-6: Medium risk (yellow)
|
**When** LP tokens bị rút hoặc mở khóa (unlocked)
|
||||||
- 7-10: High risk (red)
|
**Then** điểm rủi ro +3 điểm
|
||||||
- [ ] Risk score display:
|
**And** cảnh báo "🔴 LP REMOVED: BULLA/SOL - Potential rug pull!"
|
||||||
- Show on Token Info Card
|
|
||||||
- Update in real-time
|
**Thay đổi Quyền Mint (Mint Authority Changes):**
|
||||||
- Explain each risk factor
|
**Given** token mint authority tồn tại
|
||||||
- [ ] Recommendations:
|
**When** mint authority chưa được từ bỏ (not renounced)
|
||||||
- SAFE: "Low risk, proceed with caution"
|
**Then** điểm rủi ro +2 điểm
|
||||||
- CAUTION: "Medium risk, do your own research"
|
**And** cảnh báo "🟡 Mint authority active - can create unlimited tokens"
|
||||||
- AVOID: "High risk, likely scam"
|
|
||||||
- [ ] Alerts:
|
**Mô hình Holder Đáng ngờ:**
|
||||||
- Notify when risk score increases
|
**Given** token có phân bổ holder
|
||||||
- Notify on LP removal
|
**When** top 10 holders sở hữu >80% nguồn cung
|
||||||
- Notify on mint authority changes
|
**Then** điểm rủi ro +2 điểm
|
||||||
|
**And** cảnh báo "🟡 Centralized ownership - top 10 hold 85%"
|
||||||
|
|
||||||
|
**Quyền sở hữu Contract:**
|
||||||
|
**Given** token contract có chủ sở hữu (owner)
|
||||||
|
**When** ownership chưa được từ bỏ
|
||||||
|
**Then** điểm rủi ro +1 điểm
|
||||||
|
**And** cảnh báo "🟡 Contract owner can modify code"
|
||||||
|
|
||||||
|
**Phát hiện Honeypot:**
|
||||||
|
**Given** token contract được phân tích
|
||||||
|
**When** chức năng bán bị vô hiệu hóa hoặc hạn chế
|
||||||
|
**Then** điểm rủi ro +3 điểm
|
||||||
|
**And** cảnh báo nghiêm trọng "🔴 HONEYPOT DETECTED - Cannot sell!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.3.2: Tính toán Điểm Rủi ro (Risk Score Calculation)
|
||||||
|
**Given** tất cả chỉ số rủi ro đã được phân tích
|
||||||
|
**When** hệ thống tính tổng điểm rủi ro
|
||||||
|
**Then** điểm số hiển thị như sau:
|
||||||
|
|
||||||
|
**Rủi ro Thấp (Low Risk - 0-3):**
|
||||||
|
**Given** điểm rủi ro = 2
|
||||||
|
**Then** badge hiển thị "✅ Low Risk (2/10)"
|
||||||
|
**And** màu xanh lá
|
||||||
|
**And** khuyến nghị "SAFE: Proceed with caution"
|
||||||
|
|
||||||
|
**Rủi ro Trung bình (Medium Risk - 4-6):**
|
||||||
|
**Given** điểm rủi ro = 5
|
||||||
|
**Then** badge hiển thị "⚠️ Medium Risk (5/10)"
|
||||||
|
**And** màu vàng
|
||||||
|
**And** khuyến nghị "CAUTION: Do your own research"
|
||||||
|
|
||||||
|
**Rủi ro Cao (High Risk - 7-10):**
|
||||||
|
**Given** điểm rủi ro = 8
|
||||||
|
**Then** badge hiển thị "🔴 High Risk (8/10)"
|
||||||
|
**And** màu đỏ
|
||||||
|
**And** khuyến nghị "AVOID: Likely scam"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.3.3: Hiển thị Điểm Rủi ro
|
||||||
|
**Given** token đã được phân tích
|
||||||
|
**When** user xem Token Info Card
|
||||||
|
**Then** điểm rủi ro hiển thị nổi bật:
|
||||||
|
- Risk badge ở trên cùng
|
||||||
|
- Các yếu tố rủi ro riêng lẻ được liệt kê
|
||||||
|
- Mỗi yếu tố với icon (🔴/🟡/🟢)
|
||||||
|
- Giải thích cho mỗi yếu tố
|
||||||
|
|
||||||
|
**Cập nhật Real-time:**
|
||||||
|
**Given** điểm rủi ro ban đầu là 3/10
|
||||||
|
**When** LP bị rút (rủi ro tăng lên 6/10)
|
||||||
|
**Then** risk badge cập nhật ngay lập tức
|
||||||
|
**And** màu thay đổi từ xanh -> vàng
|
||||||
|
**And** gửi thông báo
|
||||||
|
|
||||||
|
**Giải thích Yếu tố Rủi ro:**
|
||||||
|
**Given** user click vào risk badge
|
||||||
|
**When** modal chi tiết mở ra
|
||||||
|
**Then** giải thích từng yếu tố:
|
||||||
|
- "🔴 LP unlocked (High Risk): Liquidity can be removed anytime"
|
||||||
|
- "🟡 Top holder owns 40%: Centralized ownership risk"
|
||||||
|
- "🟢 Contract verified: Code is public and audited"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.3.4: Khuyến nghị (Recommendations)
|
||||||
|
**Given** điểm rủi ro đã tính toán
|
||||||
|
**When** hệ thống tạo khuyến nghị
|
||||||
|
**Then** thông điệp phù hợp hiển thị:
|
||||||
|
|
||||||
|
**SAFE (0-3):**
|
||||||
|
**Then** thông điệp "✅ Low risk, proceed with caution. Always DYOR."
|
||||||
|
|
||||||
|
**CAUTION (4-6):**
|
||||||
|
**Then** thông điệp "⚠️ Medium risk, do your own research. Some red flags detected."
|
||||||
|
|
||||||
|
**AVOID (7-10):**
|
||||||
|
**Then** thông điệp "🔴 High risk, likely scam. Strong evidence of rug pull potential."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### AC 2.3.5: Cảnh báo Rủi ro (Risk Alerts)
|
||||||
|
**Given** user có token trong watchlist
|
||||||
|
**When** điểm rủi ro tăng lên
|
||||||
|
**Then** cảnh báo được kích hoạt
|
||||||
|
|
||||||
|
**Tăng Điểm Rủi ro:**
|
||||||
|
**Given** điểm rủi ro là 3/10
|
||||||
|
**When** rủi ro tăng lên 7/10
|
||||||
|
**Then** thông báo "⚠️ RISK ALERT: BULLA/SOL risk increased to 7/10 (High Risk)"
|
||||||
|
|
||||||
|
**Cảnh báo Rút LP:**
|
||||||
|
**Given** token có LP bị khóa
|
||||||
|
**When** LP bị rút
|
||||||
|
**Then** cảnh báo khẩn cấp "🚨 URGENT: LP REMOVED from BULLA/SOL - Exit immediately!"
|
||||||
|
**And** âm thanh cảnh báo phát ra
|
||||||
|
**And** thông báo tồn tại cho đến khi bị tắt (dismissed)
|
||||||
|
|
||||||
|
**Thay đổi Quyền Mint:**
|
||||||
|
**Given** mint authority đã được từ bỏ
|
||||||
|
**When** mint authority được kích hoạt lại
|
||||||
|
**Then** cảnh báo "⚠️ WARNING: Mint authority changed for BULLA/SOL"
|
||||||
|
|
||||||
|
**Phát hiện Honeypot:**
|
||||||
|
**Given** token có thể bán được
|
||||||
|
**When** honeypot bị phát hiện
|
||||||
|
**Then** cảnh báo nghiêm trọng "🔴 HONEYPOT: Cannot sell BULLA/SOL - Do not buy!"
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -247,7 +542,7 @@ async function monitorWhaleActivity() {
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface RiskAssessment {
|
interface RiskAssessment {
|
||||||
tokenAddress: string;
|
tokenAddress: string;
|
||||||
|
|
@ -266,50 +561,6 @@ interface RiskAssessment {
|
||||||
explanation: string;
|
explanation: string;
|
||||||
timestamp: number;
|
timestamp: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function assessRugPullRisk(tokenAddress: string, chain: string): Promise<RiskAssessment> {
|
|
||||||
// Check LP lock status
|
|
||||||
const lpLocked = await checkLPLock(tokenAddress, chain);
|
|
||||||
|
|
||||||
// Check mint authority
|
|
||||||
const mintAuthority = await checkMintAuthority(tokenAddress, chain);
|
|
||||||
|
|
||||||
// Check holder distribution
|
|
||||||
const holders = await getTopHolders(tokenAddress, chain);
|
|
||||||
const topHolderPercent = calculateTopHolderPercent(holders);
|
|
||||||
|
|
||||||
// Check contract verification
|
|
||||||
const contractVerified = await isContractVerified(tokenAddress, chain);
|
|
||||||
|
|
||||||
// Check honeypot
|
|
||||||
const isHoneypot = await checkHoneypot(tokenAddress, chain);
|
|
||||||
|
|
||||||
// Calculate risk score
|
|
||||||
const riskScore = calculateRiskScore({
|
|
||||||
lpLocked,
|
|
||||||
mintAuthority,
|
|
||||||
topHolderPercent,
|
|
||||||
contractVerified,
|
|
||||||
isHoneypot,
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
tokenAddress,
|
|
||||||
chain,
|
|
||||||
riskScore,
|
|
||||||
riskLevel: getRiskLevel(riskScore),
|
|
||||||
indicators: {
|
|
||||||
lpLocked,
|
|
||||||
mintAuthority,
|
|
||||||
topHolderPercent,
|
|
||||||
contractVerified,
|
|
||||||
isHoneypot,
|
|
||||||
},
|
|
||||||
recommendation: getRecommendation(riskScore),
|
|
||||||
explanation: generateExplanation(riskScore, indicators),
|
|
||||||
timestamp: Date.now(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Data Sources:**
|
**Data Sources:**
|
||||||
|
|
@ -355,20 +606,20 @@ GET /api/risk/assess
|
||||||
## Testing Strategy
|
## Testing Strategy
|
||||||
|
|
||||||
### Unit Tests
|
### Unit Tests
|
||||||
- [ ] Risk score calculation
|
- [ ] Tính toán điểm rủi ro (Risk score calculation)
|
||||||
- [ ] Whale transaction detection
|
- [ ] Phát hiện giao dịch cá voi (Whale transaction detection)
|
||||||
- [ ] Alert triggering logic
|
- [ ] Logic kích hoạt cảnh báo (Alert triggering logic)
|
||||||
|
|
||||||
### Integration Tests
|
### Integration Tests
|
||||||
- [ ] Price alerts trigger correctly
|
- [ ] Price alerts kích hoạt chính xác
|
||||||
- [ ] Whale activity notifications work
|
- [ ] Thông báo hoạt động cá voi hoạt động
|
||||||
- [ ] Risk assessment updates in real-time
|
- [ ] Đánh giá rủi ro cập nhật realtime
|
||||||
|
|
||||||
### Manual Testing
|
### Manual Testing
|
||||||
- [ ] Add token to watchlist
|
- [ ] Thêm token vào watchlist
|
||||||
- [ ] Set price alert and verify notification
|
- [ ] Đặt price alert và xác minh thông báo
|
||||||
- [ ] Monitor whale activity on live token
|
- [ ] Giám sát hoạt động cá voi trên live token
|
||||||
- [ ] Check rug pull warning on known scam token
|
- [ ] Kiểm tra cảnh báo rug pull trên scam token đã biết
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -385,8 +636,8 @@ GET /api/risk/assess
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Notes
|
## Ghi chú
|
||||||
|
|
||||||
**Priority Justification:** Risk protection (rug pull detection) is CRITICAL for user trust. Users will not use the product if they lose money to scams.
|
**Priority Justification:** Risk protection (rug pull detection) là QUAN TRỌNG (CRITICAL) cho niềm tin của user. Users sẽ không sử dụng sản phẩm nếu họ mất tiền vì scams.
|
||||||
|
|
||||||
**Next Epic:** Epic 3 - Trading Intelligence (Phase 3)
|
**Next Epic:** Epic 3 - Trading Intelligence (Phase 3)
|
||||||
|
|
|
||||||
|
|
@ -1,77 +1,77 @@
|
||||||
# Epic 3: Trading Intelligence
|
# Epic 3: Trading Intelligence (Trí tuệ Giao dịch)
|
||||||
|
|
||||||
**Status:** 📋 PLANNED
|
**Trạng thái:** 📋 ĐÃ LÊN KẾ HOẠCH (PLANNED)
|
||||||
**Phase:** Phase 3
|
**Giai đoạn:** Phase 3
|
||||||
**Duration:** 2 weeks
|
**Thời gian:** 2 tuần
|
||||||
**Priority:** P1 (High - Value Add)
|
**Mức độ ưu tiên:** P1 (Cao - Giá trị gia tăng)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Epic Overview
|
## Tổng quan Epic
|
||||||
|
|
||||||
Cung cấp AI-powered trading insights để giúp users make better trading decisions. Tập trung vào **comprehensive analysis**, **entry/exit suggestions**, và **portfolio tracking**.
|
Cung cấp AI-powered trading insights để giúp users ra quyết định giao dịch tốt hơn (make better trading decisions). Tập trung vào **phân tích toàn diện (comprehensive analysis)**, **gợi ý điểm vào/ra (entry/exit suggestions)**, và **theo dõi danh mục đầu tư (portfolio tracking)**.
|
||||||
|
|
||||||
**Business Value:**
|
**Giá trị kinh doanh (Business Value):**
|
||||||
- **Better Decisions:** AI-generated insights giúp users trade smarter
|
- **Quyết định tốt hơn:** AI-generated insights giúp users trade thông minh hơn.
|
||||||
- **Time Savings:** One-click analysis thay vì hours of research
|
- **Tiết kiệm thời gian:** Phân tích một cú click thay vì hàng giờ nghiên cứu.
|
||||||
- **Portfolio Management:** Track performance và optimize holdings
|
- **Quản lý danh mục:** Theo dõi hiệu suất và tối ưu hóa holdings.
|
||||||
- **Competitive Advantage:** AI predictions vs static data (DexScreener/DexTools)
|
- **Lợi thế cạnh tranh:** Dự đoán AI so với dữ liệu tĩnh (DexScreener/DexTools).
|
||||||
|
|
||||||
**Key Differentiator:** AI-first analysis với natural language explanations.
|
**Điểm khác biệt chính:** Phân tích ưu tiên AI (AI-first analysis) với các giải thích bằng ngôn ngữ tự nhiên.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## User Stories
|
## User Stories
|
||||||
|
|
||||||
### Story 3.1: One-Click Token Analysis
|
### Story 3.1: Phân tích Token Một Cú Click (One-Click Token Analysis)
|
||||||
**[FR-EXT-10]**
|
**[FR-EXT-10]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** analyze token với một click,
|
**Tôi muốn** analyze token với một click,
|
||||||
**Để** tôi có comprehensive insights mà không cần research thủ công.
|
**Để** tôi có insights toàn diện mà không cần nghiên cứu thủ công.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
- [ ] "Analyze This Token" button trên Token Info Card
|
- [ ] Nút "Analyze This Token" trên Thẻ Thông tin Token (Token Info Card)
|
||||||
- [ ] Comprehensive analysis includes:
|
- [ ] Phân tích toàn diện bao gồm:
|
||||||
- **Contract Analysis:**
|
- **Phân tích Hợp đồng (Contract Analysis):**
|
||||||
- Verified/unverified
|
- Đã xác minh/chưa xác minh (Verified/unverified)
|
||||||
- Renounced ownership
|
- Từ bỏ quyền sở hữu (Renounced ownership)
|
||||||
- Proxy contract detection
|
- Phát hiện Proxy contract
|
||||||
- Source code availability
|
- Tính khả dụng của mã nguồn (Source code availability)
|
||||||
- **Holder Distribution:**
|
- **Phân bổ Holder (Holder Distribution):**
|
||||||
- Top 10 holders percentage
|
- Tỷ lệ Top 10 holders
|
||||||
- Holder count
|
- Số lượng Holder
|
||||||
- Whale concentration
|
- Độ tập trung của Whale
|
||||||
- Distribution chart
|
- Biểu đồ phân bổ
|
||||||
- **Liquidity Analysis:**
|
- **Phân tích Thanh khoản (Liquidity Analysis):**
|
||||||
- Total liquidity (USD)
|
- Tổng thanh khoản (USD)
|
||||||
- LP lock status & duration
|
- Trạng thái khóa LP & thời hạn
|
||||||
- Liquidity history (7d, 30d)
|
- Lịch sử thanh khoản (7 ngày, 30 ngày)
|
||||||
- Liquidity/Market cap ratio
|
- Tỷ lệ Thanh khoản/Vốn hóa (Liquidity/Market cap ratio)
|
||||||
- **Trading Volume:**
|
- **Khối lượng Giao dịch (Trading Volume):**
|
||||||
- 24h volume
|
- Volume 24h
|
||||||
- Volume trend (increasing/decreasing)
|
- Xu hướng Volume (tăng/giảm)
|
||||||
- Volume/Liquidity ratio
|
- Tỷ lệ Volume/Thanh khoản
|
||||||
- Unusual volume spikes
|
- Các đợt tăng volume bất thường (Unusual volume spikes)
|
||||||
- **Price History:**
|
- **Lịch sử Giá (Price History):**
|
||||||
- All-time high/low
|
- Giá cao nhất/thấp nhất mọi thời đại (ATH/ATL)
|
||||||
- 7d, 30d performance
|
- Hiệu suất 7 ngày, 30 ngày
|
||||||
- Price volatility
|
- Biến động giá (Price volatility)
|
||||||
- Support/resistance levels
|
- Các mức Hỗ trợ/Kháng cự (Support/resistance levels)
|
||||||
- **Social Sentiment:**
|
- **Cảm xúc Xã hội (Social Sentiment):**
|
||||||
- Twitter mentions
|
- Twitter mentions
|
||||||
- Telegram activity
|
- Hoạt động Telegram
|
||||||
- Reddit discussions
|
- Thảo luận Reddit
|
||||||
- Sentiment score (positive/negative/neutral)
|
- Điểm cảm xúc (tích cực/tiêu cực/trung lập)
|
||||||
- [ ] AI-Generated Summary:
|
- [ ] Tóm tắt do AI tạo (AI-Generated Summary):
|
||||||
- 2-3 sentence summary
|
- Tóm tắt 2-3 câu
|
||||||
- Key insights highlighted
|
- Các insight chính được làm nổi bật
|
||||||
- Risk assessment
|
- Đánh giá rủi ro (Risk assessment)
|
||||||
- Trading recommendation
|
- Khuyến nghị giao dịch (Trading recommendation)
|
||||||
- [ ] Analysis caching:
|
- [ ] Caching phân tích:
|
||||||
- Cache for 5 minutes
|
- Cache trong 5 phút
|
||||||
- Show "Last updated" timestamp
|
- Hiển thị timestamp "Cập nhật lần cuối"
|
||||||
- Refresh button
|
- Nút Refresh
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -104,10 +104,10 @@ Cung cấp AI-powered trading insights để giúp users make better trading dec
|
||||||
│ │
|
│ │
|
||||||
│ [View Full Report] │
|
│ [View Full Report] │
|
||||||
│ Last updated: 2 min ago │
|
│ Last updated: 2 min ago │
|
||||||
└─────────────────────────────┘
|
107: └─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface TokenAnalysis {
|
interface TokenAnalysis {
|
||||||
tokenAddress: string;
|
tokenAddress: string;
|
||||||
|
|
@ -211,36 +211,36 @@ async function analyzeToken(tokenAddress: string, chain: string): Promise<TokenA
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 3.2: Smart Entry/Exit Suggestions
|
### Story 3.2: Gợi ý Điểm Vào/Ra Thông minh (Smart Entry/Exit Suggestions)
|
||||||
**[FR-EXT-11]**
|
**[FR-EXT-11]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** AI suggest entry/exit points,
|
**Tôi muốn** AI gợi ý các điểm entry/exit,
|
||||||
**Để** tôi maximize profits và minimize losses.
|
**Để** tôi tối đa hóa lợi nhuận và giảm thiểu rủi ro.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
- [ ] Technical analysis:
|
- [ ] Phân tích kỹ thuật (Technical analysis):
|
||||||
- Support/Resistance levels (3 levels each)
|
- Các mức Hỗ trợ/Kháng cự (3 levels each)
|
||||||
- Fibonacci retracement levels
|
- Các mức Fibonacci retracement
|
||||||
- Volume profile analysis
|
- Phân tích Volume profile
|
||||||
- Moving averages (20, 50, 200)
|
- Đường trung bình động (Moving averages) (20, 50, 200)
|
||||||
- [ ] AI predictions:
|
- [ ] Dự đoán của AI (AI predictions):
|
||||||
- Predicted price targets (3 levels)
|
- Mục tiêu giá dự kiến (Predicted price targets) (3 levels)
|
||||||
- Time horizon (1h, 4h, 24h)
|
- Khung thời gian (1h, 4h, 24h)
|
||||||
- Confidence score per prediction
|
- Điểm tin cậy (Confidence score) cho mỗi dự đoán
|
||||||
- [ ] Risk/Reward calculation:
|
- [ ] Tính toán Rủi ro/Lợi nhuận (Risk/Reward):
|
||||||
- Suggested entry range
|
- Vùng vào lệnh gợi ý (Suggested entry range)
|
||||||
- Stop loss level
|
- Mức cắt lỗ (Stop loss level)
|
||||||
- Take profit levels (3 targets)
|
- Các mức chốt lời (Take profit levels) (3 targets)
|
||||||
- Risk/Reward ratio
|
- Tỷ lệ Risk/Reward
|
||||||
- [ ] Visual representation:
|
- [ ] Trực quan hóa (Visual representation):
|
||||||
- Price chart with levels marked
|
- Biểu đồ giá với các levels được đánh dấu
|
||||||
- Entry/exit zones highlighted
|
- Vùng entry/exit được làm nổi bật
|
||||||
- Risk/reward visualization
|
- Trực quan hóa Risk/reward
|
||||||
- [ ] Explanation:
|
- [ ] Giải thích (Explanation):
|
||||||
- Why these levels?
|
- Tại sao lại là các levels này?
|
||||||
- What signals support this?
|
- Tín hiệu nào hỗ trợ điều này?
|
||||||
- What could invalidate this?
|
- Điều gì có thể vô hiệu hóa dự đoán này?
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -272,7 +272,7 @@ async function analyzeToken(tokenAddress: string, chain: string): Promise<TokenA
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface TradingSuggestion {
|
interface TradingSuggestion {
|
||||||
tokenAddress: string;
|
tokenAddress: string;
|
||||||
|
|
@ -320,40 +320,40 @@ interface TradingSuggestion {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 3.3: Portfolio Tracker Integration
|
### Story 3.3: Tích hợp Theo dõi Portfolio (Portfolio Tracker Integration)
|
||||||
**[FR-EXT-12]**
|
**[FR-EXT-12]**
|
||||||
|
|
||||||
**Là một** crypto trader,
|
**Là một** crypto trader,
|
||||||
**Tôi muốn** track portfolio trong extension,
|
**Tôi muốn** theo dõi portfolio ngay trong extension,
|
||||||
**Để** tôi biết P&L real-time mà không cần mở nhiều tabs.
|
**Để** tôi biết P&L realtime mà không cần mở nhiều tab.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
- [ ] Wallet connection:
|
- [ ] Kết nối Ví (Wallet connection):
|
||||||
- Support MetaMask, Phantom, Coinbase Wallet
|
- Hỗ trợ MetaMask, Phantom, Coinbase Wallet
|
||||||
- Multi-wallet support
|
- Hỗ trợ Multi-wallet
|
||||||
- Auto-detect holdings
|
- Tự động phát hiện holdings
|
||||||
- [ ] Portfolio overview:
|
- [ ] Tổng quan Portfolio:
|
||||||
- Total value (USD)
|
- Tổng giá trị (USD)
|
||||||
- 24h P&L ($ and %)
|
- 24h P&L ($ và %)
|
||||||
- All-time P&L
|
- All-time P&L
|
||||||
- Asset allocation chart
|
- Biểu đồ phân bổ tài sản
|
||||||
- [ ] Holdings list:
|
- [ ] Danh sách Holdings:
|
||||||
- Token symbol/name
|
- Token symbol/name
|
||||||
- Amount held
|
- Số lượng nắm giữ (Amount held)
|
||||||
- Current value
|
- Giá trị hiện tại
|
||||||
- 24h change
|
- Thay đổi 24h
|
||||||
- P&L per token
|
- P&L theo từng token
|
||||||
- Entry price (if available)
|
- Giá entry (nếu có sẵn)
|
||||||
- [ ] Performance analytics:
|
- [ ] Phân tích Hiệu suất (Performance analytics):
|
||||||
- Best/worst performers
|
- Best/worst performers
|
||||||
- Win rate
|
- Tỷ lệ thắng (Win rate)
|
||||||
- Average hold time
|
- Thời gian giữ trung bình (Average hold time)
|
||||||
- Total trades
|
- Tổng số giao dịch
|
||||||
- [ ] Quick actions:
|
- [ ] Thao tác nhanh (Quick actions):
|
||||||
- Analyze token
|
- Analyze token
|
||||||
- Set price alert
|
- Set price alert
|
||||||
- View on DexScreener
|
- Xem trên DexScreener
|
||||||
- Sell (link to DEX)
|
- Sell (link tới DEX)
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -384,7 +384,7 @@ interface TradingSuggestion {
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface Portfolio {
|
interface Portfolio {
|
||||||
wallets: {
|
wallets: {
|
||||||
|
|
@ -429,7 +429,7 @@ interface Portfolio {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Technical Dependencies
|
## Các phụ thuộc kỹ thuật (Technical Dependencies)
|
||||||
|
|
||||||
### Backend APIs
|
### Backend APIs
|
||||||
```
|
```
|
||||||
|
|
@ -453,38 +453,38 @@ GET /api/portfolio/analytics
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Testing Strategy
|
## Chiến lược Kiểm thử (Testing Strategy)
|
||||||
|
|
||||||
### Unit Tests
|
### Unit Tests
|
||||||
- [ ] Token analysis calculation
|
- [ ] Tính toán phân tích Token
|
||||||
- [ ] Trading suggestion algorithm
|
- [ ] Thuật toán gợi ý giao dịch
|
||||||
- [ ] Portfolio P&L calculation
|
- [ ] Tính toán P&L Portfolio
|
||||||
|
|
||||||
### Integration Tests
|
### Integration Tests
|
||||||
- [ ] Wallet connection flow
|
- [ ] Quy trình kết nối Wallet
|
||||||
- [ ] Portfolio data fetching
|
- [ ] Fetch dữ liệu Portfolio
|
||||||
- [ ] Analysis generation
|
- [ ] Tạo phân tích (Analysis generation)
|
||||||
|
|
||||||
### Manual Testing
|
### Manual Testing
|
||||||
- [ ] Analyze live token
|
- [ ] Phân tích một token trực tiếp (live token)
|
||||||
- [ ] Connect wallet and view portfolio
|
- [ ] Kết nối ví và xem portfolio
|
||||||
- [ ] Verify trading suggestions accuracy
|
- [ ] Xác minh độ chính xác của các gợi ý giao dịch
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Definition of Done
|
## Định nghĩa hoàn thành (Definition of Done)
|
||||||
|
|
||||||
- [ ] All 3 stories completed
|
- [ ] Tất cả 3 user stories hoàn thành
|
||||||
- [ ] All acceptance criteria met
|
- [ ] Tất cả tiêu chí chấp nhận (acceptance criteria) được đáp ứng
|
||||||
- [ ] Unit tests passing
|
- [ ] Unit tests pass
|
||||||
- [ ] Integration tests passing
|
- [ ] Integration tests pass
|
||||||
- [ ] Manual testing completed
|
- [ ] Manual testing hoàn thành
|
||||||
- [ ] Wallet integrations working
|
- [ ] Tích hợp Wallet hoạt động
|
||||||
- [ ] Code reviewed
|
- [ ] Code được review
|
||||||
- [ ] Documentation updated
|
- [ ] Tài liệu được cập nhật
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Notes
|
## Ghi chú
|
||||||
|
|
||||||
**Next Epic:** Epic 4 - Content Creation & Productivity (Phase 4)
|
**Next Epic:** Epic 4 - Content Creation & Productivity (Phase 4)
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,65 @@
|
||||||
# Epic 4: Content Creation & Productivity
|
# Epic 4: Content Creation & Productivity (Tạo Nội dung & Hiệu suất)
|
||||||
|
|
||||||
**Status:** 📋 PLANNED
|
**Trạng thái:** 📋 ĐÃ LÊN KẾ HOẠCH (PLANNED)
|
||||||
**Phase:** Phase 4
|
**Giai đoạn:** Phase 4
|
||||||
**Duration:** 2 weeks
|
**Thời gian:** 2 tuần
|
||||||
**Priority:** P2 (Medium - Nice to Have)
|
**Mức độ ưu tiên:** P2 (Trung bình - Nên có (Nice to Have))
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Epic Overview
|
## Tổng quan Epic
|
||||||
|
|
||||||
Tạo tools giúp users create content (charts, threads) và improve productivity (quick actions, notifications, shortcuts). Tập trung vào **content creators** và **power users**.
|
Tạo tools giúp users tạo nội dung (biểu đồ, threads) và cải thiện hiệu suất (thao tác nhanh, thông báo, phím tắt). Tập trung vào **content creators** và **power users**.
|
||||||
|
|
||||||
**Business Value:**
|
**Giá trị kinh doanh (Business Value):**
|
||||||
- **Content Creators:** Tools để tạo Twitter threads, chart screenshots
|
- **Content Creators:** Công cụ để tạo Twitter threads, chụp ảnh biểu đồ (chart screenshots).
|
||||||
- **Power Users:** Keyboard shortcuts, quick actions để work faster
|
- **Power Users:** Phím tắt, thao tác nhanh để làm việc nhanh hơn.
|
||||||
- **Viral Marketing:** Users share content → Free marketing
|
- **Viral Marketing:** Users chia sẻ nội dung → Marketing miễn phí.
|
||||||
- **User Retention:** Productivity features → Sticky product
|
- **User Retention:** Các tính năng hiệu suất → Sản phẩm có độ kết dính cao (Sticky product).
|
||||||
|
|
||||||
**Key Differentiator:** AI-powered content generation vs manual tools.
|
**Điểm khác biệt chính:** Tạo nội dung bằng AI (AI-powered content generation) so với công cụ thủ công.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## User Stories
|
## User Stories
|
||||||
|
|
||||||
### Story 4.1: Chart Screenshot with Annotations
|
### Story 4.1: Chụp ảnh Biểu đồ có Chú thích (Chart Screenshot with Annotations)
|
||||||
**[FR-EXT-13]**
|
**[FR-EXT-13]**
|
||||||
|
|
||||||
**Là một** crypto content creator,
|
**Là một** crypto content creator,
|
||||||
**Tôi muốn** capture và annotate charts,
|
**Tôi muốn** chụp và chú thích biểu đồ (capture và annotate charts),
|
||||||
**Để** tôi có thể share insights trên Twitter/Telegram.
|
**Để** tôi có thể chia sẻ insights trên Twitter/Telegram.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
- [ ] One-click chart capture:
|
- [ ] Chụp biểu đồ một cú click (One-click chart capture):
|
||||||
- Capture from DexScreener page
|
- Capture từ trang DexScreener
|
||||||
- Auto-detect chart area
|
- Tự động phát hiện vùng biểu đồ
|
||||||
- High-resolution screenshot
|
- Screenshot độ phân giải cao
|
||||||
- [ ] Auto-add metadata:
|
- [ ] Tự động thêm metadata (Auto-add metadata):
|
||||||
- Token symbol/name
|
- Token symbol/name
|
||||||
- Current price
|
- Giá hiện tại
|
||||||
- 24h change
|
- Thay đổi 24h
|
||||||
- Volume, liquidity
|
- Volume, thanh khoản
|
||||||
- Timestamp
|
- Thời gian (Timestamp)
|
||||||
- Watermark (optional)
|
- Watermark (tùy chọn)
|
||||||
- [ ] Drawing tools:
|
- [ ] Công cụ vẽ (Drawing tools):
|
||||||
- Lines (trend lines, support/resistance)
|
- Đường (trend lines, support/resistance)
|
||||||
- Arrows (direction indicators)
|
- Mũi tên (chỉ hướng)
|
||||||
- Text labels
|
- Nhãn văn bản (Text labels)
|
||||||
- Shapes (circles, rectangles)
|
- Hình dạng (tròn, chữ nhật)
|
||||||
- Fibonacci retracement
|
- Fibonacci retracement
|
||||||
- [ ] Template styles:
|
- [ ] Kiểu mẫu (Template styles):
|
||||||
- Dark mode (default)
|
- Dark mode (mặc định)
|
||||||
- Light mode
|
- Light mode
|
||||||
- Neon (crypto aesthetic)
|
- Neon (crypto aesthetic)
|
||||||
- Custom colors
|
- Màu tùy chỉnh
|
||||||
- [ ] Export options:
|
- [ ] Tùy chọn xuất (Export options):
|
||||||
- Twitter format (1200x675)
|
- Định dạng Twitter (1200x675)
|
||||||
- Telegram format (square)
|
- Định dạng Telegram (vuông)
|
||||||
- Instagram format (1080x1080)
|
- Định dạng Instagram (1080x1080)
|
||||||
- Custom size
|
- Kích thước tùy chỉnh
|
||||||
- Copy to clipboard
|
- Copy vào clipboard
|
||||||
- Save to file
|
- Lưu thành file
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -86,7 +86,7 @@ Tạo tools giúp users create content (charts, threads) và improve productivit
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface ChartCapture {
|
interface ChartCapture {
|
||||||
screenshot: Blob;
|
screenshot: Blob;
|
||||||
|
|
@ -137,41 +137,41 @@ function addAnnotations(canvas: HTMLCanvasElement, annotations: Annotation[]) {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 4.2: AI Thread Generator
|
### Story 4.2: AI tạo Thread Twitter (AI Thread Generator)
|
||||||
**[FR-EXT-14]**
|
**[FR-EXT-14]**
|
||||||
|
|
||||||
**Là một** crypto content creator,
|
**Là một** crypto content creator,
|
||||||
**Tôi muốn** AI generate Twitter threads,
|
**Tôi muốn** AI tạo Twitter threads,
|
||||||
**Để** tôi có thể share insights nhanh chóng.
|
**Để** tôi có thể chia sẻ insights nhanh chóng.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
- [ ] Input:
|
- [ ] Đầu vào (Input):
|
||||||
- Token address (auto-filled if on DexScreener)
|
- Token address (tự động điền nếu đang trên DexScreener)
|
||||||
- Thread topic (optional)
|
- Chủ đề Thread (tùy chọn)
|
||||||
- Thread length (5-10 tweets)
|
- Độ dài Thread (5-10 tweets)
|
||||||
- Tone (bullish/neutral/bearish)
|
- Giọng điệu (Tone) (bullish/neutral/bearish)
|
||||||
- [ ] AI generation:
|
- [ ] AI tạo nội dung (AI generation):
|
||||||
- Analyze token data
|
- Phân tích dữ liệu token
|
||||||
- Generate thread structure
|
- Tạo cấu trúc thread
|
||||||
- Include key stats
|
- Bao gồm các thống kê chính
|
||||||
- Add charts/screenshots
|
- Thêm biểu đồ/screenshots
|
||||||
- Optimize for engagement
|
- Tối ưu hóa cho tương tác (engagement)
|
||||||
- [ ] Thread structure:
|
- [ ] Cấu trúc Thread:
|
||||||
- Tweet 1: Hook (attention grabber)
|
- Tweet 1: Hook (thu hút sự chú ý)
|
||||||
- Tweets 2-4: Analysis (data, insights)
|
- Tweets 2-4: Phân tích (dữ liệu, insights)
|
||||||
- Tweets 5-7: Implications (what it means)
|
- Tweets 5-7: Hàm ý/Tác động (Implications - điều này có nghĩa là gì)
|
||||||
- Tweet 8-9: Conclusion (summary, CTA)
|
- Tweet 8-9: Kết luận (tóm tắt, CTA)
|
||||||
- Tweet 10: Disclaimer (optional)
|
- Tweet 10: Tuyên bố miễn trừ trách nhiệm (Disclaimer - tùy chọn)
|
||||||
- [ ] Editing:
|
- [ ] Chỉnh sửa (Editing):
|
||||||
- Edit each tweet
|
- Chỉnh sửa từng tweet
|
||||||
- Reorder tweets
|
- Sắp xếp lại thứ tự tweets
|
||||||
- Add/remove tweets
|
- Thêm/xóa tweets
|
||||||
- Preview thread
|
- Xem trước thread
|
||||||
- [ ] Export:
|
- [ ] Xuất (Export):
|
||||||
- Copy all tweets
|
- Copy tất cả tweets
|
||||||
- Copy individual tweet
|
- Copy từng tweet
|
||||||
- Tweet directly (Twitter API)
|
- Tweet trực tiếp (Twitter API)
|
||||||
- Save as draft
|
- Lưu nháp (Save as draft)
|
||||||
|
|
||||||
**UI Design:**
|
**UI Design:**
|
||||||
```
|
```
|
||||||
|
|
@ -194,13 +194,15 @@ function addAnnotations(canvas: HTMLCanvasElement, annotations: Annotation[]) {
|
||||||
│ │ 2/ Contract analysis: │ │
|
│ │ 2/ Contract analysis: │ │
|
||||||
│ │ ✅ Verified ✅ Renounced│ │
|
│ │ ✅ Verified ✅ Renounced│ │
|
||||||
│ │ [Edit] │ │
|
│ │ [Edit] │ │
|
||||||
|
│ ├─────────────────────────┤ │
|
||||||
|
│ │ ... │ │
|
||||||
│ └─────────────────────────┘ │
|
│ └─────────────────────────┘ │
|
||||||
│ │
|
│ │
|
||||||
│ [Copy All] [Tweet Now] │
|
│ [Copy All] [Tweet Now] │
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
interface ThreadRequest {
|
interface ThreadRequest {
|
||||||
tokenAddress: string;
|
tokenAddress: string;
|
||||||
|
|
@ -247,65 +249,65 @@ async function generateThread(request: ThreadRequest): Promise<GeneratedThread>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Story 4.3: Quick Actions & Productivity
|
### Story 4.3: Thao tác Nhanh & Hiệu suất (Quick Actions & Productivity)
|
||||||
**[FR-EXT-15, FR-EXT-16, FR-EXT-17]**
|
**[FR-EXT-15, FR-EXT-16, FR-EXT-17]**
|
||||||
|
|
||||||
**Là một** power user,
|
**Là một** power user,
|
||||||
**Tôi muốn** quick actions và shortcuts,
|
**Tôi muốn** có các thao tác nhanh và phím tắt,
|
||||||
**Để** tôi có thể work faster.
|
**Để** tôi có thể làm việc nhanh hơn.
|
||||||
|
|
||||||
**Acceptance Criteria:**
|
**Tiêu chí chấp nhận (Acceptance Criteria):**
|
||||||
|
|
||||||
#### Quick Actions Context Menu (FR-EXT-15)
|
#### Menu ngữ cảnh Thao tác nhanh (Quick Actions Context Menu) (FR-EXT-15)
|
||||||
- [ ] Right-click on token address → Context menu
|
- [ ] Chuột phải vào địa chỉ token → Menu ngữ cảnh
|
||||||
- [ ] Menu items:
|
- [ ] Các mục Menu:
|
||||||
- "Add to Watchlist"
|
- "Add to Watchlist" (Thêm vào Watchlist)
|
||||||
- "Analyze Token"
|
- "Analyze Token" (Phân tích Token)
|
||||||
- "Check Safety"
|
- "Check Safety" (Kiểm tra an toàn)
|
||||||
- "Copy Address"
|
- "Copy Address" (Sao chép địa chỉ)
|
||||||
- "View on Explorer"
|
- "View on Explorer" (Xem trên Explorer)
|
||||||
- "View on DexScreener"
|
- "View on DexScreener" (Xem trên DexScreener)
|
||||||
- [ ] Works on any webpage (not just DexScreener)
|
- [ ] Hoạt động trên bất kỳ trang web nào (không chỉ DexScreener)
|
||||||
- [ ] Auto-detect token address format
|
- [ ] Tự động phát hiện định dạng địa chỉ token
|
||||||
|
|
||||||
#### Smart Notifications (FR-EXT-16)
|
#### Thông báo Thông minh (Smart Notifications) (FR-EXT-16)
|
||||||
- [ ] Notification priority levels:
|
- [ ] Các mức ưu tiên thông báo:
|
||||||
- High: Rug pull warnings, whale dumps
|
- Cao (High): Cảnh báo Rug pull, whale xả hàng
|
||||||
- Medium: Price alerts, volume spikes
|
- Trung bình (Medium): Cảnh báo giá, khối lượng tăng đột biến
|
||||||
- Low: General updates
|
- Thấp (Low): Các cập nhật chung
|
||||||
- [ ] Quiet hours:
|
- [ ] Giờ yên tĩnh (Quiet hours):
|
||||||
- Set sleep schedule (e.g., 11pm - 7am)
|
- Đặt lịch ngủ (ví dụ: 11pm - 7am)
|
||||||
- No notifications during quiet hours
|
- Không có thông báo trong giờ yên tĩnh
|
||||||
- Emergency alerts only (rug pulls)
|
- Chỉ cảnh báo khẩn cấp (rug pulls)
|
||||||
- [ ] Grouped notifications:
|
- [ ] Gom nhóm thông báo (Grouped notifications):
|
||||||
- Group by token
|
- Gom theo token
|
||||||
- Group by type
|
- Gom theo loại
|
||||||
- Collapse similar notifications
|
- Thu gọn các thông báo tương tự
|
||||||
- [ ] Smart batching:
|
- [ ] Gom nhóm thông minh (Smart batching):
|
||||||
- 5+ alerts → 1 summary notification
|
- 5+ cảnh báo → 1 thông báo tóm tắt
|
||||||
- "5 price alerts triggered"
|
- "5 cảnh báo giá đã được kích hoạt"
|
||||||
- Click to expand
|
- Click để mở rộng
|
||||||
- [ ] Per-token settings:
|
- [ ] Cài đặt theo từng token (Per-token settings):
|
||||||
- Enable/disable notifications
|
- Bật/tắt thông báo
|
||||||
- Set priority level
|
- Đặt mức ưu tiên
|
||||||
- Custom quiet hours
|
- Giờ yên tĩnh tùy chỉnh
|
||||||
|
|
||||||
#### Keyboard Shortcuts (FR-EXT-17)
|
#### Phím tắt Bàn phím (Keyboard Shortcuts) (FR-EXT-17)
|
||||||
- [ ] Global shortcuts:
|
- [ ] Phím tắt toàn cục (Global shortcuts):
|
||||||
- `Cmd+Shift+S` → Open side panel
|
- `Cmd+Shift+S` → Mở side panel
|
||||||
- `Cmd+Shift+H` → Hide side panel
|
- `Cmd+Shift+H` → Ẩn side panel
|
||||||
- `Cmd+Shift+N` → New chat
|
- `Cmd+Shift+N` → Chat mới
|
||||||
- [ ] Context shortcuts (when on DexScreener):
|
- [ ] Phím tắt ngữ cảnh (khi trên DexScreener):
|
||||||
- `Cmd+Shift+A` → Analyze current token
|
- `Cmd+Shift+A` → Phân tích token hiện tại
|
||||||
- `Cmd+Shift+W` → Add to watchlist
|
- `Cmd+Shift+W` → Thêm vào watchlist
|
||||||
- `Cmd+Shift+C` → Capture chart
|
- `Cmd+Shift+C` → Chụp biểu đồ
|
||||||
- `Cmd+Shift+T` → Generate thread
|
- `Cmd+Shift+T` → Tạo thread
|
||||||
- [ ] Portfolio shortcuts:
|
- [ ] Phím tắt Portfolio:
|
||||||
- `Cmd+Shift+P` → Open portfolio
|
- `Cmd+Shift+P` → Mở portfolio
|
||||||
- `Cmd+Shift+R` → Refresh portfolio
|
- `Cmd+Shift+R` → Làm mới portfolio
|
||||||
- [ ] Customizable shortcuts:
|
- [ ] Phím tắt tùy chỉnh:
|
||||||
- User can remap shortcuts
|
- User có thể remap phím tắt
|
||||||
- No conflicts with browser shortcuts
|
- Không xung đột với phím tắt trình duyệt
|
||||||
|
|
||||||
**UI Design - Settings:**
|
**UI Design - Settings:**
|
||||||
```
|
```
|
||||||
|
|
@ -330,7 +332,7 @@ async function generateThread(request: ThreadRequest): Promise<GeneratedThread>
|
||||||
└─────────────────────────────┘
|
└─────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
**Technical Implementation:**
|
**Triển khai kỹ thuật:**
|
||||||
```typescript
|
```typescript
|
||||||
// Context menu
|
// Context menu
|
||||||
chrome.contextMenus.create({
|
chrome.contextMenus.create({
|
||||||
|
|
@ -395,57 +397,57 @@ function shouldShowNotification(notification: Notification, settings: Notificati
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Technical Dependencies
|
## Các phụ thuộc kỹ thuật (Technical Dependencies)
|
||||||
|
|
||||||
### Chrome APIs
|
### Chrome APIs
|
||||||
- `chrome.contextMenus` - Context menu
|
- `chrome.contextMenus` - Context menu
|
||||||
- `chrome.commands` - Keyboard shortcuts
|
- `chrome.commands` - Phím tắt bàn phím
|
||||||
- `chrome.notifications` - Notifications
|
- `chrome.notifications` - Thông báo
|
||||||
- `chrome.alarms` - Quiet hours
|
- `chrome.alarms` - Giờ yên tĩnh
|
||||||
|
|
||||||
### External Libraries
|
### External Libraries
|
||||||
- `html2canvas` - Chart capture
|
- `html2canvas` - Chụp biểu đồ
|
||||||
- `fabric.js` - Drawing tools (optional)
|
- `fabric.js` - Công cụ vẽ (tùy chọn)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Testing Strategy
|
## Chiến lược Kiểm thử (Testing Strategy)
|
||||||
|
|
||||||
### Unit Tests
|
### Unit Tests
|
||||||
- [ ] Token address detection
|
- [ ] Logic phát hiện địa chỉ token
|
||||||
- [ ] Notification priority logic
|
- [ ] Logic ưu tiên thông báo
|
||||||
- [ ] Quiet hours calculation
|
- [ ] Tính toán giờ yên tĩnh
|
||||||
|
|
||||||
### Integration Tests
|
### Integration Tests
|
||||||
- [ ] Chart capture works
|
- [ ] Chụp biểu đồ hoạt động
|
||||||
- [ ] Thread generation works
|
- [ ] Tạo thread hoạt động
|
||||||
- [ ] Context menu appears
|
- [ ] Menu ngữ cảnh xuất hiện
|
||||||
- [ ] Shortcuts trigger actions
|
- [ ] Phím tắt kích hoạt hành động
|
||||||
|
|
||||||
### Manual Testing
|
### Manual Testing
|
||||||
- [ ] Capture chart and annotate
|
- [ ] Chụp và chú thích biểu đồ
|
||||||
- [ ] Generate thread for live token
|
- [ ] Tạo thread cho token live
|
||||||
- [ ] Test all keyboard shortcuts
|
- [ ] Test tất cả các phím tắt
|
||||||
- [ ] Verify quiet hours work
|
- [ ] Xác minh giờ yên tĩnh hoạt động
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Definition of Done
|
## Định nghĩa hoàn thành (Definition of Done)
|
||||||
|
|
||||||
- [ ] All 3 stories completed
|
- [ ] Tất cả 3 user stories hoàn thành
|
||||||
- [ ] All acceptance criteria met
|
- [ ] Tất cả tiêu chí chấp nhận được đáp ứng
|
||||||
- [ ] Unit tests passing
|
- [ ] Unit tests pass
|
||||||
- [ ] Integration tests passing
|
- [ ] Integration tests pass
|
||||||
- [ ] Manual testing completed
|
- [ ] Manual testing hoàn thành
|
||||||
- [ ] Code reviewed
|
- [ ] Code được review
|
||||||
- [ ] Documentation updated
|
- [ ] Tài liệu được cập nhật
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Notes
|
## Ghi chú
|
||||||
|
|
||||||
**Target Users:** Content creators và power users.
|
**Target Users:** Content creators và power users.
|
||||||
|
|
||||||
**Marketing Opportunity:** User-generated content (threads, charts) → Free viral marketing.
|
**Cơ hội Marketing:** User-generated content (threads, charts) → Viral marketing miễn phí.
|
||||||
|
|
||||||
**All Epics Complete!** 🎉
|
**Tất cả Epics Đã Hoàn Thành!** 🎉
|
||||||
|
|
|
||||||
|
|
@ -54,3 +54,358 @@ SurfSense Browser Extension là "tai mắt" của hệ thống, cho phép thu th
|
||||||
3. User click "Search in SurfSense".
|
3. User click "Search in SurfSense".
|
||||||
4. Request gửi về Backend để tìm kiếm các tài liệu liên quan đến đoạn text đó.
|
4. Request gửi về Backend để tìm kiếm các tài liệu liên quan đến đoạn text đó.
|
||||||
5. Kết quả hiển thị ngay trong Side Panel hoặc Popup.
|
5. Kết quả hiển thị ngay trong Side Panel hoặc Popup.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## UX Performance Considerations
|
||||||
|
|
||||||
|
This section addresses **P1 Issue #6** from the Implementation Readiness Review. It defines performance requirements, optimization strategies, and monitoring approaches to ensure the extension delivers a smooth, responsive user experience.
|
||||||
|
|
||||||
|
### Performance Goals
|
||||||
|
|
||||||
|
| Metric | Target | Critical Threshold | Measurement |
|
||||||
|
|--------|--------|-------------------|-------------|
|
||||||
|
| **Side Panel Open** | <300ms | <500ms | Time from click to panel visible |
|
||||||
|
| **Token Detection** | <1s | <2s | Time from page load to token card display |
|
||||||
|
| **AI Response Start** | <2s | <3s | Time from query submit to first token |
|
||||||
|
| **Chat Message Render** | <100ms | <200ms | Time to render new message in chat |
|
||||||
|
| **Settings Sync** | <500ms | <1s | Time to fetch and apply settings |
|
||||||
|
| **Page Capture** | <3s | <5s | Time to capture and upload page |
|
||||||
|
|
||||||
|
### 1. Side Panel Rendering Performance
|
||||||
|
|
||||||
|
**Challenge:** Side panel must open instantly without blocking the main thread.
|
||||||
|
|
||||||
|
**Optimization Strategies:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Lazy load heavy components
|
||||||
|
const ChatInterface = lazy(() => import('./ChatInterface'));
|
||||||
|
const TokenInfoCard = lazy(() => import('./TokenInfoCard'));
|
||||||
|
|
||||||
|
// 2. Virtual scrolling for chat history
|
||||||
|
import { FixedSizeList } from 'react-window';
|
||||||
|
|
||||||
|
function ChatHistory({ messages }) {
|
||||||
|
return (
|
||||||
|
<FixedSizeList
|
||||||
|
height={600}
|
||||||
|
itemCount={messages.length}
|
||||||
|
itemSize={80}
|
||||||
|
width="100%"
|
||||||
|
>
|
||||||
|
{({ index, style }) => (
|
||||||
|
<div style={style}>
|
||||||
|
<ChatMessage message={messages[index]} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FixedSizeList>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Memoize expensive computations
|
||||||
|
const TokenCard = memo(({ token }) => {
|
||||||
|
const formattedPrice = useMemo(
|
||||||
|
() => formatPrice(token.price),
|
||||||
|
[token.price]
|
||||||
|
);
|
||||||
|
|
||||||
|
return <div>{formattedPrice}</div>;
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Performance Budget:**
|
||||||
|
- Initial bundle size: <200KB (gzipped)
|
||||||
|
- Side panel open: <300ms
|
||||||
|
- Chat scroll: 60fps (16.67ms per frame)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Streaming Response Performance
|
||||||
|
|
||||||
|
**Challenge:** Display AI responses as they stream without UI jank.
|
||||||
|
|
||||||
|
**Optimization Strategies:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Debounce UI updates during streaming
|
||||||
|
function useStreamingResponse(messageId: string) {
|
||||||
|
const [content, setContent] = useState('');
|
||||||
|
const debouncedContent = useDebouncedValue(content, 50); // Update every 50ms
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const eventSource = new EventSource(`/chat/stream/${messageId}`);
|
||||||
|
|
||||||
|
eventSource.onmessage = (event) => {
|
||||||
|
const chunk = JSON.parse(event.data);
|
||||||
|
setContent(prev => prev + chunk.content);
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => eventSource.close();
|
||||||
|
}, [messageId]);
|
||||||
|
|
||||||
|
return debouncedContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Use requestAnimationFrame for smooth updates
|
||||||
|
function StreamingMessage({ content }) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let rafId: number;
|
||||||
|
|
||||||
|
const updateContent = () => {
|
||||||
|
if (ref.current) {
|
||||||
|
ref.current.textContent = content;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
rafId = requestAnimationFrame(updateContent);
|
||||||
|
return () => cancelAnimationFrame(rafId);
|
||||||
|
}, [content]);
|
||||||
|
|
||||||
|
return <div ref={ref} />;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Performance Budget:**
|
||||||
|
- Streaming latency: <50ms per chunk
|
||||||
|
- UI update frequency: 20 updates/second (50ms interval)
|
||||||
|
- Memory usage: <50MB for 100 messages
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Token Detection Performance
|
||||||
|
|
||||||
|
**Challenge:** Detect tokens on DexScreener pages without blocking page load.
|
||||||
|
|
||||||
|
**Optimization Strategies:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Use Intersection Observer for lazy detection
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
detectToken(entry.target);
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Debounce URL changes
|
||||||
|
const debouncedDetect = debounce((url: string) => {
|
||||||
|
const tokenAddress = extractTokenFromURL(url);
|
||||||
|
if (tokenAddress) {
|
||||||
|
fetchTokenData(tokenAddress);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
|
||||||
|
if (changeInfo.url) {
|
||||||
|
debouncedDetect(changeInfo.url);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Cache token data aggressively
|
||||||
|
const tokenCache = new Map<string, { data: TokenData; timestamp: number }>();
|
||||||
|
const CACHE_TTL = 30_000; // 30 seconds
|
||||||
|
|
||||||
|
async function fetchTokenData(address: string) {
|
||||||
|
const cached = tokenCache.get(address);
|
||||||
|
|
||||||
|
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
|
||||||
|
return cached.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetch(`/api/tokens/${address}`).then(r => r.json());
|
||||||
|
tokenCache.set(address, { data, timestamp: Date.now() });
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Performance Budget:**
|
||||||
|
- Token detection: <1s from page load
|
||||||
|
- API call: <500ms (with retry)
|
||||||
|
- Cache hit rate: >80%
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Offline Mode & Resilience
|
||||||
|
|
||||||
|
**Challenge:** Extension must work gracefully when backend is unavailable.
|
||||||
|
|
||||||
|
**Optimization Strategies:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Service Worker caching for static assets
|
||||||
|
self.addEventListener('install', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open('surfsense-v1').then((cache) => {
|
||||||
|
return cache.addAll([
|
||||||
|
'/sidepanel.html',
|
||||||
|
'/sidepanel.js',
|
||||||
|
'/styles.css',
|
||||||
|
]);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. IndexedDB for offline chat history
|
||||||
|
import { openDB } from 'idb';
|
||||||
|
|
||||||
|
const db = await openDB('surfsense-chat', 1, {
|
||||||
|
upgrade(db) {
|
||||||
|
db.createObjectStore('messages', { keyPath: 'id' });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function saveChatMessage(message: ChatMessage) {
|
||||||
|
await db.put('messages', message);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getChatHistory() {
|
||||||
|
return await db.getAll('messages');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Optimistic UI updates
|
||||||
|
function sendMessage(content: string) {
|
||||||
|
const optimisticMessage = {
|
||||||
|
id: generateId(),
|
||||||
|
content,
|
||||||
|
status: 'sending',
|
||||||
|
timestamp: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show immediately
|
||||||
|
addMessageToUI(optimisticMessage);
|
||||||
|
|
||||||
|
// Send to backend
|
||||||
|
fetch('/api/chat/messages', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ content }),
|
||||||
|
})
|
||||||
|
.then(() => updateMessageStatus(optimisticMessage.id, 'sent'))
|
||||||
|
.catch(() => updateMessageStatus(optimisticMessage.id, 'failed'));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Performance Budget:**
|
||||||
|
- Offline mode activation: <100ms
|
||||||
|
- IndexedDB read: <50ms
|
||||||
|
- Cache hit rate: >90% for static assets
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Memory Management
|
||||||
|
|
||||||
|
**Challenge:** Extension must not leak memory during long browsing sessions.
|
||||||
|
|
||||||
|
**Optimization Strategies:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Cleanup event listeners
|
||||||
|
useEffect(() => {
|
||||||
|
const handleMessage = (message: Message) => {
|
||||||
|
// Handle message
|
||||||
|
};
|
||||||
|
|
||||||
|
chrome.runtime.onMessage.addListener(handleMessage);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
chrome.runtime.onMessage.removeListener(handleMessage);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 2. Limit chat history in memory
|
||||||
|
const MAX_MESSAGES_IN_MEMORY = 100;
|
||||||
|
|
||||||
|
function addMessage(message: ChatMessage) {
|
||||||
|
setMessages(prev => {
|
||||||
|
const updated = [...prev, message];
|
||||||
|
|
||||||
|
// Keep only last 100 messages in memory
|
||||||
|
if (updated.length > MAX_MESSAGES_IN_MEMORY) {
|
||||||
|
return updated.slice(-MAX_MESSAGES_IN_MEMORY);
|
||||||
|
}
|
||||||
|
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Clear caches periodically
|
||||||
|
setInterval(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
for (const [key, value] of tokenCache.entries()) {
|
||||||
|
if (now - value.timestamp > CACHE_TTL) {
|
||||||
|
tokenCache.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 60_000); // Clean every minute
|
||||||
|
```
|
||||||
|
|
||||||
|
**Performance Budget:**
|
||||||
|
- Memory usage: <100MB after 1 hour
|
||||||
|
- Memory growth: <10MB per hour
|
||||||
|
- Cache size: <5MB
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. Performance Monitoring
|
||||||
|
|
||||||
|
**Implementation:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 1. Performance marks for key operations
|
||||||
|
performance.mark('sidepanel-open-start');
|
||||||
|
// ... open side panel
|
||||||
|
performance.mark('sidepanel-open-end');
|
||||||
|
|
||||||
|
performance.measure(
|
||||||
|
'sidepanel-open',
|
||||||
|
'sidepanel-open-start',
|
||||||
|
'sidepanel-open-end'
|
||||||
|
);
|
||||||
|
|
||||||
|
// 2. Send metrics to backend
|
||||||
|
const metrics = performance.getEntriesByType('measure');
|
||||||
|
|
||||||
|
fetch('/api/metrics', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
metrics: metrics.map(m => ({
|
||||||
|
name: m.name,
|
||||||
|
duration: m.duration,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
})),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Real User Monitoring (RUM)
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const perfData = performance.getEntriesByType('navigation')[0];
|
||||||
|
|
||||||
|
console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart);
|
||||||
|
console.log('DOM Content Loaded:', perfData.domContentLoadedEventEnd - perfData.fetchStart);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Monitoring Dashboards:**
|
||||||
|
- Track P95/P99 latencies for all critical operations
|
||||||
|
- Alert if any metric exceeds critical threshold
|
||||||
|
- Weekly performance review with team
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Definition of Done (Performance)
|
||||||
|
|
||||||
|
- [ ] All performance targets met in production
|
||||||
|
- [ ] Performance monitoring implemented
|
||||||
|
- [ ] Offline mode tested and working
|
||||||
|
- [ ] Memory leaks tested (24-hour stress test)
|
||||||
|
- [ ] Bundle size optimized (<200KB gzipped)
|
||||||
|
- [ ] Virtual scrolling for chat history
|
||||||
|
- [ ] Lazy loading for heavy components
|
||||||
|
- [ ] Cache hit rate >80% for token data
|
||||||
|
- [ ] Performance regression tests in CI/CD
|
||||||
|
|
|
||||||
317
_bmad-output/planning-artifacts/ux-design-directions.html
Normal file
317
_bmad-output/planning-artifacts/ux-design-directions.html
Normal file
|
|
@ -0,0 +1,317 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>SurfSense v2 - Design Directions</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// Shared Core
|
||||||
|
background: '#0B1221', // Deep Navy/Dark Gray compromise
|
||||||
|
foreground: '#ffffff',
|
||||||
|
card: '#111827', // Gray 900
|
||||||
|
border: '#1f2937', // Gray 800
|
||||||
|
|
||||||
|
// Option A: Safe Pro (Muted)
|
||||||
|
'safe-success': '#10b981', // Emerald 500
|
||||||
|
'safe-danger': '#ef4444', // Red 500
|
||||||
|
|
||||||
|
// Option B: Cyber (Neon)
|
||||||
|
'cyber-success': '#00ff9d',
|
||||||
|
'cyber-danger': '#ff003c',
|
||||||
|
'cyber-bg': '#000000',
|
||||||
|
|
||||||
|
// Option C: Hybrid (Traffic Light)
|
||||||
|
'hybrid-success': '#22c55e', // Green 500
|
||||||
|
'hybrid-danger': '#f43f5e', // Rose 500
|
||||||
|
'hybrid-warning': '#f59e0b', // Amber 500
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Geist Sans', 'Inter', 'sans-serif'],
|
||||||
|
mono: ['Geist Mono', 'JetBrains Mono', 'monospace'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
|
||||||
|
|
||||||
|
/* Glow Effects for Cyber Mode */
|
||||||
|
.cyber-glow-text { text-shadow: 0 0 10px currentColor; }
|
||||||
|
.cyber-border { box-shadow: 0 0 5px rgba(0, 255, 157, 0.2); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-900 text-white font-sans overflow-hidden h-screen flex flex-col">
|
||||||
|
|
||||||
|
<!-- Control Panel -->
|
||||||
|
<div class="bg-gray-800 border-b border-gray-700 p-4 flex items-center justify-between z-50">
|
||||||
|
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">
|
||||||
|
SurfSense v2 <span class="text-gray-400 text-sm font-normal">Design Directions</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="flex gap-2 bg-gray-900 p-1 rounded-lg border border-gray-700">
|
||||||
|
<button onclick="switchMode('A')" id="btn-A" class="px-4 py-2 rounded text-sm font-medium transition-colors hover:bg-gray-700 text-gray-400">
|
||||||
|
Option A: Safe Pro
|
||||||
|
</button>
|
||||||
|
<button onclick="switchMode('B')" id="btn-B" class="px-4 py-2 rounded text-sm font-medium transition-colors hover:bg-gray-700 text-gray-400">
|
||||||
|
Option B: Cyber Terminal
|
||||||
|
</button>
|
||||||
|
<button onclick="switchMode('C')" id="btn-C" class="px-4 py-2 rounded text-sm font-medium bg-blue-600 text-white shadow-lg">
|
||||||
|
Option C: Hybrid (Rec)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-sm text-gray-400">
|
||||||
|
Click options to toggle visuals
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Container -->
|
||||||
|
<div id="mockup-container" class="flex-1 flex overflow-hidden bg-[#0B1221] transition-colors duration-500 relative">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<div id="sidebar" class="w-64 border-r border-[#1f2937] flex flex-col p-4 gap-2 transition-all duration-300">
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="flex items-center gap-3 mb-6 px-2">
|
||||||
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-lg">S</div>
|
||||||
|
<span class="font-bold text-lg tracking-tight">SurfSense</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Items -->
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div class="p-2 rounded bg-blue-500/10 text-blue-400 font-medium flex items-center gap-3">
|
||||||
|
<span>📊</span> Market Intel
|
||||||
|
</div>
|
||||||
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||||||
|
<span>💼</span> Portfolio
|
||||||
|
</div>
|
||||||
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||||||
|
<span>🔔</span> Smart Alerts
|
||||||
|
</div>
|
||||||
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||||||
|
<span>🤖</span> AI Chat
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-auto p-4 rounded bg-gray-800/50 border border-gray-700/50">
|
||||||
|
<div class="text-xs text-gray-400 uppercase font-bold mb-2">Extension Status</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm text-green-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||||||
|
Active & Syncing
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CONTENT AREA -->
|
||||||
|
<div class="flex-1 flex flex-col min-w-0">
|
||||||
|
<!-- Header -->
|
||||||
|
<div id="header" class="h-16 border-b border-[#1f2937] flex items-center justify-between px-6 bg-[#0B1221]/50 backdrop-blur">
|
||||||
|
<div class="flex items-center gap-4 text-sm text-gray-400">
|
||||||
|
<span>Market Intelligence</span>
|
||||||
|
<span>/</span>
|
||||||
|
<span class="text-white">Whale Watch</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<input type="text" placeholder="Search tokens (Cmd+K)..." class="bg-gray-900 border border-gray-700 rounded-md px-3 py-1.5 text-sm w-64 focus:outline-none focus:border-blue-500 transition-colors">
|
||||||
|
<button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center">🔔</button>
|
||||||
|
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dashboard Content -->
|
||||||
|
<div class="flex-1 overflow-auto p-6 space-y-6">
|
||||||
|
|
||||||
|
<!-- Stats Row -->
|
||||||
|
<div class="grid grid-cols-4 gap-4">
|
||||||
|
<div id="card-1" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||||||
|
<div class="text-gray-400 text-sm mb-1">Total Signals</div>
|
||||||
|
<div class="text-2xl font-bold">1,204</div>
|
||||||
|
<div class="text-green-500 text-xs mt-2 flex items-center gap-1">
|
||||||
|
<span>↑ 12%</span> <span class="text-gray-500">vs yesterday</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="card-2" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||||||
|
<div class="text-gray-400 text-sm mb-1">High Risk Detected</div>
|
||||||
|
<div class="text-2xl font-bold text-red-500">23</div>
|
||||||
|
<div class="text-red-500/80 text-xs mt-2">Critical Awareness</div>
|
||||||
|
</div>
|
||||||
|
<div id="card-3" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||||||
|
<div class="text-gray-400 text-sm mb-1">Whale Inflow</div>
|
||||||
|
<div class="text-2xl font-bold text-blue-400">$34.2M</div>
|
||||||
|
<div class="text-gray-500 text-xs mt-2">Last 24h</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI INSIGHT WIDGET -->
|
||||||
|
<div id="ai-card" class="p-4 rounded-xl border border-blue-900/30 bg-blue-900/10 shadow-sm relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 w-1 h-full bg-blue-500"></div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<span class="text-xl">🤖</span>
|
||||||
|
<div>
|
||||||
|
<div class="text-blue-300 font-bold text-sm mb-1">AI Insight</div>
|
||||||
|
<div class="text-xs text-blue-200/80 leading-relaxed">
|
||||||
|
"ETH whale accumulation detected in L2 sector. <span class="underline decoration-dotted cursor-pointer hover:text-white">ARB</span> and <span class="underline decoration-dotted cursor-pointer hover:text-white">OP</span> showing divergent strength."
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Table -->
|
||||||
|
<div id="main-table" class="rounded-xl border border-gray-800 bg-[#111827] overflow-hidden">
|
||||||
|
<div class="p-4 border-b border-gray-800 flex justify-between items-center">
|
||||||
|
<h3 class="font-bold">Live Market Opportunities</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1 rounded text-xs border border-gray-700 hover:bg-gray-800 transition-colors">Filter</button>
|
||||||
|
<button class="px-3 py-1 rounded text-xs border border-gray-700 hover:bg-gray-800 transition-colors">Export</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="w-full text-left text-sm">
|
||||||
|
<thead class="bg-gray-900/50 text-gray-400 border-b border-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th class="p-4 font-medium">Token</th>
|
||||||
|
<th class="p-4 font-medium">Price</th>
|
||||||
|
<th class="p-4 font-medium">Risk Score</th>
|
||||||
|
<th class="p-4 font-medium">Whale Activity</th>
|
||||||
|
<th class="p-4 font-medium text-right">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="table-body" class="divide-y divide-gray-800">
|
||||||
|
<!-- Rows injected by JS -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const mockupContainer = document.getElementById('mockup-container');
|
||||||
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
const cards = document.querySelectorAll('[id^="card-"]');
|
||||||
|
const mainTable = document.getElementById('main-table');
|
||||||
|
const tableBody = document.getElementById('table-body');
|
||||||
|
|
||||||
|
const styleConfigs = {
|
||||||
|
'A': {
|
||||||
|
name: 'Safe Pro',
|
||||||
|
classes: {
|
||||||
|
bg: 'bg-[#0f172a]', // Slate 900
|
||||||
|
sidebarBorder: 'border-slate-800',
|
||||||
|
cardBorder: 'border-slate-700',
|
||||||
|
cardBg: 'bg-slate-800',
|
||||||
|
text: 'text-slate-200',
|
||||||
|
tableRow: 'hover:bg-slate-700/50 transition-colors',
|
||||||
|
},
|
||||||
|
rowData: [
|
||||||
|
{ name: 'PEPE', price: '$0.000012', risk: 'Low', riskColor: 'text-emerald-400 bg-emerald-400/10', whale: 'Normal', id: 1 },
|
||||||
|
{ name: 'TRUMP', price: '$4.32', risk: 'Medium', riskColor: 'text-yellow-400 bg-yellow-400/10', whale: 'High', id: 2 },
|
||||||
|
{ name: 'SCAM', price: '$0.12', risk: 'Device Scan Failed', riskColor: 'text-red-400 bg-red-400/10', whale: 'Dumping', id: 3 },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'B': {
|
||||||
|
name: 'Cyber Terminal',
|
||||||
|
classes: {
|
||||||
|
bg: 'bg-black',
|
||||||
|
sidebarBorder: 'border-green-900/30',
|
||||||
|
cardBorder: 'border-green-800/50',
|
||||||
|
cardBg: 'bg-black/80',
|
||||||
|
text: 'text-green-50 font-mono',
|
||||||
|
tableRow: 'hover:bg-green-900/20 text-xs font-mono border-green-900/30',
|
||||||
|
},
|
||||||
|
rowData: [
|
||||||
|
{ name: 'PEPE', price: '$0.000012', risk: '[SAFE]', riskColor: 'text-[#00ff9d] drop-shadow-[0_0_5px_rgba(0,255,157,0.5)]', whale: '>> ACCUMULATING', id: 1 },
|
||||||
|
{ name: 'TRUMP', price: '$4.32', risk: '[WARN]', riskColor: 'text-yellow-400', whale: '>> SPIKE DETECTED', id: 2 },
|
||||||
|
{ name: 'SCAM', price: '$0.12', risk: '[CRITICAL]', riskColor: 'text-[#ff003c] drop-shadow-[0_0_5px_rgba(255,0,60,0.5)]', whale: '!! DUMPING !!', id: 3 },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'C': { // Hybrid
|
||||||
|
name: 'Hybrid',
|
||||||
|
classes: {
|
||||||
|
bg: 'bg-[#0B1221]',
|
||||||
|
sidebarBorder: 'border-gray-800',
|
||||||
|
cardBorder: 'border-gray-800',
|
||||||
|
cardBg: 'bg-[#111827]',
|
||||||
|
text: 'text-white',
|
||||||
|
tableRow: 'hover:bg-gray-800/50 transition-colors font-sans',
|
||||||
|
},
|
||||||
|
rowData: [
|
||||||
|
{ name: 'PEPE', price: '$0.000012', risk: 'Safe', riskColor: 'text-green-500 font-bold', whale: 'Accumulating', id: 1 },
|
||||||
|
{ name: 'TRUMP', price: '$4.32', risk: 'Review', riskColor: 'text-amber-500 font-bold', whale: 'High Vol', id: 2 },
|
||||||
|
{ name: 'SCAM', price: '$0.12', risk: 'Danger', riskColor: 'text-rose-500 font-bold', whale: 'Dump Warning', id: 3 },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderRows(configType) {
|
||||||
|
const config = styleConfigs[configType];
|
||||||
|
tableBody.innerHTML = config.rowData.map(row => `
|
||||||
|
<tr class="${config.classes.tableRow}">
|
||||||
|
<td class="p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs">IMG</div>
|
||||||
|
<span class="font-bold">${row.name}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 tabular-nums text-gray-300 font-mono">${row.price}</td>
|
||||||
|
<td class="p-4">
|
||||||
|
<span class="px-2 py-1 rounded text-xs ${row.riskColor} border border-current/20">
|
||||||
|
${row.risk}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-gray-400 text-xs">${row.whale}</td>
|
||||||
|
<td class="p-4 text-right">
|
||||||
|
<button class="bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white px-3 py-1 rounded text-xs transition-all border border-blue-500/30">
|
||||||
|
Analyze
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchMode(mode) {
|
||||||
|
// Update Buttons
|
||||||
|
['A', 'B', 'C'].forEach(m => {
|
||||||
|
const btn = document.getElementById(`btn-${m}`);
|
||||||
|
if (m === mode) {
|
||||||
|
btn.classList.remove('bg-gray-900', 'text-gray-400');
|
||||||
|
btn.classList.add('bg-blue-600', 'text-white', 'shadow-lg');
|
||||||
|
} else {
|
||||||
|
btn.classList.add('bg-gray-900', 'text-gray-400');
|
||||||
|
btn.classList.remove('bg-blue-600', 'text-white', 'shadow-lg');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = styleConfigs[mode];
|
||||||
|
|
||||||
|
// Update Global Containers
|
||||||
|
mockupContainer.className = `flex-1 flex overflow-hidden ${config.classes.bg} transition-colors duration-500 relative`;
|
||||||
|
sidebar.className = `w-64 border-r ${config.classes.sidebarBorder} flex flex-col p-4 gap-2 transition-all duration-300`;
|
||||||
|
|
||||||
|
// Update Cards
|
||||||
|
cards.forEach(card => {
|
||||||
|
card.className = `p-4 rounded-xl border ${config.classes.cardBorder} ${config.classes.cardBg} shadow-sm`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update Table Container
|
||||||
|
mainTable.className = `rounded-xl border ${config.classes.cardBorder} ${config.classes.cardBg} overflow-hidden`;
|
||||||
|
|
||||||
|
// Render Table Rows
|
||||||
|
renderRows(mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init
|
||||||
|
switchMode('C');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
_bmad-output/planning-artifacts/ux-design-specification.md
Normal file
142
_bmad-output/planning-artifacts/ux-design-specification.md
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
---
|
||||||
|
stepsCompleted:
|
||||||
|
- 1
|
||||||
|
- 2
|
||||||
|
- 3
|
||||||
|
- 4
|
||||||
|
- 5
|
||||||
|
- 6
|
||||||
|
- 7
|
||||||
|
- 8
|
||||||
|
inputDocuments:
|
||||||
|
- _bmad-output/planning-artifacts/prd.md
|
||||||
|
- _bmad-epics/epic-1-ai-powered-crypto-assistant.md
|
||||||
|
- _bmad-epics/epic-2-smart-monitoring-alerts.md
|
||||||
|
- _bmad-epics/epic-3-trading-intelligence.md
|
||||||
|
- _bmad-epics/epic-4-content-creation-productivity.md
|
||||||
|
---
|
||||||
|
|
||||||
|
# UX Design Specification SurfSense
|
||||||
|
|
||||||
|
**Author:** Luis
|
||||||
|
**Date:** 2026-02-02
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- UX design content will be appended sequentially through collaborative workflow steps -->
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
### Project Vision
|
||||||
|
SurfSense 2.0 transforms from a general-purpose tool into a **specialized AI Co-pilot for Crypto Traders**. The core value proposition shifts from passive data aggregation to **proactive intelligence**—providing "Smart Monitoring," "Trading Intelligence," and "Content Creation" tools that work seamlessly alongside the trader's workflow.
|
||||||
|
|
||||||
|
### Target Users
|
||||||
|
* **Momentum Traders:** Need real-time, "hot" information (Whale alerts, Volume spikes) to catch rapid price movements. They prioritize speed and accessibility (Extension).
|
||||||
|
* **Cautious Investors:** Prioritize safety and due diligence. They need tools to verify contracts, detect rug pulls, and analyze long-term metrics.
|
||||||
|
* **Content Creators:** Use the platform to generate insights and share them (charts, threads) to build their audience.
|
||||||
|
|
||||||
|
### Key Design Challenges (Web-First)
|
||||||
|
* **Data Density vs. Clarity:** The new features (Portfolio, Market Intelligence) introduce complex data (charts, tables, metrics) that must be displayed without overwhelming the user, distinguishing this from the chat-heavy v1.
|
||||||
|
* **Navigation Scalability:** The current chat-centric sidebar is insufficient for a multi-module application. We must integrate new functional areas (Market, Portfolio, Alerts) without burying them or cluttering the interface.
|
||||||
|
* **Hybrid Workflow:** Users will constantly switch between "Deep Dive" analysis on the Web Dashboard and "Quick Checks" via the Extension. The experience must be consistent and synchronized.
|
||||||
|
|
||||||
|
### Design Opportunities
|
||||||
|
* **Hybrid Interface Structure:** Transitioning the Web Dashboard from a purely "Chat UI" to a **"Hybrid Interface"** that balances **App Modules** (for data/tools) with the **AI Assistant** (for query/support). This allows distinct spaces for "doing" (Trading/Monitoring) and "asking" (Chat).
|
||||||
|
* **Unified Design System:** Leveraging the existing Web Design System (Tailwind/Shadcn) to rapidly build the Extension UI, ensuring a consistent look and feel while reducing development effort ($18K constraint).
|
||||||
|
|
||||||
|
## Core User Experience
|
||||||
|
|
||||||
|
### Defining Experience: "The Intel Layer"
|
||||||
|
SurfSense is not where users go to *see* price (they use DexScreener for that), but where they go to *see* **The Truth**. The defining interaction is an **"Instant Reality Check"**: while the chart shows hype (FOMO), SurfSense overlays the cold, hard data (Risk/Whale movement), allowing users to verify a trade in seconds. It acts as the "Verify" step in the "Detect → Verify → Act" loop.
|
||||||
|
|
||||||
|
### User Mental Model
|
||||||
|
* **The Old Way:** See price spike → Check Twitter (hype) → Search Contract (manual) → Check Holders → Panic/FOMO → Buy blindly.
|
||||||
|
* **The SurfSense Way:** See price spike → **Glance at Extension (Traffic Light)**:
|
||||||
|
* 🔴 **Red:** Ignore immediately (Rug/Honeypot). Time saved: 10 mins.
|
||||||
|
* 🟢 **Green:** Trade with confidence.
|
||||||
|
* 🟡 **Yellow:** "Investigate" → One click to open Web Dashboard for deep reasoning (Whale behavior, Fresh wallet movement).
|
||||||
|
|
||||||
|
### Platform Strategy
|
||||||
|
* **Web Dashboard (Master):** The "Command Center" for Portfolio, Alert Management, and Deep Intelligence Analysis. Focuses on **textual/numerical insights** over graphical charts.
|
||||||
|
* **Extension (Satellite):** The "Tactical" tool for instant context. Smartly advises the user based on their current active tab using the **"Symbiotic Side-Panel"** pattern (lives alongside the chart, doesn't block it).
|
||||||
|
|
||||||
|
### Experience Mechanics
|
||||||
|
1. **Initiation:** User navigates to a token on DexScreener/Twitter.
|
||||||
|
2. **Interaction:** Extension Badge updates color (Red/Green). User clicks for Summary Overlay.
|
||||||
|
3. **Cross-Over:** User clicks "Open Dashboard" for deep dive (if needed). Web App opens to the exact token context.
|
||||||
|
4. **Completion:** User executes trade on DexScreener (or bot) with full confidence.
|
||||||
|
|
||||||
|
### Success Criteria
|
||||||
|
* **Time-to-Truth < 5s:** User determines safety (SCAM vs LEGIT) within 5 seconds of landing on a chart.
|
||||||
|
* **"Savior" Frequency:** User experiences a "saved me from a rug" moment at least once per week.
|
||||||
|
* **Zero-Context Switching:** User never manually copies a contract address; the system auto-detects context.
|
||||||
|
|
||||||
|
### Novel UX Patterns
|
||||||
|
* **"Evidence-First" AI:** Insights are always coupled with proof (e.g., "Bullish *because* 3 whales bought" with links to txns), avoiding "Black Box" trust issues.
|
||||||
|
* **Traffic Light Risk Coding:** Universal color cues (Green=Safe, Yellow=Caution, Red=Danger) for Risk Scores allow scanning in < 1 second.
|
||||||
|
|
||||||
|
## Desired Emotional Response
|
||||||
|
|
||||||
|
### Primary Emotional Goals
|
||||||
|
* **Confidence (Tự tin):** Users feel they possess "Insider Intelligence" that others missing by relying solely on charts. The AI provides the "Why" behind the price action.
|
||||||
|
* **Calm (Bình tĩnh):** In a chaotic market (FOMO, rapid candles), SurfSense acts as a stabilizing anchor, providing "Cold Hard Data" (Risk Scores, On-chain metrics) to rationalize decision-making.
|
||||||
|
* **Clarity (Sự rõ ràng):** Cutting through the noise of social media and complex charts to show the simple truth about a token's safety and potential.
|
||||||
|
|
||||||
|
### Emotional Journey Mapping
|
||||||
|
* **Trigger (Alert):** **Urgency & Curiosity.** "Whale Accumulating" alert sparks immediate interest but balanced with a need to know *why*.
|
||||||
|
* **Action (Verify):** **Reassurance.** Opening the dashboard confirms safety (Verified Contract) and validates the trend (AI Sentiment). Confusion turns into clarity.
|
||||||
|
* **Result (Decision):** **Superiority & Relief.** User feels smarter than the herd ("I avoided a rug pull" or "I caught a trend early").
|
||||||
|
|
||||||
|
## UX Pattern Analysis & Inspiration
|
||||||
|
|
||||||
|
### Inspiring Products Analysis
|
||||||
|
* **DexScreener (Crypto):** Excellent **Data Density**. They maximize screen real estate to show price, txns, and liquidity simultaneously without clutter. *Inspiration: High-density layouts using color coding (Green/Red) to direct attention.*
|
||||||
|
* **GMGN.ai (Crypto):** Strong **Risk Visualization**. They surface hidden risks (dev dumping, high holder concentration) prominently. *Inspiration: "Warning Badges" and "Risk Clusters" that are impossible to ignore.*
|
||||||
|
* **Perplexity AI (Non-Crypto):** Mastering **Trust & Citations**. Every AI claim is backed by a source link. *Inspiration: SurfSense AI insights should link back to source data (e.g., "Whale bought" -> Link to Txn).*
|
||||||
|
* **Linear (Productivity):** **Keyboard-First Navigation** and speed. *Inspiration: Power user shortcuts (Cmd+K) for quick search and navigation between modules.*
|
||||||
|
|
||||||
|
### Key Takeaways
|
||||||
|
* **Terminal-Style Efficiency:** Use a dense, tabular view for the "Market Intelligence" module (Web Dashboard) to allow sorting/filtering of 50+ tokens instantly.
|
||||||
|
* **No Chart, Just Intel:** Don't replicate DexScreener. Provide the "Why" (Insights) behind the "What" (Price).
|
||||||
|
|
||||||
|
## Design System Foundation
|
||||||
|
|
||||||
|
### 1.1 Design System Choice
|
||||||
|
**Shadcn/UI + Tailwind CSS** (Confirmed Existing Stack).
|
||||||
|
|
||||||
|
### Rationale for Selection
|
||||||
|
* **Consistency:** The existing `surfsense_web` frontend already utilizes Tailwind CSS (v4) and Shadcn/UI components (Radix primitives). Maintaining this stack ensures zero friction between the current codebase and new v2 features.
|
||||||
|
* **Inheritance:** The Extension (Slave) will directly inherit color tokens and typography from the Web Dashboard's `tailwind.config.js`, ensuring a unified brand experience with minimal effort.
|
||||||
|
|
||||||
|
### Implementation Approach
|
||||||
|
* **Web-First Truth:** The Web Dashboard remains the "Master" for design tokens and component definitions.
|
||||||
|
* **Dark Mode Native:** The system is already optimized for Dark Mode, which aligns perfectly with the crypto trading persona.
|
||||||
|
* **Customization:** Extend default Shadcn theme with "Signal Colors" (Neon Green, Alert Red) for financial data visualization.
|
||||||
|
|
||||||
|
## Visual Design Foundation
|
||||||
|
|
||||||
|
### Color System
|
||||||
|
* **Core Palette (Inherited):** Maintain established `globals.css` structure (OKLCH variables) for 100% implementation speed.
|
||||||
|
* Background: `oklch(0.145 0 0)` (Dark Gray) for enterprise-grade stability.
|
||||||
|
* Foreground: `oklch(0.985 0 0)` (White).
|
||||||
|
* **Signal Colors (New):** High-saturation "Neon" variants for "Traffic Light" indicators in Dark Mode.
|
||||||
|
* 🟢 **Success:** `oklch(0.6 0.18 145)` (Neon Green) - Use for "Safe", "Verified", "Buy Signal".
|
||||||
|
* 🔴 **Danger:** `oklch(0.6 0.2 25)` (Neon Red) - Use for "Scam", "Rug Risk", "Sell Signal".
|
||||||
|
* 🟡 **Warning:** `oklch(0.8 0.15 85)` (Amber) - Use for "Caution", "Low Liquidity".
|
||||||
|
|
||||||
|
### Typography System
|
||||||
|
* **Primary Font:** **Geist Sans** (Inherited).
|
||||||
|
* *Rationale:* Optimized for Vercel/Next.js stack, zero layout shift, and includes excellent **tabular figures** for price data.
|
||||||
|
* *Usage:* All UI text, headers, and especially data tables.
|
||||||
|
* **Tone:** Professional, direct, data-first. No decorative serifs.
|
||||||
|
|
||||||
|
### Spacing & Layout Foundation
|
||||||
|
* **Base Unit:** `0.25rem` (4px). Standard Tailwind grid.
|
||||||
|
* **Radius:** `0.625rem` (Default) for cards/inputs to match existing Web UI.
|
||||||
|
* **Density Strategy:**
|
||||||
|
* **Extension:** "Standard" density for touch/click friendliness.
|
||||||
|
* **Market Intelligence (Web):** "Compact" density to maximize rows per screen (Terminal feel).
|
||||||
|
|
||||||
|
### Accessibility Considerations
|
||||||
|
* **High Contrast Signals:** Prioritize distinctive colors for status indicators (Red/Green) but ensure they are accompanied by text/icon labels (not color-only) to support color-blind users.
|
||||||
|
* **Dark Mode Optimization:** Ensure text contrast remains high (AA standard) against the dark gray background.
|
||||||
565
_bmad-output/strategy/business_model_analysis.md
Normal file
565
_bmad-output/strategy/business_model_analysis.md
Normal file
|
|
@ -0,0 +1,565 @@
|
||||||
|
# Business Model Analysis - SurfSense Crypto Co-Pilot
|
||||||
|
|
||||||
|
**Date:** February 1, 2026
|
||||||
|
**Analysis Type:** Innovation Strategy - Step 3
|
||||||
|
**Focus:** Revenue Model, Cost Structure, Unit Economics, Defensibility
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💰 REVENUE MODEL DESIGN
|
||||||
|
|
||||||
|
### Freemium SaaS Model (Recommended)
|
||||||
|
|
||||||
|
**Tier Structure:**
|
||||||
|
|
||||||
|
#### **FREE TIER** (Lead Generation)
|
||||||
|
**Target:** Casual traders, tire-kickers
|
||||||
|
**Features:**
|
||||||
|
- Basic token monitoring (5 tokens max)
|
||||||
|
- Historical price charts (7 days)
|
||||||
|
- Community alerts (delayed 15 min)
|
||||||
|
- Basic AI queries (10/day limit)
|
||||||
|
|
||||||
|
**Purpose:**
|
||||||
|
- User acquisition (low CAC)
|
||||||
|
- Product validation
|
||||||
|
- Conversion funnel top
|
||||||
|
- Viral growth potential
|
||||||
|
|
||||||
|
**Conversion Target:** 2-5% to paid tiers
|
||||||
|
- Industry benchmark: 2-5% (general SaaS)
|
||||||
|
- Crypto tools: likely higher (3-7%) due to high intent
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **PRO TIER** ($49/month or $470/year)
|
||||||
|
**Target:** Active traders (primary revenue driver)
|
||||||
|
**Features:**
|
||||||
|
- Unlimited token monitoring
|
||||||
|
- Real-time alerts (instant)
|
||||||
|
- AI-powered pattern recognition
|
||||||
|
- Smart alerts (ML-based)
|
||||||
|
- Historical data (30 days)
|
||||||
|
- Portfolio tracking
|
||||||
|
- Natural language queries (unlimited)
|
||||||
|
- Email/Telegram notifications
|
||||||
|
|
||||||
|
**Value Proposition:**
|
||||||
|
- "AI co-pilot pays for itself with ONE good trade"
|
||||||
|
- Time savings: 10+ hours/week research
|
||||||
|
- Risk reduction: Rug pull detection
|
||||||
|
- Opportunity discovery: Whale tracking
|
||||||
|
|
||||||
|
**Pricing Rationale:**
|
||||||
|
- Below DexTools Standard ($100/month)
|
||||||
|
- Above "free" (perceived value)
|
||||||
|
- Affordable for serious traders
|
||||||
|
- Annual discount (20%) encourages commitment
|
||||||
|
|
||||||
|
**Expected ARPU:** $50-60/month (including annual subscribers)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **PREMIUM TIER** ($199/month or $1,990/year)
|
||||||
|
**Target:** Professional traders, power users
|
||||||
|
**Features:**
|
||||||
|
- Everything in Pro
|
||||||
|
- Advanced AI predictions (price targets, trend forecasting)
|
||||||
|
- Custom alert rules (complex conditions)
|
||||||
|
- API access (programmatic integration)
|
||||||
|
- Historical data (unlimited)
|
||||||
|
- Priority support
|
||||||
|
- Multi-portfolio tracking
|
||||||
|
- Advanced analytics dashboard
|
||||||
|
- Whale wallet tracking
|
||||||
|
- Arbitrage opportunity detection
|
||||||
|
|
||||||
|
**Value Proposition:**
|
||||||
|
- "Professional intelligence for professional traders"
|
||||||
|
- Competitive edge through AI predictions
|
||||||
|
- Automation via API
|
||||||
|
- Institutional-grade analytics
|
||||||
|
|
||||||
|
**Pricing Rationale:**
|
||||||
|
- Competitive with DexTools Premium (token-gated)
|
||||||
|
- Targets top 10% of users (high LTV)
|
||||||
|
- Justifiable for traders with $50K+ portfolios
|
||||||
|
|
||||||
|
**Expected ARPU:** $180-220/month (including annual subscribers)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Revenue Projections
|
||||||
|
|
||||||
|
#### **Year 1 (Accelerated Launch)**
|
||||||
|
- **Week 1:** **Launch Beta** (Free/Pro) - "Smart Assistant" MVP.
|
||||||
|
- **Month 1:** First 10 paying users (Organic).
|
||||||
|
- **Month 3:** 100 paying users.
|
||||||
|
- **Year End Target:** 500-1,000 paying users.
|
||||||
|
- **Projected ARR:** $60K-300K (Valid).
|
||||||
|
|
||||||
|
**Mix:**
|
||||||
|
- Pro (80%): $4K-20K MRR
|
||||||
|
- Premium (20%): $1K-5K MRR
|
||||||
|
|
||||||
|
#### **Year 2 (Moderate)**
|
||||||
|
- Free users: 10,000-25,000
|
||||||
|
- Pro users: 800-4,000
|
||||||
|
- Premium users: 200-1,000
|
||||||
|
- **MRR:** $50K-250K
|
||||||
|
- **ARR:** $600K-3M
|
||||||
|
|
||||||
|
**Mix:**
|
||||||
|
- Pro (75%): $37.5K-187.5K MRR
|
||||||
|
- Premium (25%): $12.5K-62.5K MRR
|
||||||
|
|
||||||
|
#### **Year 3+ (Aggressive)**
|
||||||
|
- Free users: 50,000-100,000
|
||||||
|
- Pro users: 8,000-15,000
|
||||||
|
- Premium users: 2,000-5,000
|
||||||
|
- **MRR:** $500K-1M+
|
||||||
|
- **ARR:** $6M-12M+
|
||||||
|
|
||||||
|
**Mix:**
|
||||||
|
- Pro (70%): $350K-700K MRR
|
||||||
|
- Premium (30%): $150K-300K MRR
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💸 COST STRUCTURE
|
||||||
|
|
||||||
|
### Fixed Costs (Monthly)
|
||||||
|
|
||||||
|
#### **Infrastructure**
|
||||||
|
- **Hosting:** $200-500/month
|
||||||
|
- Backend API (FastAPI): $100-200
|
||||||
|
- Frontend (Next.js): $50-100
|
||||||
|
- Database (Supabase/PostgreSQL): $50-200
|
||||||
|
|
||||||
|
- **AI/ML Services:** $300-800/month
|
||||||
|
- OpenAI API (embeddings, GPT-4): $200-500
|
||||||
|
- Vector database (Pinecone/Weaviate): $100-300
|
||||||
|
|
||||||
|
- **Monitoring/Analytics:** $50-100/month
|
||||||
|
- Sentry, Datadog, Mixpanel
|
||||||
|
|
||||||
|
**Total Infrastructure:** $550-1,400/month
|
||||||
|
|
||||||
|
#### **Data/API Costs**
|
||||||
|
- **DexScreener:** $0 (Free API is sufficient for initial launch).
|
||||||
|
- **DefiLlama:** $0 (Free API).
|
||||||
|
- **QuickNode RPC:** $300-1,000/month (premium tier)
|
||||||
|
- Alternative: Self-host with RPC ($500-800/month)
|
||||||
|
|
||||||
|
**Total Data Costs:** $300-1,000/month
|
||||||
|
|
||||||
|
#### **Tools/Software**
|
||||||
|
- **Development:** $50-100/month
|
||||||
|
- GitHub, Vercel, monitoring tools
|
||||||
|
- **Marketing:** $100-500/month
|
||||||
|
- Email (Mailgun), analytics, SEO tools
|
||||||
|
|
||||||
|
**Total Tools:** $150-600/month
|
||||||
|
|
||||||
|
#### **Total Fixed Costs:** $1,000-3,000/month
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Variable Costs (Per User)
|
||||||
|
|
||||||
|
#### **AI/ML Costs**
|
||||||
|
- **Embeddings:** $0.01-0.05/user/month
|
||||||
|
- Document indexing, semantic search
|
||||||
|
- **LLM Queries:** $0.50-2.00/user/month
|
||||||
|
- GPT-4 for AI predictions, natural language queries
|
||||||
|
- Depends on usage (10-100 queries/month)
|
||||||
|
|
||||||
|
**Total AI Cost:** $0.50-2.00/user/month
|
||||||
|
|
||||||
|
#### **Data/API Costs**
|
||||||
|
- **QuickNode RPC:** $0.10-0.50/user/month
|
||||||
|
- Real-time blockchain data
|
||||||
|
- Scales with active users
|
||||||
|
- **DexScreener Premium:** $0.05-0.20/user/month
|
||||||
|
- If using premium tier
|
||||||
|
|
||||||
|
**Total Data Cost:** $0.15-0.70/user/month
|
||||||
|
|
||||||
|
#### **Total Variable Cost:** $0.65-2.70/user/month
|
||||||
|
|
||||||
|
**Margin Analysis:**
|
||||||
|
- **Pro Tier ($49/month):**
|
||||||
|
- Cost: $0.65-2.70
|
||||||
|
- Margin: $46.30-48.35 (94-99%)
|
||||||
|
|
||||||
|
- **Premium Tier ($199/month):**
|
||||||
|
- Cost: $1.50-5.00 (higher usage)
|
||||||
|
- Margin: $194-197.50 (97-99%)
|
||||||
|
|
||||||
|
**Gross Margin: 94-99%** (typical SaaS)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📈 UNIT ECONOMICS
|
||||||
|
|
||||||
|
### Customer Acquisition Cost (CAC)
|
||||||
|
|
||||||
|
**Channels:**
|
||||||
|
1. **Organic (Content Marketing):** $5-20/user
|
||||||
|
- Twitter threads, blog posts, YouTube tutorials
|
||||||
|
- Low cost, high quality users
|
||||||
|
|
||||||
|
2. **Paid Ads (Twitter, Google):** $50-150/user
|
||||||
|
- Targeted crypto trader audiences
|
||||||
|
- Higher cost, faster scale
|
||||||
|
|
||||||
|
3. **Referrals/Viral:** $2-10/user
|
||||||
|
- Referral program (1 month free for referrer)
|
||||||
|
- Lowest cost, best retention
|
||||||
|
|
||||||
|
**Blended CAC Target:** $20-50/user (Year 1)
|
||||||
|
- Heavy organic focus (solo founder constraint)
|
||||||
|
- Paid ads only after PMF validation
|
||||||
|
|
||||||
|
**CAC Payback Period:**
|
||||||
|
- Pro user: 1-2 months ($49/month, $20-50 CAC)
|
||||||
|
- Premium user: <1 month ($199/month, $20-50 CAC)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Lifetime Value (LTV)
|
||||||
|
|
||||||
|
**Churn Rate Assumptions:**
|
||||||
|
- **Year 1:** 25-30% annual churn (high, early product)
|
||||||
|
- **Year 2:** 15-20% annual churn (improving PMF)
|
||||||
|
- **Year 3+:** 10-15% annual churn (mature product)
|
||||||
|
|
||||||
|
**Average Customer Lifetime:**
|
||||||
|
- Year 1: 3-4 years (30% churn)
|
||||||
|
- Year 2: 5-7 years (20% churn)
|
||||||
|
- Year 3+: 7-10 years (15% churn)
|
||||||
|
|
||||||
|
**LTV Calculation (Year 2 steady state):**
|
||||||
|
|
||||||
|
**Pro Tier:**
|
||||||
|
- ARPU: $50/month
|
||||||
|
- Lifetime: 5 years (60 months)
|
||||||
|
- Churn: 20% annual
|
||||||
|
- **LTV:** $50 × 60 × (1 - 0.20) = **$2,400**
|
||||||
|
|
||||||
|
**Premium Tier:**
|
||||||
|
- ARPU: $200/month
|
||||||
|
- Lifetime: 6 years (72 months)
|
||||||
|
- Churn: 15% annual (lower, higher commitment)
|
||||||
|
- **LTV:** $200 × 72 × (1 - 0.15) = **$12,240**
|
||||||
|
|
||||||
|
**Blended LTV (75% Pro, 25% Premium):**
|
||||||
|
- $2,400 × 0.75 + $12,240 × 0.25 = **$4,860**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### LTV:CAC Ratio
|
||||||
|
|
||||||
|
**Target:** 3:1 minimum (healthy SaaS)
|
||||||
|
|
||||||
|
**Year 1:**
|
||||||
|
- LTV: $2,000-3,000 (high churn)
|
||||||
|
- CAC: $20-50
|
||||||
|
- **Ratio: 40:1 to 150:1** ✅ (EXCELLENT)
|
||||||
|
|
||||||
|
**Year 2:**
|
||||||
|
- LTV: $4,000-5,000
|
||||||
|
- CAC: $30-60 (more paid ads)
|
||||||
|
- **Ratio: 67:1 to 167:1** ✅ (EXCELLENT)
|
||||||
|
|
||||||
|
**Interpretation:**
|
||||||
|
- Solo founder advantage: LOW CAC (organic focus)
|
||||||
|
- High-margin SaaS: HIGH LTV
|
||||||
|
- Ratio is EXCEPTIONAL (10x+ better than 3:1 target)
|
||||||
|
- Can afford to invest in paid acquisition
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Break-Even Analysis
|
||||||
|
|
||||||
|
**Monthly Fixed Costs:** $1,000-3,000
|
||||||
|
|
||||||
|
**Break-Even Users (Pro Tier @ $49/month):**
|
||||||
|
- Low end: $1,000 / $49 = **21 users**
|
||||||
|
- High end: $3,000 / $49 = **62 users**
|
||||||
|
|
||||||
|
**Break-Even Timeline:**
|
||||||
|
**Break-Even Timeline:**
|
||||||
|
- **Month 2:** 20-30 users (Beta conversion).
|
||||||
|
- **Break-even: Month 2-3** ✅ (Immediate due to low OPEX).
|
||||||
|
|
||||||
|
**Profitability Timeline:**
|
||||||
|
- Month 12: 100-500 users = $5K-25K MRR
|
||||||
|
- Costs: $2K-4K/month
|
||||||
|
- **Profit: $1K-23K/month** ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛡️ DEFENSIBILITY ANALYSIS
|
||||||
|
|
||||||
|
### Moat Assessment
|
||||||
|
|
||||||
|
#### 1. **AI/ML Moat** (STRONG) ✅
|
||||||
|
|
||||||
|
**Defensibility:**
|
||||||
|
- Proprietary AI models trained on crypto patterns
|
||||||
|
- Prediction accuracy improves with data (network effect)
|
||||||
|
- Pattern recognition library (rug pulls, whale behavior)
|
||||||
|
- Difficult to replicate without historical data
|
||||||
|
|
||||||
|
**Sustainability:**
|
||||||
|
- 6-12 month lead time (before incumbents catch up)
|
||||||
|
- Continuous improvement (more data = better models)
|
||||||
|
- Requires ML expertise (barrier for competitors)
|
||||||
|
|
||||||
|
**Risk:**
|
||||||
|
- OpenAI/GPT-4 is commoditized (anyone can use)
|
||||||
|
- Must build proprietary models on top
|
||||||
|
- Data moat more important than model moat
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2. **Data Moat** (MEDIUM) ⚠️
|
||||||
|
|
||||||
|
**Defensibility:**
|
||||||
|
- Historical pattern library (rug pulls, pumps, dumps)
|
||||||
|
- User behavior data (what traders care about)
|
||||||
|
- Proprietary alert triggers (ML-learned)
|
||||||
|
|
||||||
|
**Weakness:**
|
||||||
|
- Raw data is PUBLIC (DexScreener, DefiLlama)
|
||||||
|
- Competitors can access same sources
|
||||||
|
- No exclusive data partnerships
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Build proprietary pattern library
|
||||||
|
- User feedback loop (what predictions work)
|
||||||
|
- Community-contributed insights
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3. **Brand Moat** (WEAK → STRONG) ⚠️→✅
|
||||||
|
|
||||||
|
**Current State (WEAK):**
|
||||||
|
- New brand (no recognition)
|
||||||
|
- No existing customer base
|
||||||
|
- Competing with established players
|
||||||
|
|
||||||
|
**Future State (STRONG):**
|
||||||
|
- "The AI co-pilot for crypto traders"
|
||||||
|
- Trusted predictions (accuracy track record)
|
||||||
|
- Community advocacy (referrals)
|
||||||
|
- Thought leadership (content marketing)
|
||||||
|
|
||||||
|
**Timeline:** 12-24 months to build brand
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4. **Network Effects** (WEAK) ⚠️
|
||||||
|
|
||||||
|
**Limited Network Effects:**
|
||||||
|
- Not a marketplace (no buyer-seller dynamics)
|
||||||
|
- Not a social network (no user-to-user value)
|
||||||
|
- Individual tool (value doesn't increase with users)
|
||||||
|
|
||||||
|
**Potential Network Effects:**
|
||||||
|
- Community insights (user-contributed patterns)
|
||||||
|
- Shared alert triggers (what works for others)
|
||||||
|
- Referral program (viral growth)
|
||||||
|
|
||||||
|
**Verdict:** Network effects are WEAK (not a core moat)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 5. **Switching Costs** (MEDIUM) ⚠️
|
||||||
|
|
||||||
|
**Switching Barriers:**
|
||||||
|
- Portfolio history (sunk data)
|
||||||
|
- Custom alert rules (configuration effort)
|
||||||
|
- Learned interface (familiarity)
|
||||||
|
- Historical predictions (track record)
|
||||||
|
|
||||||
|
**Weakness:**
|
||||||
|
- Easy to export data (no lock-in)
|
||||||
|
- Competitors can import data
|
||||||
|
- Low technical switching cost
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Build sticky features (portfolio tracking)
|
||||||
|
- Personalized AI (learns user preferences)
|
||||||
|
- Integration with trading workflows
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Overall Defensibility: **MEDIUM** ⚠️
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ AI/ML moat (6-12 month lead)
|
||||||
|
- ✅ High-margin SaaS (profitable)
|
||||||
|
- ✅ Low CAC (organic growth)
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ Weak network effects
|
||||||
|
- ❌ Public data (no exclusive sources)
|
||||||
|
- ❌ Easy to copy features
|
||||||
|
|
||||||
|
**Strategic Imperative:**
|
||||||
|
> Build AI moat FAST (6-12 months). Focus on prediction accuracy and proprietary pattern library. Brand and community will follow.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 BUSINESS MODEL SCORECARD
|
||||||
|
|
||||||
|
| Metric | Target | Crypto Co-Pilot | Score |
|
||||||
|
|--------|--------|-----------------|-------|
|
||||||
|
| **Gross Margin** | >70% | 94-99% | ✅ 10/10 |
|
||||||
|
| **LTV:CAC Ratio** | >3:1 | 40:1 to 150:1 | ✅ 10/10 |
|
||||||
|
| **CAC Payback** | <12 months | 1-2 months | ✅ 10/10 |
|
||||||
|
| **Churn Rate** | <20% annual | 15-25% annual | ⚠️ 7/10 |
|
||||||
|
| **Break-Even** | <12 months | 4-7 months | ✅ 10/10 |
|
||||||
|
| **Defensibility** | Strong moat | Medium moat | ⚠️ 6/10 |
|
||||||
|
| **Scalability** | Solo → Team | Solo only | ⚠️ 5/10 |
|
||||||
|
| **Market Size** | $100M+ TAM | $500M-800M SAM | ✅ 9/10 |
|
||||||
|
| **TOTAL** | | | **✅ 8.4/10** |
|
||||||
|
|
||||||
|
**Interpretation:** **STRONG BUSINESS MODEL** ✅
|
||||||
|
|
||||||
|
Excellent unit economics, fast break-even, high margins. Main risks: defensibility and solo scaling.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 STRATEGIC RECOMMENDATIONS
|
||||||
|
|
||||||
|
### 1. **Pricing Strategy**
|
||||||
|
|
||||||
|
**Recommendation:** Freemium with $49 Pro / $199 Premium
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
- Below DexTools ($100/month) = competitive
|
||||||
|
- Above "free" = perceived value
|
||||||
|
- Affordable for active traders
|
||||||
|
- Premium tier captures power users (high LTV)
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Annual discount (20%) to reduce churn
|
||||||
|
- Referral credits (1 month free)
|
||||||
|
- Early adopter lifetime discount (lock in evangelists)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. **Cost Optimization**
|
||||||
|
|
||||||
|
**Recommendation:** Aggressive cost control in Year 1
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Use free tiers during development (DexScreener, DefiLlama)
|
||||||
|
- Self-host QuickNode RPC if costs exceed $1K/month
|
||||||
|
- Optimize AI queries (caching, batch processing)
|
||||||
|
- Serverless architecture (pay per use)
|
||||||
|
|
||||||
|
**Target:** Keep fixed costs <$2K/month in Year 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. **CAC Strategy**
|
||||||
|
|
||||||
|
**Recommendation:** Organic-first, paid later
|
||||||
|
|
||||||
|
**Year 1 (Organic Focus):**
|
||||||
|
- Twitter threads (crypto trading tips)
|
||||||
|
- YouTube tutorials (how to use AI co-pilot)
|
||||||
|
- Blog posts (crypto intelligence insights)
|
||||||
|
- Community engagement (Discord, Telegram)
|
||||||
|
- **Target CAC:** $10-30/user
|
||||||
|
|
||||||
|
**Year 2 (Paid Ads):**
|
||||||
|
- Twitter ads (targeted crypto traders)
|
||||||
|
- Google ads (crypto trading tools)
|
||||||
|
- Influencer partnerships (crypto YouTubers)
|
||||||
|
- **Target CAC:** $30-60/user
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. **Churn Reduction**
|
||||||
|
|
||||||
|
**Recommendation:** Build sticky features
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Portfolio tracking (historical data)
|
||||||
|
- Custom alert rules (configuration effort)
|
||||||
|
- Prediction track record (accuracy validation)
|
||||||
|
- Community insights (shared patterns)
|
||||||
|
- Email engagement (weekly insights)
|
||||||
|
|
||||||
|
**Target:** Reduce churn from 25% → 15% by Year 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. **Defensibility Strategy**
|
||||||
|
|
||||||
|
**Recommendation:** Build AI moat FAST
|
||||||
|
|
||||||
|
**6-Month Plan:**
|
||||||
|
- Build proprietary pattern library (rug pulls, pumps)
|
||||||
|
- Train ML models on historical data
|
||||||
|
- Validate prediction accuracy (track record)
|
||||||
|
- Publish accuracy metrics (transparency)
|
||||||
|
- Build community (user-contributed insights)
|
||||||
|
|
||||||
|
**12-Month Plan:**
|
||||||
|
- Establish brand as "AI crypto intelligence leader"
|
||||||
|
- Thought leadership (blog, Twitter, YouTube)
|
||||||
|
- Case studies (successful predictions)
|
||||||
|
- Partnerships (crypto influencers, exchanges)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ CRITICAL RISKS
|
||||||
|
|
||||||
|
### 1. **Solo Founder Scaling Challenge** ⚠️
|
||||||
|
|
||||||
|
**Risk:** One person cannot serve 1K+ users
|
||||||
|
**Mitigation:**
|
||||||
|
- Automation (AI support, self-service)
|
||||||
|
- Community (Discord, user-to-user help)
|
||||||
|
- Prioritize product over support (Year 1)
|
||||||
|
- Hire support (Year 2, after $50K MRR)
|
||||||
|
|
||||||
|
### 2. **Market Timing Risk** ⚠️
|
||||||
|
|
||||||
|
**Risk:** Bear market kills demand
|
||||||
|
**Mitigation:**
|
||||||
|
- Build sticky features (survive bear market)
|
||||||
|
- Freemium model (low churn)
|
||||||
|
- Focus on serious traders (less price-sensitive)
|
||||||
|
- Diversify revenue (API access, white-label)
|
||||||
|
|
||||||
|
### 3. **Competitive Risk** ⚠️
|
||||||
|
|
||||||
|
**Risk:** Incumbents add AI features
|
||||||
|
**Mitigation:**
|
||||||
|
- Move FAST (6-12 month window)
|
||||||
|
- Build proprietary models (not just GPT-4)
|
||||||
|
- Focus on accuracy (not just features)
|
||||||
|
- Brand as "AI-first" (not "data + AI")
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 NEXT STEPS
|
||||||
|
|
||||||
|
**Step 4:** Disruption Opportunities Analysis
|
||||||
|
- Jobs-to-be-done framework
|
||||||
|
- Blue ocean strategy
|
||||||
|
- Platform potential
|
||||||
|
- Strategic options development
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**BUSINESS MODEL VERDICT:** ✅ **STRONG - PROCEED**
|
||||||
|
|
||||||
|
Excellent unit economics, fast break-even, high margins. Main risks are defensibility and solo scaling, but mitigable with aggressive AI moat building and automation.
|
||||||
504
_bmad-output/strategy/market_landscape_analysis.md
Normal file
504
_bmad-output/strategy/market_landscape_analysis.md
Normal file
|
|
@ -0,0 +1,504 @@
|
||||||
|
# Market Landscape Analysis - Crypto Intelligence Platforms
|
||||||
|
|
||||||
|
**Date:** February 1, 2026
|
||||||
|
**Analysis Type:** Innovation Strategy - Step 2
|
||||||
|
**Frameworks Used:** TAM/SAM/SOM, Five Forces, Competitive Positioning, Market Timing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 MARKET SIZING (TAM/SAM/SOM)
|
||||||
|
|
||||||
|
### Total Addressable Market (TAM)
|
||||||
|
**Crypto Trading Platforms Market: $38.5B (2026)**[^1]
|
||||||
|
|
||||||
|
**Context:**
|
||||||
|
- Grew from $33.48B (2025) → $38.5B (2026)
|
||||||
|
- **Growth Rate: 15% YoY**
|
||||||
|
- Includes exchange software, trading interfaces, analytics tools
|
||||||
|
- Broader crypto market: $7.08B in software/tools segment
|
||||||
|
|
||||||
|
**TAM Interpretation for Crypto Intelligence:**
|
||||||
|
- Trading platforms ($38.5B) is the TOTAL market
|
||||||
|
- Intelligence/analytics tools are a SUBSET
|
||||||
|
- Estimate: **10-15% of trading platform market = $3.8B-5.8B TAM**
|
||||||
|
- Rationale: Tools like DexTools, Birdeye are premium add-ons to trading
|
||||||
|
|
||||||
|
### Serviceable Addressable Market (SAM)
|
||||||
|
**DEX-Focused Intelligence Tools: ~$500M-800M (estimated)**
|
||||||
|
|
||||||
|
**Segmentation:**
|
||||||
|
- **Geographic:** Global, but concentrated in:
|
||||||
|
- North America: ~33% of crypto market
|
||||||
|
- Asia Pacific: ~31% of crypto market
|
||||||
|
- Europe: ~25% of crypto market
|
||||||
|
|
||||||
|
- **Platform Focus:** DEX vs CEX
|
||||||
|
- DEX trading growing faster (DeFi boom)
|
||||||
|
- Our focus: DEX intelligence (DexScreener, DefiLlama data)
|
||||||
|
- SAM = DEX-focused traders only
|
||||||
|
|
||||||
|
- **User Segment:** Active traders (not HODLers)
|
||||||
|
- Estimate: 20-30% of crypto users are active traders
|
||||||
|
- Active traders more likely to pay for intelligence tools
|
||||||
|
|
||||||
|
**SAM Calculation:**
|
||||||
|
- Total crypto intelligence TAM: $3.8B-5.8B
|
||||||
|
- DEX-focused subset: ~15-20% = $570M-1.16B
|
||||||
|
- Conservative SAM estimate: **$500M-800M**
|
||||||
|
|
||||||
|
### Serviceable Obtainable Market (SOM)
|
||||||
|
**Realistic 3-Year Target: $5M-50M (0.6%-6% of SAM)**
|
||||||
|
|
||||||
|
**Year 1 (Conservative):**
|
||||||
|
- 100-500 paying users @ $49-199/month
|
||||||
|
- MRR: $5K-25K
|
||||||
|
- ARR: **$60K-300K**
|
||||||
|
- Market share: 0.008%-0.04% of SAM
|
||||||
|
|
||||||
|
**Year 2 (Moderate):**
|
||||||
|
- 1K-5K paying users @ $49-199/month
|
||||||
|
- MRR: $50K-250K
|
||||||
|
- ARR: **$600K-3M**
|
||||||
|
- Market share: 0.08%-0.4% of SAM
|
||||||
|
|
||||||
|
**Year 3+ (Aggressive):**
|
||||||
|
- 10K+ paying users @ $49-199/month
|
||||||
|
- MRR: $500K+
|
||||||
|
- ARR: **$6M+**
|
||||||
|
- Market share: 0.75%-1.2% of SAM
|
||||||
|
|
||||||
|
**SOM Assumptions:**
|
||||||
|
- Freemium conversion rate: 2-5%
|
||||||
|
- Average revenue per user (ARPU): $60-120/month
|
||||||
|
- Churn rate: 15-25% annually
|
||||||
|
- Market share achievable as solo founder: 0.5-1% realistic
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏆 COMPETITIVE LANDSCAPE
|
||||||
|
|
||||||
|
### Major Players
|
||||||
|
|
||||||
|
#### 1. **DexTools** (Market Leader)
|
||||||
|
**Positioning:** Premium DEX analytics platform
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Real-time analytics across 100+ blockchains
|
||||||
|
- Monitors 7M+ liquidity pools, 13M+ tokens
|
||||||
|
- Aggregates data from 15,000+ DEXs
|
||||||
|
- DEXTScore reliability ratings
|
||||||
|
- Honeypot detection, liquidity lock verification
|
||||||
|
- Whale tracking (Big Swap Explorer)
|
||||||
|
|
||||||
|
**Pricing:**
|
||||||
|
- **Free:** Unlimited token monitoring, charts, volume analysis
|
||||||
|
- **Standard:** $100/month (paid in DEXT tokens)
|
||||||
|
- **Premium:** Requires holding 100,000 DEXT tokens
|
||||||
|
- Portfolio tracking
|
||||||
|
- Automated trading tools
|
||||||
|
- Advanced alerts
|
||||||
|
- Proprietary trading signals
|
||||||
|
|
||||||
|
**Business Model:**
|
||||||
|
- Freemium + token-gated premium
|
||||||
|
- Deflationary token economics (100% fees → buyback & burn)
|
||||||
|
- Recent burn: 8M tokens ($3.87M value)
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Comprehensive data coverage (100+ chains)
|
||||||
|
- ✅ Advanced security scanning (honeypot detection)
|
||||||
|
- ✅ Established brand (market leader)
|
||||||
|
- ✅ Token economics creates loyalty
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ Premium pricing barrier ($100/month or 100K token hold)
|
||||||
|
- ❌ Token requirement creates friction
|
||||||
|
- ❌ No AI-powered predictions (data aggregation only)
|
||||||
|
- ❌ Complex UI (steep learning curve)
|
||||||
|
|
||||||
|
**Estimated Market Share:** 30-40% of DEX intelligence market
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2. **DEX Screener** (Free Alternative)
|
||||||
|
**Positioning:** Free, ad-supported DEX analytics
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Real-time DEX data
|
||||||
|
- Token pair monitoring
|
||||||
|
- Price charts, volume analysis
|
||||||
|
- No paywalls, no subscriptions
|
||||||
|
|
||||||
|
**Pricing:**
|
||||||
|
- **100% Free**
|
||||||
|
- Monetization: Ads + promoted token listings ("Dexcreeners")
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Completely free (no barriers)
|
||||||
|
- ✅ Simple, clean UI
|
||||||
|
- ✅ Fast adoption (no signup required)
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ Limited advanced features
|
||||||
|
- ❌ Slower data refresh vs paid tools
|
||||||
|
- ❌ Ad-supported (promoted listings)
|
||||||
|
- ❌ No AI intelligence
|
||||||
|
|
||||||
|
**Estimated Market Share:** 40-50% of DEX intelligence users (but low revenue)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3. **Birdeye** (Multi-Chain Focus)
|
||||||
|
**Positioning:** Multi-chain analytics + trading
|
||||||
|
|
||||||
|
**Features:** (Limited data available)
|
||||||
|
- Multi-chain support
|
||||||
|
- Good UX
|
||||||
|
- Trading integration
|
||||||
|
|
||||||
|
**Pricing:** Premium pricing (expensive)
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Multi-chain coverage
|
||||||
|
- ✅ Good UX/UI
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ Expensive
|
||||||
|
- ❌ No AI predictions
|
||||||
|
|
||||||
|
**Estimated Market Share:** 10-15%
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4. **Dex Guru** (Analytics Focus)
|
||||||
|
**Positioning:** Advanced analytics for technical traders
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Deep analytics
|
||||||
|
- ✅ Technical trader focus
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ No alerts
|
||||||
|
- ❌ Technical/complex
|
||||||
|
- ❌ Limited accessibility
|
||||||
|
|
||||||
|
**Estimated Market Share:** 5-10%
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 5. **CoinGecko** (Broad Coverage)
|
||||||
|
**Positioning:** Broad crypto data aggregator
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Massive coverage (all coins)
|
||||||
|
- ✅ Established brand
|
||||||
|
|
||||||
|
**Weaknesses:**
|
||||||
|
- ❌ Not DEX-focused
|
||||||
|
- ❌ Limited real-time DEX data
|
||||||
|
- ❌ No trading intelligence
|
||||||
|
|
||||||
|
**Estimated Market Share:** 5% of DEX intelligence (not core focus)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Emerging AI-Powered Competitors (2025-2026)
|
||||||
|
|
||||||
|
**Trend:** AI-powered crypto tools reshaping 2026 markets
|
||||||
|
- **Stoic AI:** Algorithmic trading
|
||||||
|
- **Botty:** Trading automation
|
||||||
|
- **DexTools:** Adding AI features
|
||||||
|
|
||||||
|
**Threat Level:** HIGH
|
||||||
|
- Incumbents are adding AI capabilities
|
||||||
|
- Window for AI differentiation: **6-12 months**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 COMPETITIVE POSITIONING MAP
|
||||||
|
|
||||||
|
### Positioning Dimensions
|
||||||
|
|
||||||
|
**Dimension 1: Price (Free → Premium)**
|
||||||
|
- Free: DEX Screener
|
||||||
|
- Low: $49-99/month (Our target)
|
||||||
|
- Medium: $100-199/month (DexTools Standard)
|
||||||
|
- High: Token-gated (DexTools Premium, Birdeye)
|
||||||
|
|
||||||
|
**Dimension 2: Intelligence (Data → AI Predictions)**
|
||||||
|
- Data Aggregation: DEX Screener, CoinGecko
|
||||||
|
- Analytics: Dex Guru, Birdeye
|
||||||
|
- **AI Intelligence: [WHITE SPACE] ← Our Opportunity**
|
||||||
|
|
||||||
|
**Dimension 3: Accessibility (Complex → Simple)**
|
||||||
|
- Complex: DexTools, Dex Guru (technical traders)
|
||||||
|
- **Simple: [WHITE SPACE] ← Our Opportunity**
|
||||||
|
- Very Simple: DEX Screener (limited features)
|
||||||
|
|
||||||
|
### Strategic White Space
|
||||||
|
|
||||||
|
**OPPORTUNITY: AI-Powered + Accessible + Mid-Tier Pricing**
|
||||||
|
|
||||||
|
```
|
||||||
|
Intelligence Level
|
||||||
|
↑
|
||||||
|
| [OUR POSITION]
|
||||||
|
AI | AI + Simple + $49-199
|
||||||
|
| ⭐
|
||||||
|
|
|
||||||
|
| DexTools Birdeye
|
||||||
|
| (Complex) (Expensive)
|
||||||
|
|
|
||||||
|
Data | DEX Screener
|
||||||
|
| (Free/Simple)
|
||||||
|
|
|
||||||
|
└──────────────────────────────→
|
||||||
|
Free $100+ Price
|
||||||
|
```
|
||||||
|
|
||||||
|
**Differentiation Strategy:**
|
||||||
|
1. **AI Intelligence** (not just data)
|
||||||
|
2. **Accessible UX** (not complex)
|
||||||
|
3. **Fair Pricing** ($49-199, not $100+ or token-gated)
|
||||||
|
4. **Proactive Insights** (not reactive queries)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚔️ FIVE FORCES ANALYSIS
|
||||||
|
|
||||||
|
### 1. Competitive Rivalry: **HIGH** ⚠️
|
||||||
|
|
||||||
|
**Intensity Factors:**
|
||||||
|
- Multiple established players (DexTools, DEX Screener, Birdeye)
|
||||||
|
- Low switching costs (users can use multiple tools)
|
||||||
|
- Market growing fast (15% YoY) = room for multiple winners
|
||||||
|
- Differentiation possible (AI vs data aggregation)
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- Must differentiate clearly (AI intelligence)
|
||||||
|
- Cannot compete on price alone (DEX Screener is free)
|
||||||
|
- Must build defensible moat (AI models, proprietary patterns)
|
||||||
|
|
||||||
|
### 2. Threat of New Entrants: **MEDIUM** ⚠️
|
||||||
|
|
||||||
|
**Barriers to Entry:**
|
||||||
|
- **Low technical barriers (Basic):** APIs are accessible (DexScreener, DefiLlama free).
|
||||||
|
- **HIGH technical barriers (AI):** Building a robust RAG pipeline + Agentic capabilities (which SurfSense **already has**) takes months of specialized engineering.
|
||||||
|
- **Brand barriers:** Established players have trust.
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- We have a **significant technical head start** vs. new entrants.
|
||||||
|
- We must exploit this "AI Readiness" gap immediately.
|
||||||
|
- Brand/trust takes time, but superior product (AI) accelerates it.
|
||||||
|
|
||||||
|
### 3. Threat of Substitutes: **HIGH** ⚠️
|
||||||
|
|
||||||
|
**Substitutes:**
|
||||||
|
- **Free tools:** DEX Screener, CoinGecko (good enough for many)
|
||||||
|
- **Manual research:** Twitter, Discord, Telegram (free)
|
||||||
|
- **CEX tools:** TradingView, Binance analytics (different but overlapping)
|
||||||
|
- **AI chatbots:** ChatGPT + manual data (emerging threat)
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- Must provide 10x value over free alternatives
|
||||||
|
- Must be faster/better than manual research
|
||||||
|
- Must integrate insights (not just answer questions)
|
||||||
|
|
||||||
|
### 4. Bargaining Power of Buyers: **HIGH** ⚠️
|
||||||
|
|
||||||
|
**Buyer Power Factors:**
|
||||||
|
- **Low switching costs:** Easy to cancel subscription
|
||||||
|
- **Many alternatives:** DexTools, DEX Screener, Birdeye, etc.
|
||||||
|
- **Price sensitivity:** Crypto traders are cost-conscious
|
||||||
|
- **Information availability:** Easy to compare tools
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- Must deliver clear ROI (tool pays for itself)
|
||||||
|
- Must have sticky features (portfolio tracking, alerts)
|
||||||
|
- Must provide unique value (AI predictions)
|
||||||
|
- Freemium model reduces risk for buyers
|
||||||
|
|
||||||
|
### 5. Bargaining Power of Suppliers: **MEDIUM** ⚠️
|
||||||
|
|
||||||
|
**Supplier Power:**
|
||||||
|
- **API providers:** DexScreener (free), DefiLlama (free), QuickNode (paid)
|
||||||
|
- **Switching costs:** Can build own data services if needed
|
||||||
|
- **Alternatives:** Multiple data sources available
|
||||||
|
- **Dependency:** High on data quality/reliability
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- Multi-source strategy reduces dependency
|
||||||
|
- Can build own QuickNode RPC service if needed
|
||||||
|
- Premium APIs affordable (no budget constraint)
|
||||||
|
- Data quality is critical (must validate sources)
|
||||||
|
|
||||||
|
### Overall Industry Attractiveness: **MEDIUM** ⚠️
|
||||||
|
|
||||||
|
**Positive Factors:**
|
||||||
|
- ✅ Market growing fast (15% YoY)
|
||||||
|
- ✅ High willingness to pay ($100/month proven)
|
||||||
|
- ✅ Clear differentiation opportunity (AI)
|
||||||
|
|
||||||
|
**Negative Factors:**
|
||||||
|
- ❌ High competition
|
||||||
|
- ❌ Low barriers to entry
|
||||||
|
- ❌ High buyer power
|
||||||
|
- ❌ Many substitutes
|
||||||
|
|
||||||
|
**Strategic Imperative:**
|
||||||
|
> **SHIP and DISTRIBUTE.** The "Build" phase is largely done. The window is solely about capturing users before incumbents improve their AI.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⏰ MARKET TIMING ASSESSMENT
|
||||||
|
|
||||||
|
### Is Now the Right Time?
|
||||||
|
|
||||||
|
#### ✅ **FAVORABLE FACTORS**
|
||||||
|
|
||||||
|
**1. Market Growth**
|
||||||
|
- 15% YoY growth (2025→2026)
|
||||||
|
- Bull run momentum (2026)
|
||||||
|
- DeFi adoption increasing
|
||||||
|
|
||||||
|
**2. Technology Readiness**
|
||||||
|
- AI/ML models mature (GPT-4, embeddings)
|
||||||
|
- RAG infrastructure proven
|
||||||
|
- APIs accessible (DexScreener, DefiLlama)
|
||||||
|
|
||||||
|
**3. Customer Readiness**
|
||||||
|
- Traders already paying $100/month (DexTools)
|
||||||
|
- Proven willingness to pay for intelligence
|
||||||
|
- Information overload problem acute
|
||||||
|
|
||||||
|
**4. Competitive Landscape**
|
||||||
|
- Incumbents focused on data aggregation
|
||||||
|
- AI features just emerging (early stage)
|
||||||
|
- Window of opportunity open
|
||||||
|
|
||||||
|
#### ⚠️ **RISK FACTORS**
|
||||||
|
|
||||||
|
**1. Market Timing Risk**
|
||||||
|
- Bull run may not last (bear market kills demand)
|
||||||
|
- Crypto volatility high
|
||||||
|
- Regulatory uncertainty
|
||||||
|
|
||||||
|
**2. Technology Risk**
|
||||||
|
- AI predictions may not be accurate enough
|
||||||
|
- Data quality challenges
|
||||||
|
- API dependencies
|
||||||
|
|
||||||
|
**3. Competitive Risk**
|
||||||
|
- Incumbents adding AI (DexTools, Birdeye)
|
||||||
|
- Well-funded competitors
|
||||||
|
- Fast follower risk
|
||||||
|
|
||||||
|
**Window of Opportunity:**
|
||||||
|
|
||||||
|
**Optimal Entry:** **NOW (Q1 2026)** ✅
|
||||||
|
|
||||||
|
**Reasoning:**
|
||||||
|
1. **Bull run timing:** Demand is HIGH now.
|
||||||
|
2. **AI differentiation:** **6-12 month window** before incumbents catch up.
|
||||||
|
3. **Our Unfair Advantage (Entry Barrier):**
|
||||||
|
- We have *already* solved the hardest technical part: **The RAG & Context Engine** (Epic 1).
|
||||||
|
- Competitors (DexScreener/Birdeye) define "AI" as "summary buttons". We define it as **"Active Co-Pilot"** (Epic 2 - Smart Monitoring).
|
||||||
|
4. **Market validation:** Competitors prove market exists, but satisfaction is low due to complexity.
|
||||||
|
|
||||||
|
**Critical Timeline:**
|
||||||
|
- **Month 1:** **Launch Beta & Monetize.** (Platform is ready).
|
||||||
|
- **Months 2-3:** Feature Expansion (DefiLlama, AI Alerts) & Growth.
|
||||||
|
- **Months 4-12:** Scale to 1K+ users, advanced AI predictions.
|
||||||
|
|
||||||
|
**Risk Mitigation:**
|
||||||
|
- Build sticky features (portfolio tracking, alerts)
|
||||||
|
- Freemium model reduces churn in bear market
|
||||||
|
- Focus on serious traders (less price-sensitive)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 KEY MARKET INSIGHTS
|
||||||
|
|
||||||
|
### 1. **Market is REAL and GROWING**
|
||||||
|
- $38.5B trading platforms market, 15% YoY growth
|
||||||
|
- $500M-800M DEX intelligence SAM
|
||||||
|
- Proven willingness to pay ($100/month)
|
||||||
|
|
||||||
|
### 2. **Competitive Landscape is CROWDED but DIFFERENTIABLE**
|
||||||
|
- DexTools dominates (30-40% share) but expensive + complex
|
||||||
|
- DEX Screener has users (40-50%) but no revenue model
|
||||||
|
- **WHITE SPACE:** AI-powered + accessible + fair pricing
|
||||||
|
|
||||||
|
### 3. **AI Differentiation Window is SHORT**
|
||||||
|
- Incumbents adding AI features (2025-2026)
|
||||||
|
- **6-12 month window** to build moat
|
||||||
|
- Must move FAST
|
||||||
|
|
||||||
|
### 4. **Market Timing is FAVORABLE but RISKY**
|
||||||
|
- Bull run = high demand NOW
|
||||||
|
- Bear market risk = demand could collapse
|
||||||
|
- Must achieve traction in 6-12 months
|
||||||
|
|
||||||
|
### 5. **Solo Founder Can Compete**
|
||||||
|
- No budget constraints = can use premium APIs
|
||||||
|
- Technical foundation ready = faster to market
|
||||||
|
- AI differentiation = defensible moat
|
||||||
|
- Freemium model = scalable without team
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 MARKET OPPORTUNITY SCORE
|
||||||
|
|
||||||
|
| Factor | Score | Weight | Weighted |
|
||||||
|
|--------|-------|--------|----------|
|
||||||
|
| Market Size | 8/10 | 25% | 2.0 |
|
||||||
|
| Market Growth | 9/10 | 20% | 1.8 |
|
||||||
|
| Competitive Intensity | 5/10 | 15% | 0.75 |
|
||||||
|
| Differentiation Potential | 9/10 | 20% | 1.8 |
|
||||||
|
| Market Timing | 8/10 | 10% | 0.8 |
|
||||||
|
| Entry Barriers | 6/10 | 10% | 0.6 |
|
||||||
|
| **TOTAL** | **7.75/10** | **100%** | **7.75** |
|
||||||
|
|
||||||
|
**Interpretation:** **STRONG OPPORTUNITY** ✅
|
||||||
|
|
||||||
|
Market is attractive, timing is favorable, differentiation is possible. Main risks: competition and market timing (bear market).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 STRATEGIC IMPLICATIONS
|
||||||
|
|
||||||
|
### What This Means for Strategy
|
||||||
|
|
||||||
|
**1. GO AGGRESSIVE on AI Differentiation**
|
||||||
|
- This is the ONLY defensible moat
|
||||||
|
- Must be 10x better than incumbents
|
||||||
|
- 6-12 month window to build
|
||||||
|
|
||||||
|
**2. PRICE Competitively**
|
||||||
|
- $49-199/month sweet spot
|
||||||
|
- Below DexTools ($100+)
|
||||||
|
- Above "free" (perceived value)
|
||||||
|
|
||||||
|
**3. FOCUS on Accessibility**
|
||||||
|
- Simple UX (not complex like DexTools)
|
||||||
|
- Natural language queries
|
||||||
|
- Proactive insights (not reactive)
|
||||||
|
|
||||||
|
**4. MOVE FAST**
|
||||||
|
- Market timing is NOW
|
||||||
|
- Bull run won't last forever
|
||||||
|
- Incumbents are adding AI
|
||||||
|
|
||||||
|
**5. BUILD Sticky Features**
|
||||||
|
- Portfolio tracking
|
||||||
|
- Personalized alerts
|
||||||
|
- Historical patterns
|
||||||
|
- Survive bear market
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[^1]: The Business Research Company, "Crypto Trading Platform Global Market Report" (2026)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**NEXT STEP:** Business Model Analysis (Step 3)
|
||||||
110
_bmad-output/strategy/strategic_context_synthesis.md
Normal file
110
_bmad-output/strategy/strategic_context_synthesis.md
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
# Strategic Context - SurfSense Crypto Co-Pilot
|
||||||
|
|
||||||
|
**Date:** February 2, 2026
|
||||||
|
**Analysis Type:** Innovation Strategy
|
||||||
|
**Strategic Ambition:** BET-THE-COMPANY / ALL-IN
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 STRATEGIC FRAMING
|
||||||
|
|
||||||
|
### Company Context
|
||||||
|
**Name:** SurfSense Crypto Co-Pilot
|
||||||
|
**Current Status:** **Ready for Beta Implementation (Epics 1 & 2 Fully Specified)**
|
||||||
|
**Future Vision:** The comprehensive "Operating System" for crypto traders, starting as a high-utility browser extension.
|
||||||
|
|
||||||
|
**Critical Insight:**
|
||||||
|
- **Pivot Complete:** Shifted from generic "SurfSense" to focused "Crypto Co-Pilot".
|
||||||
|
- **Execution Mode:** We are no longer just exploring; we are executing a specific, validated roadmap.
|
||||||
|
- **Technical Readiness:** Core architecture (RAG, Connectors) and critical features (AI Assistant, Smart Alerts) are designed and ready to build.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💪 STRATEGIC DRIVER
|
||||||
|
|
||||||
|
**Primary Driver:** **AI-NATIVE INTELLIGENCE GAP**
|
||||||
|
|
||||||
|
**Context:**
|
||||||
|
- **Market Saturation:** Data aggregators (DexScreener, Birdeye) are ubiquitous but passive.
|
||||||
|
- **The Gap:** Traders are drowning in data but starving for *insight* and *actionable intelligence*.
|
||||||
|
- **The "Agent" Trend:** 2026 is the year of the "AI Agent". Users want tool that *do* things, not just show things.
|
||||||
|
|
||||||
|
**Strategic Logic:**
|
||||||
|
- **Differentiation:** We don't compete on "more charts". We compete on "better answers" and "automated vigilance" (Smart Monitoring).
|
||||||
|
- **Value Prop:** "Never miss a 100x because you were sleeping" (Smart Alerts) + "Understand any token in 10 seconds" (AI Assistant).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏢 CURRENT BUSINESS MODEL STATUS
|
||||||
|
|
||||||
|
**SurfSense Status:**
|
||||||
|
- **Development Phase:** Pre-Revenue, Implementation Started.
|
||||||
|
- **Monetization Strategy:** Freemium (Free access to core data/charts, Premium subscription for AI Insights & Advanced Alerts).
|
||||||
|
- **Validation:** Technical feasibility confirmed (Google Gemini 2.0 / OpenAI o3-mini integration verified).
|
||||||
|
|
||||||
|
**Strategic Implication:**
|
||||||
|
- **Focus on Retention:** First features (Chat, Alerts) must be "sticky" daily-use tools.
|
||||||
|
- **Low Overhead:** Leveraging existing LLMs means we don't need to train models, just orchestrate them well (low CAPEX).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ TECHNICAL READINESS (NEW)
|
||||||
|
|
||||||
|
**Status:** ✅ **HIGH**
|
||||||
|
|
||||||
|
1. **Architecture:** Modular "SurfSense 2.0" architecture defined, separating Content Script, Side Panel, and Background Service.
|
||||||
|
2. **Epics Ready:**
|
||||||
|
* **Epic 1 (AI Assistant):** Chat interface, RAG context, LLM Router—fully specified (BDD Ready).
|
||||||
|
* **Epic 2 (Smart Monitoring):** Price alerts, Whale tracking, Risk analysis—fully specified (BDD Ready).
|
||||||
|
3. **Risk Mitigation:**
|
||||||
|
* **Data Reliability:** Fallback strategy (DexScreener + DefiLlama + RPC) in place.
|
||||||
|
* **Browser Limits:** Off-screen document strategy for WebSocket connections validated.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚧 CONSTRAINTS & BOUNDARIES
|
||||||
|
|
||||||
|
### Financial Constraints
|
||||||
|
**Budget:** Self-Project / flexible.
|
||||||
|
- **Strategy:** Smart API usage (hybrid free/paid tiers) to keep MVP costs near zero until revenue.
|
||||||
|
|
||||||
|
### Timeline Constraints
|
||||||
|
**Timeline:** Aggressive Launch (Week 1 Target).
|
||||||
|
- **Goal:** Get a working "Assistant" into users' hands immediately to validate the "Co-Pilot" feel.
|
||||||
|
|
||||||
|
### Regulatory Constraints
|
||||||
|
**Financial Advice Liability:**
|
||||||
|
- **Mitigation:** Strict disclaimer UI patterns ("NFA" badges), AI guardrails to refuse direct "Buy/Sell" commands without context.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 SUCCESS DEFINITION
|
||||||
|
|
||||||
|
**Breakthrough Success Targets:**
|
||||||
|
|
||||||
|
### Phase 1: Launch (Month 1-3)
|
||||||
|
- **Users:** 100 Active Weekly Users (retention focus).
|
||||||
|
- **Goal:** Prove the "Co-Pilot" behavior (users keep the sidebar open while browsing).
|
||||||
|
|
||||||
|
### Phase 2: Growth (Month 4-12)
|
||||||
|
- **Users:** 1,000+ Paid Subscribers.
|
||||||
|
- **Feature:** Full "Agentic" capabilities (Automated trading execution, portfolio management).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔥 STRATEGIC AMBITION
|
||||||
|
|
||||||
|
**Level:** **BET-THE-COMPANY / ALL-IN**
|
||||||
|
|
||||||
|
**Refined Focus:**
|
||||||
|
We are not building a "better DexScreener". We are building the **layer above it**.
|
||||||
|
- **Legacy:** User looks at charts, calculates, decides.
|
||||||
|
- **SurfSense:** User asks SurfSense, SurfSense analyzes charts, SurfSense suggests/alerts.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 NEXT STEPS
|
||||||
|
|
||||||
|
1. **Execution:** Build Epic 1 (AI Assistant) immediately.
|
||||||
|
2. **Validation:** Test "Chat with Page" context quality on live DexScreener pages.
|
||||||
|
3. **Expansion:** Implement Epic 2 (Smart Monitoring) once Chat is stable.
|
||||||
614
_bmad-output/strategy/strategic_recommendation.md
Normal file
614
_bmad-output/strategy/strategic_recommendation.md
Normal file
|
|
@ -0,0 +1,614 @@
|
||||||
|
# Strategic Recommendation - SurfSense Crypto Co-Pilot
|
||||||
|
|
||||||
|
**Date:** February 1, 2026
|
||||||
|
**Analysis Type:** Innovation Strategy - Final Recommendation
|
||||||
|
**Decision:** GO / NO-GO / CONDITIONAL GO
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 EXECUTIVE SUMMARY
|
||||||
|
|
||||||
|
### The Opportunity
|
||||||
|
|
||||||
|
**Market:** $500M-800M DEX intelligence market, growing 15% YoY
|
||||||
|
**Timing:** Bull run 2026, 6-12 month AI differentiation window
|
||||||
|
**Positioning:** AI-first crypto intelligence (white space)
|
||||||
|
**Business Model:** Freemium SaaS, exceptional unit economics (LTV:CAC 40:1-150:1)
|
||||||
|
|
||||||
|
### The Challenge
|
||||||
|
|
||||||
|
**Solo founder** with **no existing customer base** must build **market-leading AI platform** in **competitive market** with **well-funded incumbents** before **AI window closes** (6-12 months).
|
||||||
|
|
||||||
|
### The Verdict
|
||||||
|
|
||||||
|
# ✅ **CONDITIONAL GO**
|
||||||
|
|
||||||
|
**Conditions:**
|
||||||
|
1. **AI moat FIRST** - Build proprietary AI models before features
|
||||||
|
2. **Speed is CRITICAL** - 6-12 month window to establish lead
|
||||||
|
3. **Focus on PMF** - Quality over quantity (100 users > 1,000 users)
|
||||||
|
4. **Plan for scaling** - Automation + community (solo constraint)
|
||||||
|
5. **Bear market hedge** - Sticky features (survive downturn)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 STRATEGIC ANALYSIS SUMMARY
|
||||||
|
|
||||||
|
### Market Landscape (Score: 7.75/10 - STRONG)
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Large market ($500M-800M SAM)
|
||||||
|
- ✅ Fast growth (15% YoY)
|
||||||
|
- ✅ Proven willingness to pay ($100/month)
|
||||||
|
- ✅ Clear white space (AI + accessible + fair pricing)
|
||||||
|
|
||||||
|
**Risks:**
|
||||||
|
- ⚠️ High competition (DexTools, DEX Screener, Birdeye)
|
||||||
|
- ⚠️ Low barriers to entry (APIs are public)
|
||||||
|
- ⚠️ Market timing risk (bear market could kill demand)
|
||||||
|
|
||||||
|
**Key Insight:**
|
||||||
|
> Market is real and growing, but competitive. AI differentiation is the ONLY defensible moat, and window is 6-12 months.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Business Model (Score: 8.4/10 - STRONG)
|
||||||
|
|
||||||
|
**Strengths:**
|
||||||
|
- ✅ Exceptional unit economics (LTV:CAC 40:1-150:1)
|
||||||
|
- ✅ High gross margin (94-99%)
|
||||||
|
- ✅ Fast break-even (4-7 months)
|
||||||
|
- ✅ Scalable (SaaS model)
|
||||||
|
|
||||||
|
**Risks:**
|
||||||
|
- ⚠️ Medium defensibility (AI moat critical)
|
||||||
|
- ⚠️ Solo scaling challenge (1 person → 1K+ users)
|
||||||
|
- ⚠️ Churn risk (25% Year 1)
|
||||||
|
|
||||||
|
**Key Insight:**
|
||||||
|
> Business model is STRONG. Main risks are defensibility (AI moat) and solo scaling (automation critical).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Disruption Opportunities (STRONG)
|
||||||
|
|
||||||
|
**Top Opportunities:**
|
||||||
|
1. **AI-first positioning** ⭐⭐⭐ (vs "data + AI")
|
||||||
|
2. **Natural language interface** ⭐⭐ (vs charts/tables)
|
||||||
|
3. **Proactive intelligence** ⭐⭐ (vs reactive queries)
|
||||||
|
|
||||||
|
**Blue Ocean Strategy:**
|
||||||
|
- **Eliminate:** Complexity, token-gating, manual work
|
||||||
|
- **Reduce:** Price (50% vs DexTools), time (10x faster)
|
||||||
|
- **Raise:** AI intelligence, accessibility, proactivity
|
||||||
|
- **Create:** Predictions, natural language, AI coaching
|
||||||
|
|
||||||
|
**Key Insight:**
|
||||||
|
> Clear differentiation path. Must lead with AI (not just add AI to data).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎲 STRATEGIC OPTIONS
|
||||||
|
|
||||||
|
### Option 1: **AI-FIRST MVP** (RECOMMENDED) ✅
|
||||||
|
|
||||||
|
**Strategy:** Build AI differentiation FIRST, then add features
|
||||||
|
|
||||||
|
**Year 1 Focus:**
|
||||||
|
- AI predictions (price targets, trend forecasting)
|
||||||
|
- Natural language queries ("Explain why WETH is pumping")
|
||||||
|
- Proactive alerts (rug pull detection, whale tracking)
|
||||||
|
- Simple UX (3-click setup)
|
||||||
|
|
||||||
|
**Year 1 Targets:**
|
||||||
|
- 100-500 paying users
|
||||||
|
- $5K-25K MRR
|
||||||
|
- 70%+ prediction accuracy
|
||||||
|
- <25% churn
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
- AI moat is ONLY defensible advantage
|
||||||
|
- 6-12 month window before incumbents catch up
|
||||||
|
- Quality over quantity (100 users with great AI > 1,000 users with mediocre AI)
|
||||||
|
|
||||||
|
**Risks:**
|
||||||
|
- AI predictions may not be accurate enough
|
||||||
|
- Solo founder may struggle with ML complexity
|
||||||
|
- Market may not value predictions over data
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Start with simple predictions (price direction, not targets)
|
||||||
|
- Use GPT-4 + RAG (don't build from scratch)
|
||||||
|
- Validate with private beta (20 users)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Option 2: **FEATURE-FIRST MVP** (NOT RECOMMENDED) ❌
|
||||||
|
|
||||||
|
**Strategy:** Build features FIRST, add AI later
|
||||||
|
|
||||||
|
**Year 1 Focus:**
|
||||||
|
- Data aggregation (DexScreener + DefiLlama)
|
||||||
|
- Portfolio tracking
|
||||||
|
- Basic alerts
|
||||||
|
- Charts/dashboards
|
||||||
|
|
||||||
|
**Year 1 Targets:**
|
||||||
|
- 1,000+ users
|
||||||
|
- $10K-50K MRR
|
||||||
|
- Fast user growth
|
||||||
|
- High churn (no differentiation)
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
- Faster to market (no AI complexity)
|
||||||
|
- Easier to build (data aggregation only)
|
||||||
|
- Lower risk (proven model)
|
||||||
|
|
||||||
|
**Why NOT Recommended:**
|
||||||
|
- No differentiation (competing with DexTools, DEX Screener)
|
||||||
|
- No defensible moat (easy to copy)
|
||||||
|
- Price competition (DEX Screener is free)
|
||||||
|
- Missed AI window (incumbents will add AI)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Option 3: **PLATFORM-FIRST MVP** (NOT RECOMMENDED) ❌
|
||||||
|
|
||||||
|
**Strategy:** Build community platform FIRST
|
||||||
|
|
||||||
|
**Year 1 Focus:**
|
||||||
|
- User-contributed patterns
|
||||||
|
- Shared watchlists
|
||||||
|
- Community insights
|
||||||
|
- Social features
|
||||||
|
|
||||||
|
**Year 1 Targets:**
|
||||||
|
- 5,000+ users
|
||||||
|
- Network effects
|
||||||
|
- Viral growth
|
||||||
|
- Community engagement
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
- Network effects (defensible moat)
|
||||||
|
- Viral growth (low CAC)
|
||||||
|
- Community value (sticky)
|
||||||
|
|
||||||
|
**Why NOT Recommended:**
|
||||||
|
- Solo founder constraint (platforms need teams)
|
||||||
|
- Chicken-egg problem (need users for value)
|
||||||
|
- No differentiation (social features are commoditized)
|
||||||
|
- Missed AI window (not focusing on core moat)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ RECOMMENDED STRATEGY: AI-FIRST MVP
|
||||||
|
|
||||||
|
### Strategic Pillars
|
||||||
|
|
||||||
|
#### **Pillar 1: AI Differentiation** (HIGHEST PRIORITY)
|
||||||
|
|
||||||
|
**Goal:** Build proprietary AI moat in 6-12 months
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- AI predictions (price direction, trend forecasting)
|
||||||
|
- Pattern recognition (rug pulls, whale behavior)
|
||||||
|
- Natural language interface (conversational AI)
|
||||||
|
- Proactive alerts (ML-based)
|
||||||
|
|
||||||
|
**Success Metrics:**
|
||||||
|
- 70%+ prediction accuracy (Year 1)
|
||||||
|
- 80%+ rug pull detection (Year 1)
|
||||||
|
- 90%+ user satisfaction with AI explanations
|
||||||
|
|
||||||
|
**Timeline:** Months 1-6 (MVP), Months 7-12 (refinement)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **Pillar 2: Accessible UX** (HIGH PRIORITY)
|
||||||
|
|
||||||
|
**Goal:** Make crypto intelligence accessible to everyone
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Natural language queries ("Show me whale activity")
|
||||||
|
- 3-click setup (connect wallet, select tokens, done)
|
||||||
|
- Plain English explanations (no jargon)
|
||||||
|
- Mobile-first design (trade on the go)
|
||||||
|
|
||||||
|
**Success Metrics:**
|
||||||
|
- <5 min time to first insight
|
||||||
|
- 80%+ users complete onboarding
|
||||||
|
- 90%+ users understand AI explanations
|
||||||
|
|
||||||
|
**Timeline:** Months 1-3 (MVP), Months 4-12 (refinement)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **Pillar 3: Proactive Intelligence** (HIGH PRIORITY)
|
||||||
|
|
||||||
|
**Goal:** Alert users, don't make them search
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Smart alerts (ML-based, not just price thresholds)
|
||||||
|
- Rug pull detection (proactive warnings)
|
||||||
|
- Opportunity discovery (automated scanning)
|
||||||
|
- Portfolio risk scoring (real-time)
|
||||||
|
|
||||||
|
**Success Metrics:**
|
||||||
|
- 50%+ users enable alerts
|
||||||
|
- 70%+ users act on alerts
|
||||||
|
- 80%+ users find alerts valuable
|
||||||
|
|
||||||
|
**Timeline:** Months 3-6 (MVP), Months 7-12 (refinement)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **Pillar 4: Competitive Pricing** (MEDIUM PRIORITY)
|
||||||
|
|
||||||
|
**Goal:** Undercut DexTools, beat DEX Screener on value
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Freemium model (low barrier)
|
||||||
|
- $49 Pro tier (50% cheaper than DexTools)
|
||||||
|
- $199 Premium tier (power users)
|
||||||
|
- Annual discount (20% off)
|
||||||
|
|
||||||
|
**Success Metrics:**
|
||||||
|
- 3-5% freemium conversion
|
||||||
|
- $50-60 ARPU (blended)
|
||||||
|
- <25% churn (Year 1)
|
||||||
|
|
||||||
|
**Timeline:** Months 1-12 (ongoing)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### **Pillar 5: Solo Founder Optimization** (CRITICAL)
|
||||||
|
|
||||||
|
**Goal:** Build scalable product without team
|
||||||
|
|
||||||
|
**Tactics:**
|
||||||
|
- Automation (AI support, self-service)
|
||||||
|
- Community (Discord, user-to-user help)
|
||||||
|
- No-code tools (Zapier, n8n for integrations)
|
||||||
|
- Outsource non-core (design, content)
|
||||||
|
|
||||||
|
**Success Metrics:**
|
||||||
|
- <5 hours/week support (Year 1)
|
||||||
|
- 90%+ self-service resolution
|
||||||
|
- 80%+ community engagement
|
||||||
|
|
||||||
|
**Timeline:** Months 1-12 (ongoing)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📅 12-MONTH EXECUTION ROADMAP
|
||||||
|
|
||||||
|
### **Months 1-3: AI MVP Development**
|
||||||
|
|
||||||
|
**Goal:** Build core AI capabilities
|
||||||
|
|
||||||
|
**Deliverables:**
|
||||||
|
- AI predictions (price direction)
|
||||||
|
- Natural language queries (basic)
|
||||||
|
- Proactive alerts (rug pull detection)
|
||||||
|
- Simple UX (3-click setup)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- 60%+ prediction accuracy
|
||||||
|
- 70%+ rug pull detection
|
||||||
|
- <5 min time to first insight
|
||||||
|
|
||||||
|
**Resources:**
|
||||||
|
- Solo founder (full-time)
|
||||||
|
- OpenAI API ($200-500/month)
|
||||||
|
- QuickNode RPC ($300-500/month)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **Months 4-6: Private Beta Launch**
|
||||||
|
|
||||||
|
**Goal:** Validate AI value with 20-50 users
|
||||||
|
|
||||||
|
**Deliverables:**
|
||||||
|
- Private beta (invite-only)
|
||||||
|
- User feedback loop
|
||||||
|
- AI refinement (based on feedback)
|
||||||
|
- Freemium tier (public)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- 20-50 beta users
|
||||||
|
- 70%+ prediction accuracy
|
||||||
|
- 80%+ user satisfaction
|
||||||
|
- 50%+ users willing to pay
|
||||||
|
|
||||||
|
**Resources:**
|
||||||
|
- Solo founder (full-time)
|
||||||
|
- Beta users (free access)
|
||||||
|
- Community (Discord)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **Months 7-9: Public Launch**
|
||||||
|
|
||||||
|
**Goal:** Scale to 100-500 paying users
|
||||||
|
|
||||||
|
**Deliverables:**
|
||||||
|
- Public launch (freemium)
|
||||||
|
- Pro tier ($49/month)
|
||||||
|
- Premium tier ($199/month)
|
||||||
|
- Marketing (content, Twitter, YouTube)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- 100-500 paying users
|
||||||
|
- $5K-25K MRR
|
||||||
|
- 3-5% freemium conversion
|
||||||
|
- <25% churn
|
||||||
|
|
||||||
|
**Resources:**
|
||||||
|
- Solo founder (full-time)
|
||||||
|
- Marketing ($500-1,000/month)
|
||||||
|
- Infrastructure ($2K-3K/month)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **Months 10-12: PMF Validation**
|
||||||
|
|
||||||
|
**Goal:** Validate product-market fit
|
||||||
|
|
||||||
|
**Deliverables:**
|
||||||
|
- AI refinement (80%+ accuracy)
|
||||||
|
- Feature expansion (portfolio tracking, advanced alerts)
|
||||||
|
- Community building (Discord, Telegram)
|
||||||
|
- Thought leadership (blog, Twitter, YouTube)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- 500-1,000 paying users
|
||||||
|
- $25K-50K MRR
|
||||||
|
- 80%+ prediction accuracy
|
||||||
|
- <20% churn
|
||||||
|
- 40%+ NPS (Net Promoter Score)
|
||||||
|
|
||||||
|
**Resources:**
|
||||||
|
- Solo founder (full-time)
|
||||||
|
- Community (Discord, Telegram)
|
||||||
|
- Infrastructure ($3K-4K/month)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ CRITICAL RISKS & MITIGATION
|
||||||
|
|
||||||
|
### Risk 1: **AI Predictions Not Accurate Enough** (HIGH) ⚠️
|
||||||
|
|
||||||
|
**Impact:** Users don't trust AI, churn is high
|
||||||
|
**Probability:** MEDIUM (30-40%)
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Start with simple predictions (direction, not targets)
|
||||||
|
- Validate with private beta (20-50 users)
|
||||||
|
- Publish accuracy metrics (transparency)
|
||||||
|
- Continuous improvement (feedback loop)
|
||||||
|
- Hedge with data aggregation (if AI fails, still useful)
|
||||||
|
|
||||||
|
**Contingency:**
|
||||||
|
- If accuracy <60% after 6 months, pivot to data aggregation + basic AI
|
||||||
|
- Focus on proactive alerts (easier than predictions)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Risk 2: **Solo Founder Cannot Scale** (HIGH) ⚠️
|
||||||
|
|
||||||
|
**Impact:** Support overwhelms, product stagnates
|
||||||
|
**Probability:** HIGH (50-60%)
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Automation (AI support, self-service)
|
||||||
|
- Community (Discord, user-to-user help)
|
||||||
|
- Limit users (100-500 Year 1, not 1,000+)
|
||||||
|
- Outsource non-core (design, content)
|
||||||
|
- Hire support (Year 2, after $50K MRR)
|
||||||
|
|
||||||
|
**Contingency:**
|
||||||
|
- If overwhelmed, pause new signups
|
||||||
|
- Focus on retention (not acquisition)
|
||||||
|
- Raise prices (reduce volume, increase margin)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Risk 3: **Bear Market Kills Demand** (MEDIUM) ⚠️
|
||||||
|
|
||||||
|
**Impact:** Users churn, revenue drops
|
||||||
|
**Probability:** MEDIUM (40-50%)
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Build sticky features (portfolio tracking, historical data)
|
||||||
|
- Freemium model (low churn)
|
||||||
|
- Focus on serious traders (less price-sensitive)
|
||||||
|
- Diversify revenue (API access, white-label)
|
||||||
|
- Annual subscriptions (lock in revenue)
|
||||||
|
|
||||||
|
**Contingency:**
|
||||||
|
- If bear market hits, reduce costs (pause paid ads)
|
||||||
|
- Focus on retention (not acquisition)
|
||||||
|
- Pivot to "bear market tools" (risk management, portfolio tracking)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Risk 4: **Incumbents Add AI Features** (HIGH) ⚠️
|
||||||
|
|
||||||
|
**Impact:** Differentiation erodes, competition intensifies
|
||||||
|
**Probability:** HIGH (70-80%)
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Move FAST (6-12 month window)
|
||||||
|
- Build proprietary models (not just GPT-4)
|
||||||
|
- Focus on accuracy (not just features)
|
||||||
|
- Brand as "AI-first" (not "data + AI")
|
||||||
|
- Community moat (user-contributed patterns)
|
||||||
|
|
||||||
|
**Contingency:**
|
||||||
|
- If incumbents catch up, pivot to niche (e.g., "AI for DeFi traders")
|
||||||
|
- Focus on UX (simpler, more accessible)
|
||||||
|
- Compete on price (undercut DexTools)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Risk 5: **Regulatory Crackdown** (LOW) ⚠️
|
||||||
|
|
||||||
|
**Impact:** Financial advice liability, legal issues
|
||||||
|
**Probability:** LOW (10-20%)
|
||||||
|
|
||||||
|
**Mitigation:**
|
||||||
|
- Disclaimers (not financial advice)
|
||||||
|
- Terms of service (liability waiver)
|
||||||
|
- Position as "information tool" (not "investment advisor")
|
||||||
|
- Legal review (before launch)
|
||||||
|
- Insurance (if needed)
|
||||||
|
|
||||||
|
**Contingency:**
|
||||||
|
- If regulatory issues arise, pivot to "data aggregation only"
|
||||||
|
- Remove predictions (keep alerts, portfolio tracking)
|
||||||
|
- Consult legal counsel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 SUCCESS CRITERIA
|
||||||
|
|
||||||
|
### Year 1 (Months 1-12)
|
||||||
|
|
||||||
|
**User Metrics:**
|
||||||
|
- 100-500 paying users ✅
|
||||||
|
- 2,000-5,000 free users ✅
|
||||||
|
- 3-5% freemium conversion ✅
|
||||||
|
|
||||||
|
**Revenue Metrics:**
|
||||||
|
- $5K-25K MRR ✅
|
||||||
|
- $60K-300K ARR ✅
|
||||||
|
- 4-7 month break-even ✅
|
||||||
|
|
||||||
|
**Product Metrics:**
|
||||||
|
- 70%+ prediction accuracy ✅
|
||||||
|
- 80%+ rug pull detection ✅
|
||||||
|
- <25% churn ✅
|
||||||
|
- 40%+ NPS ✅
|
||||||
|
|
||||||
|
**Operational Metrics:**
|
||||||
|
- <5 hours/week support ✅
|
||||||
|
- 90%+ self-service resolution ✅
|
||||||
|
- Solo founder sustainable ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Year 2 (Months 13-24)
|
||||||
|
|
||||||
|
**User Metrics:**
|
||||||
|
- 1,000-5,000 paying users
|
||||||
|
- 10,000-25,000 free users
|
||||||
|
- 4-6% freemium conversion
|
||||||
|
|
||||||
|
**Revenue Metrics:**
|
||||||
|
- $50K-250K MRR
|
||||||
|
- $600K-3M ARR
|
||||||
|
- Profitable (30%+ margin)
|
||||||
|
|
||||||
|
**Product Metrics:**
|
||||||
|
- 80%+ prediction accuracy
|
||||||
|
- 90%+ rug pull detection
|
||||||
|
- <20% churn
|
||||||
|
- 50%+ NPS
|
||||||
|
|
||||||
|
**Operational Metrics:**
|
||||||
|
- Hire support (1-2 people)
|
||||||
|
- Community-driven (Discord, Telegram)
|
||||||
|
- Thought leadership (blog, Twitter, YouTube)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Year 3+ (Months 25+)
|
||||||
|
|
||||||
|
**User Metrics:**
|
||||||
|
- 10,000+ paying users
|
||||||
|
- 50,000-100,000 free users
|
||||||
|
- Platform evolution (community insights)
|
||||||
|
|
||||||
|
**Revenue Metrics:**
|
||||||
|
- $500K-1M+ MRR
|
||||||
|
- $6M-12M+ ARR
|
||||||
|
- Acquisition interest (potential exit)
|
||||||
|
|
||||||
|
**Product Metrics:**
|
||||||
|
- 85%+ prediction accuracy
|
||||||
|
- Market leader in AI crypto intelligence
|
||||||
|
- Strong brand recognition
|
||||||
|
|
||||||
|
**Operational Metrics:**
|
||||||
|
- Team of 5-10 people
|
||||||
|
- Platform ecosystem (plugins, bots)
|
||||||
|
- Thought leadership (conferences, media)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 FINAL RECOMMENDATION
|
||||||
|
|
||||||
|
# ✅ **GO - WITH CONDITIONS**
|
||||||
|
|
||||||
|
### The Decision
|
||||||
|
|
||||||
|
**PROCEED with AI-First MVP strategy**
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
1. **Market is REAL:** $500M-800M SAM, 15% YoY growth
|
||||||
|
2. **Timing is FAVORABLE:** Bull run 2026, 6-12 month AI window
|
||||||
|
3. **Business model is STRONG:** LTV:CAC 40:1-150:1, 94-99% margin
|
||||||
|
4. **Differentiation is CLEAR:** AI-first positioning (white space)
|
||||||
|
5. **Solo founder is VIABLE:** No budget constraints, automation possible
|
||||||
|
|
||||||
|
### The Conditions
|
||||||
|
|
||||||
|
**MUST DO:**
|
||||||
|
1. **AI moat FIRST** - Build proprietary AI before features
|
||||||
|
2. **Speed is CRITICAL** - 6-12 month window to establish lead
|
||||||
|
3. **Focus on PMF** - 100 users with great AI > 1,000 users with mediocre AI
|
||||||
|
4. **Plan for scaling** - Automation + community (solo constraint)
|
||||||
|
5. **Bear market hedge** - Sticky features (survive downturn)
|
||||||
|
|
||||||
|
**MUST AVOID:**
|
||||||
|
1. **Feature creep** - Don't build data aggregation tool (that's DexTools)
|
||||||
|
2. **Premature scaling** - Don't chase 1,000+ users in Year 1
|
||||||
|
3. **Ignoring AI accuracy** - If <60% accuracy, pivot immediately
|
||||||
|
4. **Solo hero syndrome** - Automate, outsource, build community
|
||||||
|
5. **Regulatory risk** - Disclaimers, legal review, insurance
|
||||||
|
|
||||||
|
### The Timeline
|
||||||
|
|
||||||
|
**Week 1:** **BETA LAUNCH** (Soft Launch to Waitlist)
|
||||||
|
**Week 2:** Intelligence Expansion (DefiLlama)
|
||||||
|
**Week 3:** Deployment & Scaling
|
||||||
|
**Week 4:** Public Access (Marketing Push)
|
||||||
|
|
||||||
|
### The Bet
|
||||||
|
|
||||||
|
> "AI-powered intelligence will beat pure data aggregation in crypto tools, and a solo founder can build a market-leading AI platform by moving fast, focusing on quality, and leveraging automation."
|
||||||
|
|
||||||
|
### The Verdict
|
||||||
|
|
||||||
|
**GO BUILD IT.** 🚀
|
||||||
|
|
||||||
|
The opportunity is real, the timing is favorable, the business model is strong, and the differentiation is clear. The main risks (AI accuracy, solo scaling, market timing, competition) are mitigable with aggressive AI moat building, automation, and speed.
|
||||||
|
|
||||||
|
**The window is NOW. Move fast, build AI moat, validate PMF, and scale.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 APPENDIX: ANALYSIS ARTIFACTS
|
||||||
|
|
||||||
|
1. **Strategic Context Synthesis** - Bet-the-company ambition, solo founder, market opportunity driven
|
||||||
|
2. **Market Landscape Analysis** - TAM $38.5B, SAM $500M-800M, 15% YoY growth, competitive analysis
|
||||||
|
3. **Business Model Analysis** - Freemium SaaS, LTV:CAC 40:1-150:1, 94-99% margin, 4-7 month break-even
|
||||||
|
4. **Disruption Opportunities Analysis** - Jobs-to-be-done, Blue Ocean Strategy, platform potential
|
||||||
|
|
||||||
|
**All analyses support the GO decision with conditions.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**END OF STRATEGIC RECOMMENDATION**
|
||||||
|
|
||||||
|
**Next Steps:** Execute 12-month roadmap, starting with AI MVP development (Months 1-3).
|
||||||
725
_bmad-output/ux-design/extension-ux-design.md
Normal file
725
_bmad-output/ux-design/extension-ux-design.md
Normal file
|
|
@ -0,0 +1,725 @@
|
||||||
|
# SurfSense 2.0 Chrome Extension - UX Design Document
|
||||||
|
|
||||||
|
**Version:** 1.0
|
||||||
|
**Date:** 2026-02-02
|
||||||
|
**Status:** 🚧 DRAFT - Needs Wireframes & Design System
|
||||||
|
**Owner:** UX Designer / PM
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Document Purpose
|
||||||
|
|
||||||
|
This UX Design Document provides comprehensive design guidance for the SurfSense 2.0 Chrome Extension. It covers:
|
||||||
|
- **Wireframes** for all key screens
|
||||||
|
- **User flows** for critical journeys
|
||||||
|
- **Design system** (colors, typography, spacing, components)
|
||||||
|
- **Interaction patterns** and micro-animations
|
||||||
|
- **Responsive behavior** and accessibility
|
||||||
|
|
||||||
|
**Target Audience:** Developers, Product Managers, QA Engineers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
1. [Design Principles](#design-principles)
|
||||||
|
2. [User Flows](#user-flows)
|
||||||
|
3. [Wireframes](#wireframes)
|
||||||
|
4. [Design System](#design-system)
|
||||||
|
5. [Component Library](#component-library)
|
||||||
|
6. [Interaction Patterns](#interaction-patterns)
|
||||||
|
7. [Accessibility](#accessibility)
|
||||||
|
8. [Implementation Notes](#implementation-notes)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Principles
|
||||||
|
|
||||||
|
### 1. **Context-Aware Intelligence**
|
||||||
|
- AI should understand what the user is viewing without explicit input
|
||||||
|
- Proactive suggestions based on page context (DexScreener, Twitter, etc.)
|
||||||
|
- Minimize cognitive load - users shouldn't need to explain context
|
||||||
|
|
||||||
|
### 2. **Seamless Integration**
|
||||||
|
- Extension feels like a natural part of the browsing experience
|
||||||
|
- Consistent with SurfSense web dashboard design language
|
||||||
|
- Non-intrusive - doesn't block content or disrupt workflow
|
||||||
|
|
||||||
|
### 3. **Speed & Efficiency**
|
||||||
|
- Quick access to AI insights (1-click actions)
|
||||||
|
- Keyboard shortcuts for power users
|
||||||
|
- Instant feedback for all interactions
|
||||||
|
|
||||||
|
### 4. **Trust & Transparency**
|
||||||
|
- Clear indication of AI reasoning (thinking steps)
|
||||||
|
- Explicit data sources and confidence levels
|
||||||
|
- Easy to verify AI suggestions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## User Flows
|
||||||
|
|
||||||
|
### Flow 1: First-Time User Onboarding
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
A[Install Extension] --> B[Click Extension Icon]
|
||||||
|
B --> C[Side Panel Opens]
|
||||||
|
C --> D[Welcome Screen]
|
||||||
|
D --> E{User Action}
|
||||||
|
E -->|Login| F[OAuth Popup]
|
||||||
|
E -->|Skip| G[Guest Mode]
|
||||||
|
F --> H[Logged In State]
|
||||||
|
G --> I[Limited Features]
|
||||||
|
H --> J[Sync Settings from Web]
|
||||||
|
J --> K[Ready to Use]
|
||||||
|
I --> K
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Screens:**
|
||||||
|
1. Welcome Screen (first launch)
|
||||||
|
2. Login Screen (OAuth options)
|
||||||
|
3. Settings Sync Screen (loading state)
|
||||||
|
4. Main Chat Interface (ready state)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- User completes login in <30 seconds
|
||||||
|
- Settings sync automatically from web dashboard
|
||||||
|
- User understands core value proposition (AI co-pilot for crypto)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Flow 2: Chat with AI about Token
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
A[User on DexScreener] --> B[Extension Detects Token]
|
||||||
|
B --> C[Token Info Card Appears]
|
||||||
|
C --> D{User Action}
|
||||||
|
D -->|Click 'Is this safe?'| E[Pre-filled Safety Query]
|
||||||
|
D -->|Type Custom Question| F[Custom Query]
|
||||||
|
D -->|Click 'Top Holders'| G[Pre-filled Holders Query]
|
||||||
|
E --> H[AI Processes with Context]
|
||||||
|
F --> H
|
||||||
|
G --> H
|
||||||
|
H --> I[Streaming Response]
|
||||||
|
I --> J[Thinking Steps Visible]
|
||||||
|
J --> K[Final Answer with Sources]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Screens:**
|
||||||
|
1. Token Info Card (context display)
|
||||||
|
2. Chat Input (with suggestions)
|
||||||
|
3. Streaming Response (thinking steps)
|
||||||
|
4. Final Answer (with tool UIs)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- Token detection happens in <1 second
|
||||||
|
- User can ask question in <5 seconds
|
||||||
|
- AI response starts streaming in <2 seconds
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Flow 3: Quick Capture Page
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
A[User Finds Interesting Page] --> B[Click 'Save Page' Button]
|
||||||
|
B --> C{Logged In?}
|
||||||
|
C -->|Yes| D[Select Search Space]
|
||||||
|
C -->|No| E[Login Prompt]
|
||||||
|
E --> F[OAuth Login]
|
||||||
|
F --> D
|
||||||
|
D --> G[Capture Page Content]
|
||||||
|
G --> H[Upload to Backend]
|
||||||
|
H --> I[Success Toast]
|
||||||
|
I --> J[Page Saved]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Screens:**
|
||||||
|
1. Quick Capture Button (sticky footer)
|
||||||
|
2. Search Space Selector (modal)
|
||||||
|
3. Capturing State (loading)
|
||||||
|
4. Success Confirmation (toast)
|
||||||
|
|
||||||
|
**Success Criteria:**
|
||||||
|
- User can save page in <3 clicks
|
||||||
|
- Capture completes in <5 seconds
|
||||||
|
- Clear confirmation of success
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wireframes
|
||||||
|
|
||||||
|
> **⚠️ TODO:** Add wireframes for all screens below. Use Figma, Excalidraw, or hand-drawn sketches.
|
||||||
|
|
||||||
|
### 1. Side Panel - Main Chat Interface
|
||||||
|
|
||||||
|
**Layout:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ [Logo] SurfSense [⚙️] [👤] │ ← Header (60px)
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 🪙 BULLA/SOL │ ← Token Info Card
|
||||||
|
│ $0.0001 📈 +15% │ (Conditional, 120px)
|
||||||
|
│ Vol: $10K | Liq: $5K │
|
||||||
|
│ [Is this safe?] [Top Holders] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ Chat Messages Area │ ← Scrollable Chat
|
||||||
|
│ (Scrollable) │ (Flex-grow)
|
||||||
|
│ │
|
||||||
|
│ [AI]: Analyzing token... │
|
||||||
|
│ [Thinking steps visible] │
|
||||||
|
│ │
|
||||||
|
│ [User]: Is this token safe? │
|
||||||
|
│ │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [Type your message...] [📎] │ ← Chat Input (80px)
|
||||||
|
│ [🎤] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 📸 Save Current Page │ ← Quick Capture
|
||||||
|
└─────────────────────────────────────┘ (Sticky, 50px)
|
||||||
|
|
||||||
|
Total Height: Viewport height
|
||||||
|
Width: 400px (default), resizable 300-600px
|
||||||
|
```
|
||||||
|
|
||||||
|
**Components:**
|
||||||
|
- Header: Logo, Settings dropdown, User profile
|
||||||
|
- Token Info Card: Conditional (only on DexScreener)
|
||||||
|
- Chat Messages: Scrollable, auto-scroll to bottom
|
||||||
|
- Chat Input: Text area with attachment button
|
||||||
|
- Quick Capture: Sticky footer button
|
||||||
|
|
||||||
|
**States:**
|
||||||
|
- Loading: Skeleton screens for chat messages
|
||||||
|
- Empty: Welcome message with suggestions
|
||||||
|
- Error: Inline error messages with retry button
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Welcome Screen (First Launch)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ │
|
||||||
|
│ 🌊 SurfSense │
|
||||||
|
│ AI Co-Pilot for Crypto │
|
||||||
|
│ │
|
||||||
|
│ Chat with AI about any token │
|
||||||
|
│ Get instant safety checks │
|
||||||
|
│ Save insights to your knowledge │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 🔐 Login with Google │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌─────────────────────────────┐ │
|
||||||
|
│ │ 📧 Login with Email │ │
|
||||||
|
│ └─────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ Skip for now (Guest) │
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Copy:**
|
||||||
|
- Headline: "AI Co-Pilot for Crypto"
|
||||||
|
- Subheadline: "Chat with AI about any token, get instant safety checks, save insights"
|
||||||
|
- CTA: "Login with Google" (primary), "Login with Email" (secondary)
|
||||||
|
- Skip: "Skip for now (Guest)" (text link)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Token Info Card (DexScreener Context)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 🪙 BULLA/SOL │
|
||||||
|
│ $0.0001234 📈 +15.3% │
|
||||||
|
│ Vol: $10.2K | Liq: $5.1K │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ ┌────────────────┐│
|
||||||
|
│ │ Is this safe?│ │ Top Holders ││
|
||||||
|
│ └──────────────┘ └────────────────┘│
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ ┌────────────────┐│
|
||||||
|
│ │ Price Predict│ │ Rug Pull Risk ││
|
||||||
|
│ └──────────────┘ └────────────────┘│
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Data Displayed:**
|
||||||
|
- Token Symbol/Name (e.g., "BULLA/SOL")
|
||||||
|
- Current Price (e.g., "$0.0001234")
|
||||||
|
- 24h Change (e.g., "+15.3%" with color: green if positive, red if negative)
|
||||||
|
- 24h Volume (e.g., "$10.2K")
|
||||||
|
- Liquidity (e.g., "$5.1K")
|
||||||
|
|
||||||
|
**Quick Actions:**
|
||||||
|
- "Is this safe?" → Trigger safety check query
|
||||||
|
- "Top Holders" → Query blockchain for holder distribution
|
||||||
|
- "Price Predict" → AI price prediction
|
||||||
|
- "Rug Pull Risk" → Rug pull detection analysis
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Settings Dropdown
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ⚙️ Settings │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Model: GPT-4 Turbo │ ← Read-only
|
||||||
|
│ Search Space: Crypto Research │ ← Read-only
|
||||||
|
│ │
|
||||||
|
│ ───────────────────────────────── │
|
||||||
|
│ │
|
||||||
|
│ 🔗 Manage Connectors │ ← Link to web
|
||||||
|
│ 💬 View All Chats │ ← Link to web
|
||||||
|
│ ⚙️ Full Settings │ ← Link to web
|
||||||
|
│ │
|
||||||
|
│ ───────────────────────────────── │
|
||||||
|
│ │
|
||||||
|
│ 🚪 Logout │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Behavior:**
|
||||||
|
- Dropdown triggered by ⚙️ icon in header
|
||||||
|
- Model and Search Space are read-only (managed on web)
|
||||||
|
- Links open web dashboard in new tab
|
||||||
|
- Logout clears JWT and redirects to welcome screen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design System
|
||||||
|
|
||||||
|
> **⚠️ TODO:** Define complete design system with color palette, typography, spacing, and elevation.
|
||||||
|
|
||||||
|
### Colors
|
||||||
|
|
||||||
|
**Primary Palette:**
|
||||||
|
```css
|
||||||
|
--primary-50: #E3F2FD; /* Lightest blue */
|
||||||
|
--primary-100: #BBDEFB;
|
||||||
|
--primary-200: #90CAF9;
|
||||||
|
--primary-300: #64B5F6;
|
||||||
|
--primary-400: #42A5F5;
|
||||||
|
--primary-500: #2196F3; /* Primary brand color */
|
||||||
|
--primary-600: #1E88E5;
|
||||||
|
--primary-700: #1976D2;
|
||||||
|
--primary-800: #1565C0;
|
||||||
|
--primary-900: #0D47A1; /* Darkest blue */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Semantic Colors:**
|
||||||
|
```css
|
||||||
|
--success: #4CAF50; /* Green for positive changes */
|
||||||
|
--warning: #FF9800; /* Orange for warnings */
|
||||||
|
--error: #F44336; /* Red for errors/negative changes */
|
||||||
|
--info: #2196F3; /* Blue for informational */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Neutral Palette:**
|
||||||
|
```css
|
||||||
|
--gray-50: #FAFAFA;
|
||||||
|
--gray-100: #F5F5F5;
|
||||||
|
--gray-200: #EEEEEE;
|
||||||
|
--gray-300: #E0E0E0;
|
||||||
|
--gray-400: #BDBDBD;
|
||||||
|
--gray-500: #9E9E9E;
|
||||||
|
--gray-600: #757575;
|
||||||
|
--gray-700: #616161;
|
||||||
|
--gray-800: #424242;
|
||||||
|
--gray-900: #212121;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Dark Mode:**
|
||||||
|
```css
|
||||||
|
--bg-primary: #121212;
|
||||||
|
--bg-secondary: #1E1E1E;
|
||||||
|
--bg-tertiary: #2C2C2C;
|
||||||
|
--text-primary: #FFFFFF;
|
||||||
|
--text-secondary: #B0B0B0;
|
||||||
|
--text-tertiary: #808080;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
|
||||||
|
**Font Family:**
|
||||||
|
```css
|
||||||
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Font Sizes:**
|
||||||
|
```css
|
||||||
|
--text-xs: 12px; /* Small labels */
|
||||||
|
--text-sm: 14px; /* Body text, buttons */
|
||||||
|
--text-base: 16px; /* Default body */
|
||||||
|
--text-lg: 18px; /* Subheadings */
|
||||||
|
--text-xl: 20px; /* Headings */
|
||||||
|
--text-2xl: 24px; /* Large headings */
|
||||||
|
--text-3xl: 30px; /* Hero text */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Font Weights:**
|
||||||
|
```css
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Line Heights:**
|
||||||
|
```css
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--leading-normal: 1.5;
|
||||||
|
--leading-relaxed: 1.75;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Spacing
|
||||||
|
|
||||||
|
**Spacing Scale (8px base):**
|
||||||
|
```css
|
||||||
|
--space-1: 4px;
|
||||||
|
--space-2: 8px;
|
||||||
|
--space-3: 12px;
|
||||||
|
--space-4: 16px;
|
||||||
|
--space-5: 20px;
|
||||||
|
--space-6: 24px;
|
||||||
|
--space-8: 32px;
|
||||||
|
--space-10: 40px;
|
||||||
|
--space-12: 48px;
|
||||||
|
--space-16: 64px;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Component Spacing:**
|
||||||
|
- Header padding: `--space-4` (16px)
|
||||||
|
- Card padding: `--space-4` (16px)
|
||||||
|
- Button padding: `--space-3` horizontal, `--space-2` vertical
|
||||||
|
- Input padding: `--space-3` (12px)
|
||||||
|
- Gap between elements: `--space-3` (12px)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
|
||||||
|
```css
|
||||||
|
--radius-sm: 4px; /* Small elements (badges) */
|
||||||
|
--radius-md: 8px; /* Buttons, inputs */
|
||||||
|
--radius-lg: 12px; /* Cards */
|
||||||
|
--radius-xl: 16px; /* Modals */
|
||||||
|
--radius-full: 9999px; /* Pills, avatars */
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Shadows
|
||||||
|
|
||||||
|
```css
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Component Library
|
||||||
|
|
||||||
|
> **⚠️ TODO:** Create reusable component specs for all UI elements.
|
||||||
|
|
||||||
|
### Button
|
||||||
|
|
||||||
|
**Variants:**
|
||||||
|
- Primary: Filled with primary color
|
||||||
|
- Secondary: Outlined with primary color
|
||||||
|
- Ghost: Text-only, no background
|
||||||
|
- Danger: Filled with error color
|
||||||
|
|
||||||
|
**Sizes:**
|
||||||
|
- Small: 32px height, 12px padding
|
||||||
|
- Medium: 40px height, 16px padding
|
||||||
|
- Large: 48px height, 20px padding
|
||||||
|
|
||||||
|
**States:**
|
||||||
|
- Default: Normal state
|
||||||
|
- Hover: Darken background by 10%
|
||||||
|
- Active: Darken background by 20%
|
||||||
|
- Disabled: 50% opacity, no pointer events
|
||||||
|
- Loading: Show spinner, disable interaction
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```tsx
|
||||||
|
<Button variant="primary" size="medium" loading={false}>
|
||||||
|
Is this safe?
|
||||||
|
</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Input Field
|
||||||
|
|
||||||
|
**Variants:**
|
||||||
|
- Text: Single-line text input
|
||||||
|
- Textarea: Multi-line text input
|
||||||
|
- Search: Text input with search icon
|
||||||
|
|
||||||
|
**States:**
|
||||||
|
- Default: Border gray-300
|
||||||
|
- Focus: Border primary-500, shadow
|
||||||
|
- Error: Border error, show error message
|
||||||
|
- Disabled: Background gray-100, no interaction
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```tsx
|
||||||
|
<Input
|
||||||
|
placeholder="Type your message..."
|
||||||
|
error="Please enter a message"
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Card
|
||||||
|
|
||||||
|
**Variants:**
|
||||||
|
- Default: White background, shadow-md
|
||||||
|
- Outlined: Border gray-300, no shadow
|
||||||
|
- Elevated: shadow-lg
|
||||||
|
|
||||||
|
**Padding:**
|
||||||
|
- Default: 16px (--space-4)
|
||||||
|
- Compact: 12px (--space-3)
|
||||||
|
- Spacious: 24px (--space-6)
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```tsx
|
||||||
|
<Card variant="elevated" padding="default">
|
||||||
|
<CardHeader>Token Info</CardHeader>
|
||||||
|
<CardBody>...</CardBody>
|
||||||
|
</Card>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Toast Notification
|
||||||
|
|
||||||
|
**Variants:**
|
||||||
|
- Success: Green background, checkmark icon
|
||||||
|
- Error: Red background, error icon
|
||||||
|
- Info: Blue background, info icon
|
||||||
|
- Warning: Orange background, warning icon
|
||||||
|
|
||||||
|
**Position:**
|
||||||
|
- Top-right (default)
|
||||||
|
- Bottom-right
|
||||||
|
- Top-center
|
||||||
|
|
||||||
|
**Duration:**
|
||||||
|
- Default: 3 seconds
|
||||||
|
- Persistent: Manual dismiss
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```tsx
|
||||||
|
<Toast variant="success" duration={3000}>
|
||||||
|
Page saved successfully!
|
||||||
|
</Toast>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Interaction Patterns
|
||||||
|
|
||||||
|
### Loading States
|
||||||
|
|
||||||
|
**Skeleton Screens:**
|
||||||
|
- Use for initial page load
|
||||||
|
- Animate shimmer effect (left to right)
|
||||||
|
- Match layout of actual content
|
||||||
|
|
||||||
|
**Spinners:**
|
||||||
|
- Use for button actions (e.g., "Saving...")
|
||||||
|
- Use for inline loading (e.g., "Loading chat history...")
|
||||||
|
|
||||||
|
**Progress Bars:**
|
||||||
|
- Use for file uploads
|
||||||
|
- Use for multi-step processes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Micro-Animations
|
||||||
|
|
||||||
|
**Hover Effects:**
|
||||||
|
- Buttons: Scale 1.02, darken background
|
||||||
|
- Cards: Lift with shadow-lg
|
||||||
|
- Links: Underline on hover
|
||||||
|
|
||||||
|
**Click Effects:**
|
||||||
|
- Ripple effect on buttons
|
||||||
|
- Scale down to 0.98 on active
|
||||||
|
|
||||||
|
**Transitions:**
|
||||||
|
- Duration: 200ms (default)
|
||||||
|
- Easing: ease-in-out
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Keyboard Shortcuts
|
||||||
|
|
||||||
|
**Global:**
|
||||||
|
- `Cmd/Ctrl + K`: Focus chat input
|
||||||
|
- `Cmd/Ctrl + S`: Save current page
|
||||||
|
- `Esc`: Close modals, clear input
|
||||||
|
|
||||||
|
**Chat:**
|
||||||
|
- `Enter`: Send message
|
||||||
|
- `Shift + Enter`: New line
|
||||||
|
- `↑`: Edit last message
|
||||||
|
- `↓`: Navigate message history
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Accessibility
|
||||||
|
|
||||||
|
### WCAG 2.1 AA Compliance
|
||||||
|
|
||||||
|
**Color Contrast:**
|
||||||
|
- Text on background: Minimum 4.5:1 ratio
|
||||||
|
- Large text (18px+): Minimum 3:1 ratio
|
||||||
|
- Interactive elements: Minimum 3:1 ratio
|
||||||
|
|
||||||
|
**Keyboard Navigation:**
|
||||||
|
- All interactive elements focusable
|
||||||
|
- Visible focus indicators (2px outline)
|
||||||
|
- Logical tab order
|
||||||
|
|
||||||
|
**Screen Readers:**
|
||||||
|
- Semantic HTML (header, nav, main, footer)
|
||||||
|
- ARIA labels for icons and buttons
|
||||||
|
- ARIA live regions for dynamic content
|
||||||
|
|
||||||
|
**Motion:**
|
||||||
|
- Respect `prefers-reduced-motion`
|
||||||
|
- Disable animations if user prefers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Notes
|
||||||
|
|
||||||
|
### Responsive Behavior
|
||||||
|
|
||||||
|
**Side Panel Width:**
|
||||||
|
- Default: 400px
|
||||||
|
- Minimum: 300px
|
||||||
|
- Maximum: 600px
|
||||||
|
- User can resize by dragging edge
|
||||||
|
|
||||||
|
**Breakpoints:**
|
||||||
|
- Small screens (<1280px): Default 300px width
|
||||||
|
- Medium screens (1280-1920px): Default 400px width
|
||||||
|
- Large screens (>1920px): Default 500px width
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Performance Considerations
|
||||||
|
|
||||||
|
**Loading States:**
|
||||||
|
- Show skeleton screens within 100ms
|
||||||
|
- Stream chat responses (don't wait for full response)
|
||||||
|
- Lazy load images in chat history
|
||||||
|
|
||||||
|
**Caching:**
|
||||||
|
- Cache token data for 5 minutes
|
||||||
|
- Cache chat history locally (Plasmo Storage)
|
||||||
|
- Prefetch user settings on login
|
||||||
|
|
||||||
|
**Debouncing:**
|
||||||
|
- Settings sync: Debounce 2 seconds after user action
|
||||||
|
- Search input: Debounce 300ms
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
**Network Errors:**
|
||||||
|
- Show "Offline" indicator in header
|
||||||
|
- Queue actions for retry when online
|
||||||
|
- Clear error message with retry button
|
||||||
|
|
||||||
|
**API Errors:**
|
||||||
|
- Show inline error message
|
||||||
|
- Provide actionable guidance (e.g., "Try again" button)
|
||||||
|
- Log errors to backend for monitoring
|
||||||
|
|
||||||
|
**Validation Errors:**
|
||||||
|
- Show inline error message below input
|
||||||
|
- Highlight invalid fields with red border
|
||||||
|
- Prevent form submission until valid
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
### Immediate Actions (Week 1)
|
||||||
|
|
||||||
|
1. **Create Wireframes** (3 days)
|
||||||
|
- [ ] Main Chat Interface
|
||||||
|
- [ ] Welcome Screen
|
||||||
|
- [ ] Token Info Card
|
||||||
|
- [ ] Settings Dropdown
|
||||||
|
- [ ] Quick Capture Modal
|
||||||
|
|
||||||
|
2. **Define Design System** (2 days)
|
||||||
|
- [ ] Finalize color palette
|
||||||
|
- [ ] Choose typography (confirm Inter font)
|
||||||
|
- [ ] Define spacing scale
|
||||||
|
- [ ] Create shadow/elevation system
|
||||||
|
|
||||||
|
3. **Build Component Library** (2 days)
|
||||||
|
- [ ] Button component
|
||||||
|
- [ ] Input component
|
||||||
|
- [ ] Card component
|
||||||
|
- [ ] Toast component
|
||||||
|
- [ ] Modal component
|
||||||
|
|
||||||
|
### Follow-up Actions (Week 2)
|
||||||
|
|
||||||
|
4. **Create User Flows** (2 days)
|
||||||
|
- [ ] Onboarding flow (detailed)
|
||||||
|
- [ ] Chat flow (detailed)
|
||||||
|
- [ ] Quick Capture flow (detailed)
|
||||||
|
|
||||||
|
5. **Prototype in Figma** (3 days)
|
||||||
|
- [ ] High-fidelity mockups
|
||||||
|
- [ ] Interactive prototype
|
||||||
|
- [ ] Handoff to developers
|
||||||
|
|
||||||
|
6. **Accessibility Audit** (1 day)
|
||||||
|
- [ ] Color contrast check
|
||||||
|
- [ ] Keyboard navigation test
|
||||||
|
- [ ] Screen reader test
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Approval & Sign-off
|
||||||
|
|
||||||
|
**Stakeholders:**
|
||||||
|
- [ ] UX Designer: _______________ (Date: _______)
|
||||||
|
- [ ] Product Manager: _______________ (Date: _______)
|
||||||
|
- [ ] Tech Lead: _______________ (Date: _______)
|
||||||
|
|
||||||
|
**Status:** 🚧 DRAFT - Awaiting wireframes and design system completion
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Document Version History:**
|
||||||
|
- v1.0 (2026-02-02): Initial outline created
|
||||||
42
_bmad-output/verification/epic2_conversion_summary.md
Normal file
42
_bmad-output/verification/epic2_conversion_summary.md
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
# Epic 2 AC Conversion Summary
|
||||||
|
|
||||||
|
**Date:** 2026-02-02
|
||||||
|
**Status:** ✅ COMPLETE
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Successfully converted all Epic 2 acceptance criteria from checklist format to BDD Given/When/Then format.
|
||||||
|
|
||||||
|
## Stories Converted
|
||||||
|
|
||||||
|
### Story 2.1: Real-time Price Alerts (5 ACs)
|
||||||
|
- AC 2.1.1: Watchlist Management
|
||||||
|
- AC 2.1.2: Alert Types Configuration
|
||||||
|
- AC 2.1.3: Browser Notifications
|
||||||
|
- AC 2.1.4: Sound Alerts
|
||||||
|
- AC 2.1.5: Alert History
|
||||||
|
|
||||||
|
### Story 2.2: Whale Activity Tracker (5 ACs)
|
||||||
|
- AC 2.2.1: Monitor Large Transactions
|
||||||
|
- AC 2.2.2: Wallet Clustering Detection
|
||||||
|
- AC 2.2.3: Smart Money Tracking
|
||||||
|
- AC 2.2.4: Transaction Details
|
||||||
|
- AC 2.2.5: Whale Activity Feed
|
||||||
|
|
||||||
|
### Story 2.3: Rug Pull Early Warning System (5 ACs)
|
||||||
|
- AC 2.3.1: Risk Indicators Monitoring
|
||||||
|
- AC 2.3.2: Risk Score Calculation
|
||||||
|
- AC 2.3.3: Risk Score Display
|
||||||
|
- AC 2.3.4: Recommendations
|
||||||
|
- AC 2.3.5: Risk Alerts
|
||||||
|
|
||||||
|
## Total Impact
|
||||||
|
|
||||||
|
- **15 acceptance criteria** converted to BDD format
|
||||||
|
- **P2 Issue #7** marked as RESOLVED
|
||||||
|
- **Epic 2** now READY FOR IMPLEMENTATION
|
||||||
|
|
||||||
|
## Files Modified
|
||||||
|
|
||||||
|
1. `/Users/mac_1/Documents/GitHub/SurfSense/_bmad-epics/epic-2-smart-monitoring-alerts.md`
|
||||||
|
2. `/Users/mac_1/.gemini/antigravity/brain/02a071c7-57fc-4f43-a2e8-516ac511579a/implementation_readiness_report.md`
|
||||||
2159
_bmad-output/verification/implementation_readiness_report.md
Normal file
2159
_bmad-output/verification/implementation_readiness_report.md
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -75,6 +75,8 @@ if not config.BACKEND_URL or (
|
||||||
[
|
[
|
||||||
"http://localhost:3000",
|
"http://localhost:3000",
|
||||||
"http://127.0.0.1:3000",
|
"http://127.0.0.1:3000",
|
||||||
|
"http://localhost:3999",
|
||||||
|
"http://127.0.0.1:3999",
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1324,7 +1324,10 @@ else:
|
||||||
avatar_url = Column(String, nullable=True)
|
avatar_url = Column(String, nullable=True)
|
||||||
|
|
||||||
|
|
||||||
engine = create_async_engine(DATABASE_URL)
|
engine = create_async_engine(
|
||||||
|
DATABASE_URL,
|
||||||
|
connect_args={"ssl": False} # Disable SSL for local development
|
||||||
|
)
|
||||||
async_session_maker = async_sessionmaker(engine, expire_on_commit=False)
|
async_session_maker = async_sessionmaker(engine, expire_on_commit=False)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue