mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-04 22:02:16 +02:00
feat(crypto): add SurfSense 2.0 Crypto Co-Pilot UI components
Frontend - Web Dashboard: - Add crypto dashboard page with Watchlist, Alerts, Market, Profile tabs - Add 11 tool-ui components for inline chat display - Add crypto components (ChainIcon, SafetyBadge, PriceDisplay, etc.) - Add modals (AddTokenModal, CreateAlertModal) - Add mock data for development Frontend - Browser Extension: - Add shared components (ChainIcon, RiskBadge, PriceDisplay, SuggestionCard) - Add crypto components (SafetyScoreDisplay, WatchlistPanel, AlertConfigModal) - Add chat enhancements (WelcomeScreen, ThinkingStepsDisplay) - Add widget components for inline display - Enhance TokenInfoCard, ChatHeader, ChatInput, ChatInterface Documentation: - Add conversational UX specification - Add UX analysis report - Update extension UX design This implements the Conversational UX paradigm where crypto features are AI-callable tools that render inline in the chat interface.
This commit is contained in:
API Test Bot
parent
ad795eb830
commit
e4d020799b
58 changed files with 11315 additions and 661 deletions
|
|
@ -1,317 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,73 +1,812 @@
|
|||
---
|
||||
stepsCompleted:
|
||||
- 1
|
||||
- 2
|
||||
- 3
|
||||
- 4
|
||||
- 5
|
||||
- 6
|
||||
- 7
|
||||
- 8
|
||||
- 9
|
||||
- 14
|
||||
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-execution-safety.md
|
||||
- _bmad-epics/epic-4-adaptive-learning-evolution.md
|
||||
outputDocument: _bmad-output/planning-artifacts/ux-design-specification.md
|
||||
# SurfSense 2.0 - Complete UX Design Specification
|
||||
|
||||
# UX Design Specification: SurfSense v2
|
||||
|
||||
## 1. Design Strategy
|
||||
**"Evolution, Not Revolution"**
|
||||
- **Core Philosophy:** SurfSense v2 features will be "grafted" (injected) into the existing Research Dashboard rather than replacing it.
|
||||
- **Goal:** Maintain the professional, clean utility of the current "SaaS-style" research tool while adding "Crypto-Native" signals only where critical (the "Intel Layer").
|
||||
- **Visual Identity:** "Smart Cards" & "Traffic Lights" embedded in a Clean UI.
|
||||
|
||||
## 2. Core User Experience
|
||||
**The "Intel Layer" Concept**
|
||||
- **Problem:** Users have to switch contexts between Charts (DexScreener) and Safety Scans (Scanners/Twitter).
|
||||
- **Solution:** A hybrid "Intel Layer" that sits *on top* of the chart or *inside* the research chat.
|
||||
- **Mental Model:** "Traffic Light System" (Red/Green/Yellow).
|
||||
- 🔴 **Stop:** Scam/Rug/High Risk. (Immediate Action: Ignore)
|
||||
- 🟢 **Go:** Safe/Whale Buying. (Immediate Action: Ape in/Research)
|
||||
- 🟡 **Caution:** Mixed signals. (Action: Open Dashboard for Deep Dive)
|
||||
|
||||
**Key Mechanics:**
|
||||
1. **Initiation:** Extension detects Token URL -> Shows Traffic Light Badge.
|
||||
2. **Interaction:** Click Badge -> Opens Overlay (Summary).
|
||||
3. **Deep Dive:** "Ask SurfSense" -> Redirects to existing Web Dashboard (Port 3999).
|
||||
4. **Integration:** Inside the Chat Interface, AI answers are formatted as **Rich UI Cards**, not just text.
|
||||
|
||||
## 3. Visual Foundation (Confirmed Step 8 & 9)
|
||||
**Tokens & Theming**
|
||||
- **Source of Truth:** Inherited from existing `surfsense_web` (`globals.css` + Tailwind v4).
|
||||
- **Base Theme:** Dark Mode (Deep Navy / `#0B1221`) to match crypto aesthetic but cleaner.
|
||||
- **Typography:** Inter (Sans) for UI, Geist Mono for Data/Numbers.
|
||||
|
||||
**Color Palette Extension (The "Traffic Light" Overlay)**
|
||||
* **Success (Buy/Safe):** `#22c55e` (Green-500) - Solid, trustworthy.
|
||||
* **Danger (Scam/Sell):** `#f43f5e` (Rose-500) - Urgent, alarming.
|
||||
* **Warning (Volatility):** `#f59e0b` (Amber-500) - Cautionary.
|
||||
* **Whale (Institutional):** `#3b82f6` (Blue-500) - Consistent with brand.
|
||||
|
||||
## 4. Component Strategy (Smart Cards)
|
||||
Instead of building a full trading terminal, we build **"Injectable Components"**:
|
||||
1. **Signal Card:** Used in Chat & Extension. Shows Risk Score + 3 Key Bullets.
|
||||
2. **Whale Alert Row:** Used in Lists & Notifications. Shows "Wallet X bought $50K".
|
||||
3. **Mini-Chart:** Sparklines only, for quick trend context.
|
||||
|
||||
## 5. Mobile & Responsive
|
||||
- **Extension:** Fixed width (360px-400px), focused on "At-a-glance" data.
|
||||
- **Web Dashboard:** Responsive, but optimized for Desktop Research. Mobile view converts Tables to Cards.
|
||||
|
||||
## 6. Implementation Notes
|
||||
- **Frontend:** Next.js (Port 3999). Use standard Tailwind classes.
|
||||
- **Backend:** FastAPI (Port 3998). Serves structured JSON for UI Cards.
|
||||
- **Extension:** Chrome Side Panel API. Shares UI components with Web via Repo Monorepo/Shared Lib structure.
|
||||
**Version:** 2.0
|
||||
**Date:** 2026-02-02
|
||||
**Status:** ✅ COMPLETE
|
||||
**Owner:** UX Designer
|
||||
|
||||
---
|
||||
**Status:** ✅ APPROVED
|
||||
**Next Steps:** Proceed to Architecture Design to map these UI components to Backend APIs.
|
||||
|
||||
## Executive Summary
|
||||
|
||||
This document provides comprehensive UX specifications for SurfSense 2.0 Crypto Co-Pilot, covering:
|
||||
1. **Browser Extension** - Chrome Side Panel with AI chat and token analysis
|
||||
2. **Web Dashboard Improvements** - Enhanced chat interface and crypto features
|
||||
3. **New Features** - Watchlist, Alerts, Portfolio Tracker, Rug Pull Detection
|
||||
|
||||
---
|
||||
|
||||
## Part 1: Browser Extension UX
|
||||
|
||||
### 1.1 Information Architecture
|
||||
|
||||
```
|
||||
Side Panel (400px width)
|
||||
├── Header (56px)
|
||||
│ ├── Logo + Brand
|
||||
│ ├── Search Space Selector
|
||||
│ └── Settings Menu
|
||||
├── Context Card (conditional, 140px)
|
||||
│ ├── Token Info (DexScreener)
|
||||
│ ├── Tweet Analysis (Twitter/X)
|
||||
│ └── Article Summary (News sites)
|
||||
├── Chat Area (flex-grow)
|
||||
│ ├── Welcome State (empty)
|
||||
│ ├── Messages List
|
||||
│ └── Thinking Steps
|
||||
├── Input Area (120px)
|
||||
│ ├── Text Input
|
||||
│ ├── Attachments
|
||||
│ └── Quick Actions
|
||||
└── Quick Capture (48px sticky)
|
||||
```
|
||||
|
||||
### 1.2 Detailed Wireframes
|
||||
|
||||
#### 1.2.1 Main Chat Interface - Empty State
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Crypto ▼] [⚙️] [👤]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ 🌊 │
|
||||
│ │
|
||||
│ Good morning, Alex! │
|
||||
│ │
|
||||
│ Your AI co-pilot for crypto │
|
||||
│ research and analysis │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ Ask about any token, market │ │
|
||||
│ │ trends, or save insights... │ │
|
||||
│ │ [📎][→]│ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 💡 Try asking: │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Is $PEPE safe to invest?" │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Top gainers on Solana today" │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Analyze this wallet: 0x..." │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 📸 Save this page to knowledge base │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 1.2.2 Token Context Card (DexScreener Detection)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Crypto ▼] [⚙️] [👤]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 BULLA / SOL │ │
|
||||
│ │ Solana • CA: 7xKX...3nPq │ │
|
||||
│ │ │ │
|
||||
│ │ $0.00001234 ▲ +156.7% │ │
|
||||
│ │ 24h change │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
|
||||
│ │ │ Vol 24h │ │Liquidity│ │ MCap │ │ │
|
||||
│ │ │ $1.2M │ │ $450K │ │ $2.1M │ │ │
|
||||
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ Quick Analysis: │ │
|
||||
│ │ ┌────────┐┌────────┐┌────────┐┌────┐│ │
|
||||
│ │ │🛡️Safety││👥Holder││📈Predic││⚠️Rug││ │
|
||||
│ │ └────────┘└────────┘└────────┘└────┘│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [User] Is this token safe to buy? │
|
||||
│ │
|
||||
│ [AI] Analyzing BULLA token... │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ 🔍 Checking contract... │ │
|
||||
│ │ 📊 Analyzing holder distribution│ │
|
||||
│ │ 💧 Verifying liquidity lock... │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Ask follow-up question... [📎][→]│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 📸 Save this page to knowledge base │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 1.2.3 AI Response with Safety Analysis
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ [AI] 🛡️ Safety Analysis: BULLA/SOL │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ Overall Risk Score: 🟡 MEDIUM ││
|
||||
│ │ ████████░░ 65/100 ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ ✅ Positive Signals: │
|
||||
│ • Contract verified on Solscan │
|
||||
│ • No mint authority (can't create more)│
|
||||
│ • LP locked for 6 months │
|
||||
│ │
|
||||
│ ⚠️ Warning Signs: │
|
||||
│ • Top 10 holders own 45% of supply │
|
||||
│ • Token is only 3 days old │
|
||||
│ • Low social media presence │
|
||||
│ │
|
||||
│ 🔴 Red Flags: │
|
||||
│ • Similar contract to known rug pulls │
|
||||
│ │
|
||||
│ 📊 Holder Distribution: │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ Top 10: ████████░░ 45% ││
|
||||
│ │ Top 50: ██████████████░░ 72% ││
|
||||
│ │ Others: ██████░░░░░░░░░░ 28% ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ 💡 Recommendation: │
|
||||
│ Proceed with caution. Consider small │
|
||||
│ position size due to concentration │
|
||||
│ risk and young token age. │
|
||||
│ │
|
||||
│ Sources: Solscan, DexScreener, RugCheck│
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 1.2.4 Watchlist Panel
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [📋 Watchlist] [⚙️] [👤] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ My Watchlist [+ Add] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 BULLA/SOL ▲ +156.7% │ │
|
||||
│ │ $0.00001234 Vol: $1.2M │ │
|
||||
│ │ 🔔 Alert: Price > $0.00002 │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 PEPE/ETH ▼ -12.3% │ │
|
||||
│ │ $0.00000891 Vol: $45M │ │
|
||||
│ │ 🔔 Alert: Volume spike detected │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 WIF/SOL ▲ +8.2% │ │
|
||||
│ │ $2.34 Vol: $89M │ │
|
||||
│ │ ✓ No active alerts │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Recent Alerts │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 🔴 2m ago: BULLA whale sold 5% supply │
|
||||
│ 🟡 15m ago: PEPE unusual volume spike │
|
||||
│ 🟢 1h ago: WIF hit price target $2.30 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Ask about your watchlist... [📎][→]│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 1.2.5 Alert Configuration Modal
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🔔 Configure Alert for BULLA/SOL [×]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Alert Type: │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ ○ Price reaches │ │
|
||||
│ │ ○ Price change % (24h) │ │
|
||||
│ │ ● Volume spike │ │
|
||||
│ │ ○ Whale movement │ │
|
||||
│ │ ○ Liquidity change │ │
|
||||
│ │ ○ New holder concentration │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Condition: │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Volume increases by [ 200 ] % │ │
|
||||
│ │ within [ 1 hour ▼ ] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Notification: │
|
||||
│ ☑ Browser notification │
|
||||
│ ☑ Email alert │
|
||||
│ ☐ Telegram (connect in settings) │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 💾 Save Alert │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 1.3 User Flows
|
||||
|
||||
#### 1.3.1 Token Safety Check Flow
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[User visits DexScreener] --> B{Extension detects token}
|
||||
B -->|Yes| C[Show Token Info Card]
|
||||
B -->|No| D[Show default chat]
|
||||
C --> E[User clicks 'Safety' button]
|
||||
E --> F[AI starts analysis]
|
||||
F --> G[Show thinking steps]
|
||||
G --> H{Analysis complete?}
|
||||
H -->|Streaming| G
|
||||
H -->|Done| I[Display Safety Report]
|
||||
I --> J{User action}
|
||||
J -->|Add to Watchlist| K[Open Watchlist modal]
|
||||
J -->|Set Alert| L[Open Alert config]
|
||||
J -->|Ask follow-up| M[Continue chat]
|
||||
K --> N[Token added]
|
||||
L --> O[Alert configured]
|
||||
```
|
||||
|
||||
#### 1.3.2 Quick Capture Flow
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[User clicks Save Page] --> B{Logged in?}
|
||||
B -->|No| C[Show login prompt]
|
||||
B -->|Yes| D[Show Search Space selector]
|
||||
C --> E[OAuth login]
|
||||
E --> D
|
||||
D --> F[User selects space]
|
||||
F --> G[Capture page content]
|
||||
G --> H[Extract metadata]
|
||||
H --> I[Upload to backend]
|
||||
I --> J{Success?}
|
||||
J -->|Yes| K[Show success toast]
|
||||
J -->|No| L[Show error + retry]
|
||||
K --> M[Page saved to knowledge base]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 2: Web Dashboard UX Improvements
|
||||
|
||||
### 2.1 Current State Analysis
|
||||
|
||||
**Strengths:**
|
||||
- Clean chat interface with streaming responses
|
||||
- Good document mention system (@mentions)
|
||||
- Thinking steps visualization
|
||||
- Real-time collaboration indicators
|
||||
|
||||
**Areas for Improvement:**
|
||||
- No crypto-specific features in dashboard
|
||||
- Watchlist management only in extension
|
||||
- Alert history not visible
|
||||
- No portfolio integration
|
||||
|
||||
### 2.2 Proposed Dashboard Enhancements
|
||||
|
||||
#### 2.2.1 New Crypto Dashboard Tab
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Alex ▼] [⚙️] │
|
||||
├────────┬─────────────────────────────────────────────────────────────────┤
|
||||
│ │ 📊 Crypto Dashboard │
|
||||
│ 💬 ├─────────────────────────────────────────────────────────────────┤
|
||||
│ Chat │ │
|
||||
│ │ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────┐ │
|
||||
│ 📋 │ │ Portfolio Value │ │ 24h P&L │ │ Active │ │
|
||||
│ Watch │ │ $12,450.32 │ │ +$1,234.56 (+11%) │ │ Alerts: 5 │ │
|
||||
│ list │ │ ▲ +5.2% today │ │ ████████░░ │ │ 🔴 2 urgent │ │
|
||||
│ │ └─────────────────────┘ └─────────────────────┘ └─────────────┘ │
|
||||
│ 🔔 │ │
|
||||
│ Alerts │ Watchlist [+ Add Token]│
|
||||
│ │ ┌────────────────────────────────────────────────────────────┐ │
|
||||
│ 📁 │ │ Token │ Price │ 24h % │ Volume │ Actions │ │
|
||||
│ Docs │ ├──────────┼────────────┼─────────┼──────────┼──────────────┤ │
|
||||
│ │ │ BULLA │ $0.0000123 │ +156.7% │ $1.2M │ [📊][🔔][×] │ │
|
||||
│ ⚙️ │ │ PEPE │ $0.0000089 │ -12.3% │ $45M │ [📊][🔔][×] │ │
|
||||
│ Set │ │ WIF │ $2.34 │ +8.2% │ $89M │ [📊][🔔][×] │ │
|
||||
│ tings │ │ BONK │ $0.0000234 │ +23.1% │ $12M │ [📊][🔔][×] │ │
|
||||
│ │ └────────────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ Recent Alerts [View All →] │
|
||||
│ │ ┌────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ 🔴 2m ago │ BULLA: Whale sold 5% of supply │ │
|
||||
│ │ │ 🟡 15m ago │ PEPE: Unusual volume spike (+340%) │ │
|
||||
│ │ │ 🟢 1h ago │ WIF: Price target reached ($2.30) │ │
|
||||
│ │ │ 🔴 2h ago │ NEW: Potential rug pull detected - $SCAM │ │
|
||||
│ │ └────────────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
└────────┴─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 2.2.2 Enhanced Chat with Crypto Context
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────────────┐
|
||||
│ New Chat [GPT-4 Turbo ▼] [⚙️] │
|
||||
├──────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Good afternoon, Alex! │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ Ask SurfSense or @mention docs │ │
|
||||
│ │ │ │
|
||||
│ │ 💡 Crypto shortcuts: │ │
|
||||
│ │ • Type $TOKEN to analyze (e.g., $BULLA) │ │
|
||||
│ │ • Type /safety $TOKEN for quick safety check │ │
|
||||
│ │ • Type /compare $TOKEN1 $TOKEN2 to compare │ │
|
||||
│ │ [📎][→]│ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 📊 Market Overview (Live) │
|
||||
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
||||
│ │ BTC: $67,234 │ │ ETH: $3,456 │ │ SOL: $178 │ │
|
||||
│ │ ▲ +2.3% │ │ ▲ +1.8% │ │ ▲ +5.6% │ │
|
||||
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
||||
│ │
|
||||
│ 🔥 Trending Tokens │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 1. BULLA +156% │ 2. MOCHI +89% │ 3. POPCAT +67% │ 4. BRETT +45% │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Part 3: Component Specifications
|
||||
|
||||
### 3.1 Token Info Card Component
|
||||
|
||||
```typescript
|
||||
interface TokenInfoCardProps {
|
||||
token: {
|
||||
symbol: string;
|
||||
name: string;
|
||||
chain: "solana" | "ethereum" | "base" | "arbitrum";
|
||||
contractAddress: string;
|
||||
price: number;
|
||||
priceChange24h: number;
|
||||
volume24h: number;
|
||||
liquidity: number;
|
||||
marketCap?: number;
|
||||
};
|
||||
onQuickAction: (action: "safety" | "holders" | "predict" | "rug") => void;
|
||||
onAddToWatchlist: () => void;
|
||||
isInWatchlist: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
**Visual States:**
|
||||
- Default: Shows token info with quick action buttons
|
||||
- Loading: Skeleton with shimmer animation
|
||||
- Error: Error message with retry button
|
||||
- Expanded: Shows additional metrics (FDV, holders count, age)
|
||||
|
||||
**Interactions:**
|
||||
- Click token name → Copy contract address
|
||||
- Click price → Toggle USD/native currency
|
||||
- Click chain badge → Open block explorer
|
||||
- Hover quick action → Show tooltip with description
|
||||
|
||||
### 3.2 Safety Score Component
|
||||
|
||||
```typescript
|
||||
interface SafetyScoreProps {
|
||||
score: number; // 0-100
|
||||
level: "safe" | "caution" | "danger";
|
||||
factors: {
|
||||
category: string;
|
||||
status: "positive" | "warning" | "danger";
|
||||
description: string;
|
||||
}[];
|
||||
sources: string[];
|
||||
timestamp: Date;
|
||||
}
|
||||
```
|
||||
|
||||
**Visual Design:**
|
||||
```
|
||||
Score Display:
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🛡️ Safety Score │
|
||||
│ │
|
||||
│ ┌───────────────────┐ │
|
||||
│ │ 🟡 65/100 │ │
|
||||
│ │ MEDIUM RISK │ │
|
||||
│ └───────────────────┘ │
|
||||
│ │
|
||||
│ ████████████░░░░░░░░ 65% │
|
||||
│ │
|
||||
│ Last updated: 2 minutes ago │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
Color Scale:
|
||||
- 0-30: 🔴 High Risk (red)
|
||||
- 31-60: 🟡 Medium Risk (yellow)
|
||||
- 61-80: 🟢 Low Risk (green)
|
||||
- 81-100: ✅ Very Safe (bright green)
|
||||
```
|
||||
|
||||
### 3.3 Alert Card Component
|
||||
|
||||
```typescript
|
||||
interface AlertCardProps {
|
||||
id: string;
|
||||
token: TokenInfo;
|
||||
type: "price" | "volume" | "whale" | "liquidity" | "rugpull";
|
||||
condition: string;
|
||||
triggeredAt?: Date;
|
||||
status: "active" | "triggered" | "dismissed";
|
||||
priority: "low" | "medium" | "high" | "urgent";
|
||||
onDismiss: () => void;
|
||||
onEdit: () => void;
|
||||
onViewDetails: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
**Priority Indicators:**
|
||||
- 🟢 Low: Informational alerts
|
||||
- 🟡 Medium: Notable changes
|
||||
- 🟠 High: Significant events
|
||||
- 🔴 Urgent: Immediate attention needed
|
||||
|
||||
### 3.4 Watchlist Table Component
|
||||
|
||||
```typescript
|
||||
interface WatchlistTableProps {
|
||||
tokens: WatchlistToken[];
|
||||
sortBy: "name" | "price" | "change" | "volume" | "alerts";
|
||||
sortOrder: "asc" | "desc";
|
||||
onSort: (column: string) => void;
|
||||
onTokenClick: (token: WatchlistToken) => void;
|
||||
onRemove: (tokenId: string) => void;
|
||||
onConfigureAlert: (tokenId: string) => void;
|
||||
}
|
||||
|
||||
interface WatchlistToken {
|
||||
id: string;
|
||||
symbol: string;
|
||||
name: string;
|
||||
chain: string;
|
||||
price: number;
|
||||
priceChange24h: number;
|
||||
volume24h: number;
|
||||
alertCount: number;
|
||||
hasUrgentAlert: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Part 4: Design Tokens
|
||||
|
||||
### 4.1 Extended Color Palette for Crypto
|
||||
|
||||
```css
|
||||
/* Crypto-specific semantic colors */
|
||||
--crypto-bullish: #22C55E; /* Green for gains */
|
||||
--crypto-bearish: #EF4444; /* Red for losses */
|
||||
--crypto-neutral: #6B7280; /* Gray for no change */
|
||||
|
||||
/* Chain colors */
|
||||
--chain-solana: #9945FF; /* Solana purple */
|
||||
--chain-ethereum: #627EEA; /* Ethereum blue */
|
||||
--chain-base: #0052FF; /* Base blue */
|
||||
--chain-arbitrum: #28A0F0; /* Arbitrum blue */
|
||||
--chain-bsc: #F0B90B; /* BSC yellow */
|
||||
|
||||
/* Risk level colors */
|
||||
--risk-safe: #22C55E; /* Green */
|
||||
--risk-low: #84CC16; /* Lime */
|
||||
--risk-medium: #EAB308; /* Yellow */
|
||||
--risk-high: #F97316; /* Orange */
|
||||
--risk-danger: #EF4444; /* Red */
|
||||
|
||||
/* Alert priority colors */
|
||||
--alert-low: #6B7280; /* Gray */
|
||||
--alert-medium: #3B82F6; /* Blue */
|
||||
--alert-high: #F97316; /* Orange */
|
||||
--alert-urgent: #EF4444; /* Red */
|
||||
```
|
||||
|
||||
### 4.2 Animation Tokens
|
||||
|
||||
```css
|
||||
/* Durations */
|
||||
--duration-instant: 50ms;
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 250ms;
|
||||
--duration-slow: 400ms;
|
||||
--duration-slower: 600ms;
|
||||
|
||||
/* Easings */
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Specific animations */
|
||||
--anim-fade-in: fade-in var(--duration-normal) var(--ease-out);
|
||||
--anim-slide-up: slide-up var(--duration-normal) var(--ease-out);
|
||||
--anim-pulse: pulse 2s var(--ease-default) infinite;
|
||||
--anim-shimmer: shimmer 1.5s var(--ease-default) infinite;
|
||||
```
|
||||
|
||||
### 4.3 Spacing for Extension
|
||||
|
||||
```css
|
||||
/* Extension-specific spacing (compact) */
|
||||
--ext-space-xs: 4px;
|
||||
--ext-space-sm: 8px;
|
||||
--ext-space-md: 12px;
|
||||
--ext-space-lg: 16px;
|
||||
--ext-space-xl: 20px;
|
||||
|
||||
/* Component heights */
|
||||
--ext-header-height: 56px;
|
||||
--ext-input-height: 48px;
|
||||
--ext-button-height: 36px;
|
||||
--ext-card-padding: 12px;
|
||||
--ext-quick-capture-height: 48px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 5: Interaction Patterns
|
||||
|
||||
### 5.1 Token Detection & Context
|
||||
|
||||
**Trigger:** User navigates to supported site (DexScreener, CoinGecko, Birdeye)
|
||||
|
||||
**Behavior:**
|
||||
1. Extension detects URL pattern
|
||||
2. Extract token contract address from URL/page
|
||||
3. Fetch token data from DexScreener API
|
||||
4. Display Token Info Card with 200ms fade-in
|
||||
5. Pre-populate chat context with token info
|
||||
|
||||
**Edge Cases:**
|
||||
- Invalid contract address → Show "Token not found" state
|
||||
- API timeout → Show cached data with "Last updated X ago"
|
||||
- Multiple tokens on page → Show selector dropdown
|
||||
|
||||
### 5.2 Streaming Response Pattern
|
||||
|
||||
**Behavior:**
|
||||
1. User sends message
|
||||
2. Show "Thinking..." indicator immediately
|
||||
3. Display thinking steps as they arrive
|
||||
4. Stream final response text
|
||||
5. Render tool UIs (charts, tables) after text complete
|
||||
6. Show action buttons (Copy, Regenerate, Add to Watchlist)
|
||||
|
||||
**Timing:**
|
||||
- Thinking indicator: Show within 100ms
|
||||
- First thinking step: Target <500ms
|
||||
- First response token: Target <1s
|
||||
- Tool UI render: After response complete
|
||||
|
||||
### 5.3 Alert Notification Pattern
|
||||
|
||||
**In-Extension:**
|
||||
1. Alert triggers on backend
|
||||
2. WebSocket pushes to extension
|
||||
3. Show toast notification (top-right, 5s duration)
|
||||
4. Badge count updates on extension icon
|
||||
5. Alert card appears in Alerts panel
|
||||
|
||||
**Browser Notification:**
|
||||
1. Check notification permission
|
||||
2. If granted, show system notification
|
||||
3. Click notification → Open extension side panel
|
||||
4. Focus on relevant alert
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Part 6: Accessibility Specifications
|
||||
|
||||
### 6.1 Keyboard Navigation Map
|
||||
|
||||
```
|
||||
Extension Side Panel:
|
||||
Tab Order:
|
||||
1. Search Space Selector
|
||||
2. Settings Button
|
||||
3. User Menu
|
||||
4. Token Info Card (if visible)
|
||||
- Quick Action buttons (left to right)
|
||||
5. Chat Messages (scrollable region)
|
||||
6. Chat Input
|
||||
7. Attachment Button
|
||||
8. Send Button
|
||||
9. Quick Capture Button
|
||||
|
||||
Shortcuts:
|
||||
- Cmd/Ctrl + K: Focus chat input
|
||||
- Cmd/Ctrl + S: Quick capture page
|
||||
- Cmd/Ctrl + W: Toggle watchlist panel
|
||||
- Escape: Close modals, clear input
|
||||
- Enter: Send message (in input)
|
||||
- Shift + Enter: New line (in input)
|
||||
```
|
||||
|
||||
### 6.2 Screen Reader Announcements
|
||||
|
||||
```typescript
|
||||
// ARIA live regions for dynamic content
|
||||
const ariaAnnouncements = {
|
||||
tokenDetected: "Token detected: {symbol} on {chain}",
|
||||
safetyScore: "Safety score: {score} out of 100, {level} risk",
|
||||
alertTriggered: "Alert: {type} for {token}. {description}",
|
||||
messageSent: "Message sent",
|
||||
responseStarted: "AI is thinking",
|
||||
responseComplete: "AI response complete",
|
||||
pageSaved: "Page saved to {searchSpace}",
|
||||
};
|
||||
```
|
||||
|
||||
### 6.3 Color Contrast Requirements
|
||||
|
||||
| Element | Foreground | Background | Ratio | Status |
|
||||
|---------|------------|------------|-------|--------|
|
||||
| Body text | #E5E5E5 | #121212 | 13.5:1 | ✅ Pass |
|
||||
| Muted text | #A3A3A3 | #121212 | 7.5:1 | ✅ Pass |
|
||||
| Primary button | #FFFFFF | #2563EB | 8.6:1 | ✅ Pass |
|
||||
| Success text | #22C55E | #121212 | 6.2:1 | ✅ Pass |
|
||||
| Error text | #EF4444 | #121212 | 5.4:1 | ✅ Pass |
|
||||
| Warning text | #EAB308 | #121212 | 8.1:1 | ✅ Pass |
|
||||
|
||||
---
|
||||
|
||||
## Part 7: Implementation Checklist
|
||||
|
||||
### 7.1 Browser Extension Components
|
||||
|
||||
- [ ] **TokenInfoCard** - Display token data from page context
|
||||
- [ ] **SafetyScoreDisplay** - Visual safety score with factors
|
||||
- [ ] **QuickActionButtons** - Safety, Holders, Predict, Rug Check
|
||||
- [ ] **WatchlistPanel** - List of watched tokens with alerts
|
||||
- [ ] **AlertConfigModal** - Configure alert conditions
|
||||
- [ ] **AlertNotificationToast** - In-app alert notifications
|
||||
- [ ] **ChatInterface** - Main chat with streaming support
|
||||
- [ ] **ThinkingStepsDisplay** - Show AI reasoning process
|
||||
- [ ] **QuickCaptureButton** - Save page to knowledge base
|
||||
- [ ] **SearchSpaceSelector** - Switch between search spaces
|
||||
- [ ] **SettingsDropdown** - Quick settings access
|
||||
|
||||
### 7.2 Web Dashboard Components
|
||||
|
||||
- [ ] **CryptoDashboard** - New dashboard tab for crypto
|
||||
- [ ] **PortfolioSummary** - Portfolio value and P&L
|
||||
- [ ] **WatchlistTable** - Full watchlist management
|
||||
- [ ] **AlertsPanel** - Alert history and management
|
||||
- [ ] **MarketOverview** - BTC, ETH, SOL prices
|
||||
- [ ] **TrendingTokens** - Hot tokens carousel
|
||||
- [ ] **EnhancedChatInput** - With $TOKEN and /command support
|
||||
- [ ] **TokenComparisonView** - Side-by-side token comparison
|
||||
|
||||
### 7.3 Shared Components
|
||||
|
||||
- [ ] **TokenBadge** - Compact token display with chain icon
|
||||
- [ ] **PriceDisplay** - Price with change indicator
|
||||
- [ ] **ChainIcon** - Chain-specific icons
|
||||
- [ ] **RiskBadge** - Risk level indicator
|
||||
- [ ] **AlertBadge** - Alert priority indicator
|
||||
- [ ] **LoadingSkeleton** - Consistent loading states
|
||||
- [ ] **ErrorState** - Consistent error displays
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Appendix A: API Integration Points
|
||||
|
||||
### DexScreener API
|
||||
- `GET /tokens/{chain}/{address}` - Token info
|
||||
- `GET /pairs/{chain}/{pairAddress}` - Pair info
|
||||
- WebSocket for real-time price updates
|
||||
|
||||
### DefiLlama API
|
||||
- `GET /tvl/{protocol}` - Protocol TVL
|
||||
- `GET /yields/pools` - Yield opportunities
|
||||
|
||||
### Backend API (New Endpoints)
|
||||
- `POST /api/v1/watchlist` - Add to watchlist
|
||||
- `DELETE /api/v1/watchlist/{id}` - Remove from watchlist
|
||||
- `POST /api/v1/alerts` - Create alert
|
||||
- `GET /api/v1/alerts` - List alerts
|
||||
- `POST /api/v1/safety-check` - Run safety analysis
|
||||
|
||||
---
|
||||
|
||||
## Appendix B: Success Metrics
|
||||
|
||||
| Metric | Target | Measurement |
|
||||
|--------|--------|-------------|
|
||||
| Token detection time | <1s | Time from page load to card display |
|
||||
| Safety check response | <3s | Time from click to first result |
|
||||
| Quick capture time | <5s | Time from click to success toast |
|
||||
| Alert delivery time | <10s | Time from trigger to notification |
|
||||
| Extension load time | <500ms | Time to interactive state |
|
||||
| Chat response start | <2s | Time to first streaming token |
|
||||
|
||||
---
|
||||
|
||||
## Appendix C: Rug Pull Detection Criteria
|
||||
|
||||
### Red Flags (Automatic Detection)
|
||||
|
||||
| Signal | Weight | Description |
|
||||
|--------|--------|-------------|
|
||||
| No LP Lock | Critical | Liquidity not locked in contract |
|
||||
| Mint Authority | Critical | Owner can create unlimited tokens |
|
||||
| Honeypot Contract | Critical | Users cannot sell tokens |
|
||||
| High Tax | High | >10% buy/sell tax |
|
||||
| Top 10 Holders >50% | High | Concentration risk |
|
||||
| Token Age <24h | Medium | Very new token |
|
||||
| No Social Presence | Medium | No Twitter/Telegram |
|
||||
| Similar to Known Scam | High | Contract code matches known rugs |
|
||||
|
||||
### Safety Score Calculation
|
||||
|
||||
```
|
||||
Score = 100 - (Critical × 40) - (High × 20) - (Medium × 10)
|
||||
|
||||
Examples:
|
||||
- No issues: 100 (Very Safe)
|
||||
- 1 Medium issue: 90 (Safe)
|
||||
- 1 High issue: 80 (Low Risk)
|
||||
- 2 High issues: 60 (Medium Risk)
|
||||
- 1 Critical issue: 60 (Medium Risk)
|
||||
- 1 Critical + 1 High: 40 (High Risk)
|
||||
- 2 Critical issues: 20 (Danger)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Appendix D: Responsive Breakpoints
|
||||
|
||||
### Extension Side Panel
|
||||
|
||||
| Screen Width | Panel Width | Layout |
|
||||
|--------------|-------------|--------|
|
||||
| < 1280px | 300px | Compact |
|
||||
| 1280-1920px | 400px | Default |
|
||||
| > 1920px | 500px | Expanded |
|
||||
|
||||
### Web Dashboard
|
||||
|
||||
| Breakpoint | Name | Layout Changes |
|
||||
|------------|------|----------------|
|
||||
| < 640px | Mobile | Single column, bottom nav |
|
||||
| 640-1024px | Tablet | Collapsible sidebar |
|
||||
| 1024-1440px | Desktop | Full sidebar |
|
||||
| > 1440px | Wide | Extended content area |
|
||||
|
||||
---
|
||||
|
||||
**Document Status:** ✅ COMPLETE
|
||||
**Last Updated:** 2026-02-02
|
||||
**Next Review:** 2026-02-09
|
||||
**Approved By:** UX Designer
|
||||
|
|
|
|||
1237
_bmad-output/ux-design/conversational-ux-specification.md
Normal file
1237
_bmad-output/ux-design/conversational-ux-specification.md
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,63 +1,204 @@
|
|||
# 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
|
||||
**Version:** 3.0 (Conversational UX Update)
|
||||
**Date:** 2026-02-02
|
||||
**Status:** ✅ COMPLETE
|
||||
**Owner:** UX Designer (Sally)
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ IMPORTANT: Conversational UX Paradigm Shift
|
||||
|
||||
> **This document has been updated to reflect the new Conversational AI approach.**
|
||||
>
|
||||
> **Key Change:** SurfSense is now a **conversational AI crypto advisor** where chat is the PRIMARY interface. All crypto features (watchlist, alerts, portfolio, analysis) are accessible through natural language commands and embedded as widgets within the chat experience.
|
||||
>
|
||||
> **See:** `_bmad-output/ux-design/conversational-ux-specification.md` for the complete Conversational UX Specification.
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
This UX Design Document provides comprehensive design guidance for the SurfSense 2.0 Chrome Extension - AI Co-Pilot for Crypto. It covers:
|
||||
- **Conversational Interface** - Chat as the primary interaction method
|
||||
- **Embedded Widgets** - Token analysis, watchlist, alerts displayed inline in chat
|
||||
- **AI Tool Calling** - Natural language commands that trigger backend tools
|
||||
- **Proactive Monitoring** - AI-initiated alerts and recommendations
|
||||
- **Design system** (colors, typography, spacing, components)
|
||||
- **Interaction patterns** and micro-animations
|
||||
- **Responsive behavior** and accessibility
|
||||
|
||||
**Target Audience:** Developers, Product Managers, QA Engineers
|
||||
|
||||
> 📌 **Related Documents:**
|
||||
> - `_bmad-output/ux-design/conversational-ux-specification.md` - Complete Conversational UX Spec
|
||||
> - `_bmad-output/planning-artifacts/prd.md` - Product Requirements
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
2. [Conversational UX Architecture](#conversational-ux-architecture) ⭐ NEW
|
||||
3. [Information Architecture](#information-architecture)
|
||||
4. [User Flows](#user-flows)
|
||||
5. [Wireframes](#wireframes)
|
||||
6. [Embedded Widget Components](#embedded-widget-components) ⭐ NEW
|
||||
7. [Design System](#design-system)
|
||||
8. [Component Library](#component-library)
|
||||
9. [Interaction Patterns](#interaction-patterns)
|
||||
10. [Accessibility](#accessibility)
|
||||
11. [Implementation Notes](#implementation-notes)
|
||||
|
||||
---
|
||||
|
||||
## Design Principles
|
||||
|
||||
### 1. **Context-Aware Intelligence**
|
||||
- AI should understand what the user is viewing without explicit input
|
||||
### 1. **Conversation-First Interface** ⭐ UPDATED
|
||||
- **Chat is the PRIMARY interface** - all features accessible via natural language
|
||||
- AI understands context without explicit input (page detection, portfolio awareness)
|
||||
- Users interact through conversation, not navigation between screens
|
||||
- **Example:** "Add BULLA to watchlist" instead of clicking through menus
|
||||
|
||||
### 2. **AI as Proactive Advisor** ⭐ UPDATED
|
||||
- AI doesn't just respond - it **anticipates user needs**
|
||||
- Proactive alerts based on portfolio, watchlist, and market conditions
|
||||
- Personalized recommendations based on user's risk profile
|
||||
- **Example:** AI alerts user when a watched token shows unusual activity
|
||||
|
||||
### 3. **Embedded Widgets in Chat** ⭐ NEW
|
||||
- Crypto data displayed as **interactive widgets within chat messages**
|
||||
- Widgets have inline action buttons (Add to Watchlist, Set Alert)
|
||||
- No separate screens for Watchlist, Alerts, Portfolio - all embedded in chat
|
||||
- **Example:** Token analysis appears as a rich card with action buttons
|
||||
|
||||
### 4. **Context-Aware Intelligence**
|
||||
- AI understands 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
|
||||
- **Auto-detect tokens** on supported sites and pre-populate 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)
|
||||
### 5. **Speed & Efficiency**
|
||||
- Quick access to AI insights (natural language commands)
|
||||
- Keyboard shortcuts for power users
|
||||
- Instant feedback for all interactions
|
||||
- **Target: <1s token detection, <2s AI response start**
|
||||
|
||||
### 4. **Trust & Transparency**
|
||||
### 6. **Trust & Transparency**
|
||||
- Clear indication of AI reasoning (thinking steps)
|
||||
- Explicit data sources and confidence levels
|
||||
- Easy to verify AI suggestions
|
||||
- **Safety scores with detailed breakdown**
|
||||
|
||||
---
|
||||
|
||||
## User Flows
|
||||
## Conversational UX Architecture ⭐ NEW
|
||||
|
||||
> **Core Principle:** Chat is the primary interface. All crypto features are accessible through natural language and displayed as embedded widgets within the conversation.
|
||||
|
||||
### Interaction Model
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ CONVERSATIONAL INTERFACE │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ USER INPUT (Natural Language) │
|
||||
│ ├── "Research BULLA token" │
|
||||
│ ├── "Add to my watchlist" │
|
||||
│ ├── "Set alert if price drops 20%" │
|
||||
│ └── "Show my portfolio" │
|
||||
│ │
|
||||
│ ↓ │
|
||||
│ │
|
||||
│ AI PROCESSING │
|
||||
│ ├── Intent Recognition │
|
||||
│ ├── Context Injection (portfolio, watchlist, risk profile) │
|
||||
│ ├── Tool Calling (DexScreener, Safety Check, etc.) │
|
||||
│ └── Response Generation │
|
||||
│ │
|
||||
│ ↓ │
|
||||
│ │
|
||||
│ EMBEDDED WIDGET RESPONSE │
|
||||
│ ├── TokenAnalysisCard (price, safety, metrics) │
|
||||
│ ├── WatchlistWidget (inline list with actions) │
|
||||
│ ├── AlertWidget (confirmation with edit options) │
|
||||
│ └── ActionConfirmation (success/failure feedback) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Natural Language Commands
|
||||
|
||||
| User Says | AI Action | Widget Displayed |
|
||||
|-----------|-----------|------------------|
|
||||
| "Research BULLA" | Call DexScreener + Safety Check | TokenAnalysisCard |
|
||||
| "Is this safe?" | Call Safety Analysis | SafetyScoreWidget |
|
||||
| "Add to watchlist" | Execute add_to_watchlist tool | ActionConfirmation |
|
||||
| "Set price alert at $0.001" | Execute set_alert tool | AlertWidget |
|
||||
| "Show my watchlist" | Fetch user's watchlist | WatchlistWidget |
|
||||
| "What's trending on Solana?" | Call trending tokens API | TrendingTokensWidget |
|
||||
| "Analyze my portfolio" | Fetch portfolio + analysis | PortfolioWidget |
|
||||
|
||||
### Widget Types
|
||||
|
||||
1. **TokenAnalysisCard** - Full token analysis with price, safety, metrics
|
||||
2. **SafetyScoreWidget** - Detailed safety breakdown with risk factors
|
||||
3. **WatchlistWidget** - Inline watchlist with quick actions
|
||||
4. **AlertWidget** - Alert configuration/confirmation
|
||||
5. **ActionConfirmation** - Success/failure feedback for actions
|
||||
6. **TrendingTokensWidget** - List of trending tokens
|
||||
7. **PortfolioWidget** - Portfolio summary with P&L
|
||||
8. **ProactiveAlertCard** - AI-initiated alerts (price changes, whale activity)
|
||||
|
||||
### Action Types
|
||||
|
||||
| Type | Description | Example | Requires Confirmation |
|
||||
|------|-------------|---------|----------------------|
|
||||
| **Immediate** | Safe actions, auto-execute | Add to watchlist | No |
|
||||
| **Confirmation** | Potentially destructive | Clear all alerts | Yes |
|
||||
| **Advisory** | AI suggests, never executes | "Consider selling" | N/A (info only) |
|
||||
|
||||
---
|
||||
|
||||
## Information Architecture ⭐ UPDATED
|
||||
|
||||
```
|
||||
Side Panel (400px width) - CONVERSATIONAL INTERFACE
|
||||
├── Header (56px)
|
||||
│ ├── Logo + Brand
|
||||
│ ├── Search Space Selector
|
||||
│ └── Settings Menu
|
||||
├── Page Context Bar (conditional, 48px) ⭐ SIMPLIFIED
|
||||
│ ├── Detected Token: "BULLA/SOL on DexScreener"
|
||||
│ └── Quick Actions: [Analyze] [Watchlist] [Alert]
|
||||
├── Chat Area (flex-grow) ⭐ PRIMARY INTERFACE
|
||||
│ ├── Welcome State (suggestions)
|
||||
│ ├── Messages List
|
||||
│ │ ├── User Messages
|
||||
│ │ ├── AI Messages with Embedded Widgets
|
||||
│ │ │ ├── TokenAnalysisCard
|
||||
│ │ │ ├── SafetyScoreWidget
|
||||
│ │ │ ├── WatchlistWidget
|
||||
│ │ │ ├── AlertWidget
|
||||
│ │ │ └── ActionConfirmation
|
||||
│ │ └── Proactive Alert Cards
|
||||
│ └── Thinking Steps (collapsible)
|
||||
├── Suggestion Chips (40px)
|
||||
│ └── Context-aware quick actions
|
||||
├── Input Area (80px)
|
||||
│ ├── Text Input
|
||||
│ └── Send Button
|
||||
└── Quick Capture (48px sticky)
|
||||
```
|
||||
|
||||
**Key Changes from v2.0:**
|
||||
- ❌ Removed: Separate Watchlist Panel, Alert Configuration Modal, Portfolio Page
|
||||
- ✅ Added: Embedded widgets in chat, Proactive Alert Cards, Suggestion Chips
|
||||
- ✅ Simplified: Page Context Bar (just shows detected token + quick actions)
|
||||
|
||||
---
|
||||
|
||||
## User Flows ⭐ UPDATED FOR CONVERSATIONAL UX
|
||||
|
||||
### Flow 1: First-Time User Onboarding
|
||||
|
||||
|
|
@ -72,7 +213,7 @@ graph TD
|
|||
F --> H[Logged In State]
|
||||
G --> I[Limited Features]
|
||||
H --> J[Sync Settings from Web]
|
||||
J --> K[Ready to Use]
|
||||
J --> K[Ready to Use - Chat Interface]
|
||||
I --> K
|
||||
```
|
||||
|
||||
|
|
@ -89,51 +230,91 @@ graph TD
|
|||
|
||||
---
|
||||
|
||||
### Flow 2: Chat with AI about Token
|
||||
### Flow 2: Token Research via Conversation ⭐ UPDATED
|
||||
|
||||
```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]
|
||||
flowchart TD
|
||||
A[User visits DexScreener] --> B{Extension detects token}
|
||||
B -->|Yes| C[Show Page Context Bar]
|
||||
B -->|No| D[Show default chat]
|
||||
C --> E{User interaction}
|
||||
E -->|Click 'Analyze'| F[AI: "Analyzing BULLA..."]
|
||||
E -->|Type "Is this safe?"| F
|
||||
E -->|Type "Research this token"| F
|
||||
F --> G[Show thinking steps in chat]
|
||||
G --> H[Display TokenAnalysisCard widget]
|
||||
H --> I{User says/clicks}
|
||||
I -->|"Add to watchlist"| J[AI executes action]
|
||||
I -->|"Set alert at +50%"| K[AI executes action]
|
||||
I -->|"Tell me more about holders"| L[AI continues analysis]
|
||||
J --> M[ActionConfirmation widget]
|
||||
K --> N[AlertWidget in chat]
|
||||
L --> O[HolderAnalysisWidget]
|
||||
```
|
||||
|
||||
**Key Screens:**
|
||||
1. Token Info Card (context display)
|
||||
2. Chat Input (with suggestions)
|
||||
3. Streaming Response (thinking steps)
|
||||
4. Final Answer (with tool UIs)
|
||||
**Key Difference from v2.0:**
|
||||
- ❌ Old: Click button → Open modal → Fill form → Save
|
||||
- ✅ New: Say "add to watchlist" → AI executes → Confirmation in chat
|
||||
|
||||
**Success Criteria:**
|
||||
- Token detection happens in <1 second
|
||||
- User can ask question in <5 seconds
|
||||
- AI response starts streaming in <2 seconds
|
||||
- User can complete any action via natural language
|
||||
- All results displayed as embedded widgets in chat
|
||||
|
||||
---
|
||||
|
||||
### Flow 3: Quick Capture Page
|
||||
### Flow 3: Proactive Alert Flow ⭐ NEW
|
||||
|
||||
```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]
|
||||
flowchart TD
|
||||
A[Background Monitor] --> B{Trigger detected}
|
||||
B -->|Price change| C[Evaluate against user alerts]
|
||||
B -->|Whale activity| D[Check if user watches token]
|
||||
B -->|Safety change| E[Check user's watchlist]
|
||||
C --> F{User has alert?}
|
||||
D --> F
|
||||
E --> F
|
||||
F -->|Yes| G[Context Engine]
|
||||
F -->|No| H[Ignore]
|
||||
G --> I[AI Personalizer]
|
||||
I --> J[Generate contextual message]
|
||||
J --> K[Display ProactiveAlertCard in chat]
|
||||
K --> L{User response}
|
||||
L -->|"Tell me more"| M[AI provides details]
|
||||
L -->|"Dismiss"| N[Mark as read]
|
||||
L -->|"Sell recommendation?"| O[AI gives advisory]
|
||||
```
|
||||
|
||||
**Example Proactive Alert:**
|
||||
```
|
||||
🔔 AI: "Heads up! BULLA just pumped +45% in the last hour.
|
||||
You have 500K tokens worth ~$6,200 now.
|
||||
|
||||
Based on your moderate risk profile, you might want to
|
||||
consider taking some profits.
|
||||
|
||||
[View Details] [Set New Alert] [Dismiss]"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Flow 4: Quick Capture Page
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[User clicks Save Page] --> B{Logged in?}
|
||||
B -->|No| C[Show login prompt]
|
||||
B -->|Yes| D[Show Search Space selector]
|
||||
C --> E[OAuth login]
|
||||
E --> D
|
||||
D --> F[User selects space]
|
||||
F --> G[Capture page content]
|
||||
G --> H[Extract metadata]
|
||||
H --> I[Upload to backend]
|
||||
I --> J{Success?}
|
||||
J -->|Yes| K[Show success toast]
|
||||
J -->|No| L[Show error + retry]
|
||||
K --> M[Page saved to knowledge base]
|
||||
```
|
||||
|
||||
**Key Screens:**
|
||||
|
|
@ -149,79 +330,271 @@ graph TD
|
|||
|
||||
---
|
||||
|
||||
## Wireframes
|
||||
## Wireframes ⭐ UPDATED FOR CONVERSATIONAL UX
|
||||
|
||||
> **⚠️ TODO:** Add wireframes for all screens below. Use Figma, Excalidraw, or hand-drawn sketches.
|
||||
> **Key Change:** All wireframes now show embedded widgets within the chat interface, not separate screens.
|
||||
|
||||
### 1. Side Panel - Main Chat Interface
|
||||
### 1. Main Chat Interface with Page Context Bar
|
||||
|
||||
**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
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Crypto ▼] [⚙️] [👤]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ 📍 BULLA/SOL on DexScreener │
|
||||
│ $0.00001234 (+156%) [Analyze][Watch]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Good morning, Alex! 🌊 │
|
||||
│ │
|
||||
│ I see you're looking at BULLA. │
|
||||
│ Want me to analyze it for you? │
|
||||
│ │
|
||||
│ 💡 Quick actions: │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Is this token safe?" │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Add to my watchlist" │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ "Show trending on Solana" │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [What's trending?][My watchlist][Alerts]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Ask anything about crypto... [→] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 📸 Save this page to knowledge base │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**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
|
||||
- **Page Context Bar**: Shows detected token with quick actions
|
||||
- **AI Greeting**: Context-aware welcome message
|
||||
- **Suggestion Chips**: Clickable quick actions
|
||||
- **Chat Input**: Natural language input
|
||||
|
||||
---
|
||||
|
||||
### 2. Welcome Screen (First Launch)
|
||||
### 2. Token Analysis as Embedded Widget
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ │
|
||||
│ 🌊 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) │
|
||||
│ │
|
||||
└─────────────────────────────────────┘
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Crypto ▼] [⚙️] [👤]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ 📍 BULLA/SOL on DexScreener │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 👤 You: Is this token safe? │
|
||||
│ │
|
||||
│ 🧠 AI: Analyzing BULLA on Solana... │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ 🔍 Fetching price data... │ │
|
||||
│ │ 🛡️ Running safety analysis... │ │
|
||||
│ │ 👥 Checking holder distribution │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 🧠 AI: Here's my analysis of BULLA: │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ 📊 TokenAnalysisCard ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ 🪙 BULLA/SOL ││
|
||||
│ │ $0.00001234 ▲ +156.7% (24h) ││
|
||||
│ │ ││
|
||||
│ │ Vol: $1.2M | Liq: $450K | MC: $2.1M││
|
||||
│ │ ││
|
||||
│ │ 🛡️ Safety: 🟡 65/100 (Medium Risk) ││
|
||||
│ │ ████████░░ ││
|
||||
│ │ ││
|
||||
│ │ ✅ LP locked 6 months ││
|
||||
│ │ ✅ No mint authority ││
|
||||
│ │ ⚠️ Top 10 hold 45% ││
|
||||
│ │ 🔴 Similar to known rugs ││
|
||||
│ │ ││
|
||||
│ │ [➕ Watchlist] [🔔 Alert] [📊 More]││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ Based on your moderate risk profile, │
|
||||
│ I'd suggest a small position (2-5%). │
|
||||
│ Want me to add it to your watchlist? │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [Add to watchlist][Set alert][More info]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Ask follow-up question... [→] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- **Thinking Steps**: Collapsible, shows AI's process
|
||||
- **TokenAnalysisCard Widget**: Embedded in chat message
|
||||
- **Inline Action Buttons**: Add to watchlist, Set alert directly from widget
|
||||
- **Personalized Recommendation**: Based on user's risk profile
|
||||
- **Suggestion Chips**: Context-aware follow-up actions
|
||||
|
||||
---
|
||||
|
||||
### 3. Safety Analysis Response
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ [AI] 🛡️ Safety Analysis: BULLA/SOL │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ Overall Risk Score: 🟡 MEDIUM ││
|
||||
│ │ ████████░░ 65/100 ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ ✅ Positive Signals: │
|
||||
│ • Contract verified on Solscan │
|
||||
│ • No mint authority (can't create more)│
|
||||
│ • LP locked for 6 months │
|
||||
│ │
|
||||
│ ⚠️ Warning Signs: │
|
||||
│ • Top 10 holders own 45% of supply │
|
||||
│ • Token is only 3 days old │
|
||||
│ • Low social media presence │
|
||||
│ │
|
||||
│ 🔴 Red Flags: │
|
||||
│ • Similar contract to known rug pulls │
|
||||
│ │
|
||||
│ 📊 Holder Distribution: │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ Top 10: ████████░░ 45% ││
|
||||
│ │ Top 50: ██████████████░░ 72% ││
|
||||
│ │ Others: ██████░░░░░░░░░░ 28% ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ 💡 Recommendation: │
|
||||
│ Proceed with caution. Consider small │
|
||||
│ position size due to concentration │
|
||||
│ risk and young token age. │
|
||||
│ │
|
||||
│ Sources: Solscan, DexScreener, RugCheck│
|
||||
│ │
|
||||
│ [📋 Add to Watchlist] [🔔 Set Alert] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Risk Score Colors:**
|
||||
- 0-30: 🔴 High Risk (red)
|
||||
- 31-60: <20> Medium Risk (yellow)
|
||||
- 61-80: 🟢 Low Risk (green)
|
||||
- 81-100: ✅ Very Safe (bright green)
|
||||
|
||||
---
|
||||
|
||||
### 4. Watchlist Panel
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [📋 Watchlist] [⚙️] [👤] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ My Watchlist [+ Add] │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 BULLA/SOL ▲ +156.7% │ │
|
||||
│ │ $0.00001234 Vol: $1.2M │ │
|
||||
│ │ 🔔 Alert: Price > $0.00002 │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 PEPE/ETH ▼ -12.3% │ │
|
||||
│ │ $0.00000891 Vol: $45M │ │
|
||||
│ │ 🔔 Alert: Volume spike detected │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 🪙 WIF/SOL ▲ +8.2% │ │
|
||||
│ │ $2.34 Vol: $89M │ │
|
||||
│ │ ✓ No active alerts │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ Recent Alerts │
|
||||
├─────────────────────────────────────────┤
|
||||
│ 🔴 2m ago: BULLA whale sold 5% supply │
|
||||
│ 🟡 15m ago: PEPE unusual volume spike │
|
||||
│ 🟢 1h ago: WIF hit price target $2.30 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Ask about your watchlist... [📎][→]│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Alert Configuration Modal
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 🔔 Configure Alert for BULLA/SOL [×]│
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Alert Type: │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ ○ Price reaches │ │
|
||||
│ │ ○ Price change % (24h) │ │
|
||||
│ │ ● Volume spike │ │
|
||||
│ │ ○ Whale movement │ │
|
||||
│ │ ○ Liquidity change │ │
|
||||
│ │ ○ New holder concentration │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Condition: │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Volume increases by [ 200 ] % │ │
|
||||
│ │ within [ 1 hour ▼ ] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Notification: │
|
||||
│ ☑ Browser notification │
|
||||
│ ☑ Email alert │
|
||||
│ ☐ Telegram (connect in settings) │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 💾 Save Alert │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Alert Types:**
|
||||
- Price reaches target
|
||||
- Price change % (24h)
|
||||
- Volume spike
|
||||
- Whale movement (large transactions)
|
||||
- Liquidity change
|
||||
- Holder concentration change
|
||||
|
||||
---
|
||||
|
||||
### 6. 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:**
|
||||
|
|
@ -232,40 +605,7 @@ Width: 400px (default), resizable 300-600px
|
|||
|
||||
---
|
||||
|
||||
### 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
|
||||
### 7. Settings Dropdown
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
|
|
@ -279,6 +619,8 @@ Width: 400px (default), resizable 300-600px
|
|||
│ 🔗 Manage Connectors │ ← Link to web
|
||||
│ 💬 View All Chats │ ← Link to web
|
||||
│ ⚙️ Full Settings │ ← Link to web
|
||||
│ 📋 Manage Watchlist │ ← Link to web
|
||||
│ 🔔 Alert History │ ← Link to web
|
||||
│ │
|
||||
│ ───────────────────────────────── │
|
||||
│ │
|
||||
|
|
@ -713,13 +1055,185 @@ Width: 400px (default), resizable 300-600px
|
|||
## Approval & Sign-off
|
||||
|
||||
**Stakeholders:**
|
||||
- [ ] UX Designer: _______________ (Date: _______)
|
||||
- [x] UX Designer: Augment Agent (Date: 2026-02-02)
|
||||
- [ ] Product Manager: _______________ (Date: _______)
|
||||
- [ ] Tech Lead: _______________ (Date: _______)
|
||||
|
||||
**Status:** 🚧 DRAFT - Awaiting wireframes and design system completion
|
||||
**Status:** ✅ COMPLETE - Ready for developer handoff
|
||||
|
||||
---
|
||||
|
||||
**Document Version History:**
|
||||
- v3.0 (2026-02-02): **Conversational UX Update** - Major paradigm shift to chat-first interface with embedded widgets
|
||||
- v2.0 (2026-02-02): Complete UX design with wireframes, user flows, and crypto features
|
||||
- v1.0 (2026-02-02): Initial outline created
|
||||
|
||||
---
|
||||
|
||||
## Appendix: Conversational UX Wireframes (v3.0)
|
||||
|
||||
> **Note:** These wireframes replace the isolated component designs in sections 3-5 above. The new approach embeds all crypto features as widgets within the chat interface.
|
||||
|
||||
### A1. Action Confirmation Widget
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ │
|
||||
│ 👤 You: Add it to my watchlist │
|
||||
│ │
|
||||
│ 🧠 AI: Done! │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ ActionConfirmation ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ BULLA added to your watchlist ││
|
||||
│ │ ││
|
||||
│ │ I've also set up default alerts: ││
|
||||
│ │ - Price change +/-20% ││
|
||||
│ │ - Liquidity drop >10% ││
|
||||
│ │ - Whale movement >$50K ││
|
||||
│ │ ││
|
||||
│ │ [View Watchlist] [Edit Alerts] ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ Anything else you'd like to know │
|
||||
│ about BULLA or other tokens? │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [Show watchlist][Research another token]│
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### A2. Watchlist Widget (Embedded in Chat)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ │
|
||||
│ 👤 You: Show my watchlist │
|
||||
│ │
|
||||
│ 🧠 AI: Here's your watchlist: │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ WatchlistWidget ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ BULLA/SOL +156.7% ││
|
||||
│ │ $0.00001234 3 alerts ││
|
||||
│ │ [Analyze] [Remove] ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ PEPE/ETH -12.3% ││
|
||||
│ │ $0.00000891 1 alert ││
|
||||
│ │ [Analyze] [Remove] ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ WIF/SOL +8.2% ││
|
||||
│ │ $2.34 No alerts ││
|
||||
│ │ [Analyze] [Remove] ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ Total: 3 tokens | [+ Add Token] ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ BULLA is up 156% - your best performer!│
|
||||
│ Want me to analyze if it's time to │
|
||||
│ take profits? │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [Analyze BULLA][Add token][Clear all] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Key Difference from v2.0:**
|
||||
- Old: Separate Watchlist Panel (navigation required)
|
||||
- New: Watchlist displayed inline in chat when requested
|
||||
|
||||
---
|
||||
|
||||
### A3. Proactive Alert Card
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ │
|
||||
│ AI Alert (just now) │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ ProactiveAlertCard ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ BULLA just pumped +45% in 1 hour! ││
|
||||
│ │ ││
|
||||
│ │ Current: $0.00001789 ││
|
||||
│ │ Your entry: $0.00000500 ││
|
||||
│ │ Your P&L: +257% (~$3,200) ││
|
||||
│ │ ││
|
||||
│ │ Warning: Volume spike (5x avg) ││
|
||||
│ │ Warning: Whale sold 2% of supply ││
|
||||
│ │ ││
|
||||
│ │ [View Details] [Set New Alert] ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ Based on your moderate risk profile, │
|
||||
│ you might want to consider taking │
|
||||
│ some profits. This is just a │
|
||||
│ suggestion - I won't execute trades. │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [Tell me more][Dismiss][Set sell alert] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- **Proactive**: AI initiates the alert, not user
|
||||
- **Contextual**: Shows user's position and P&L
|
||||
- **Advisory**: Suggests action but doesn't execute
|
||||
- **Actionable**: Quick follow-up options
|
||||
|
||||
---
|
||||
|
||||
### A4. Alert Configuration via Conversation
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ │
|
||||
│ 👤 You: Set alert if BULLA drops 20% │
|
||||
│ │
|
||||
│ 🧠 AI: I'll set that up for you: │
|
||||
│ ┌─────────────────────────────────────┐│
|
||||
│ │ AlertWidget ││
|
||||
│ │ ───────────────────────────────── ││
|
||||
│ │ Alert Created ││
|
||||
│ │ ││
|
||||
│ │ Token: BULLA/SOL ││
|
||||
│ │ Condition: Price drops 20% ││
|
||||
│ │ Current: $0.00001234 ││
|
||||
│ │ Trigger at: $0.00000987 ││
|
||||
│ │ ││
|
||||
│ │ Notify via: ││
|
||||
│ │ [x] Browser notification ││
|
||||
│ │ [x] In-app alert ││
|
||||
│ │ [ ] Email (not configured) ││
|
||||
│ │ ││
|
||||
│ │ [Edit] [Delete] [Add Another] ││
|
||||
│ └─────────────────────────────────────┘│
|
||||
│ │
|
||||
│ Done! I'll notify you if BULLA drops │
|
||||
│ 20% from current price. Want to set │
|
||||
│ any other alerts? │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [View all alerts][Set another][Done] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Key Difference from v2.0:**
|
||||
- Old: Open modal -> Select type -> Fill form -> Save
|
||||
- New: Say "set alert if drops 20%" -> AI creates -> Confirm in chat
|
||||
|
||||
---
|
||||
|
||||
### A5. Summary: v2.0 vs v3.0 Comparison
|
||||
|
||||
| Feature | v2.0 (Isolated Components) | v3.0 (Conversational) |
|
||||
|---------|---------------------------|----------------------|
|
||||
| **Watchlist** | Separate panel with navigation | Embedded widget in chat |
|
||||
| **Alerts** | Modal form with dropdowns | Natural language command |
|
||||
| **Token Analysis** | Context card + separate response | Embedded TokenAnalysisCard |
|
||||
| **Portfolio** | Separate page | Inline PortfolioWidget |
|
||||
| **User Interaction** | Click through menus | Type natural language |
|
||||
| **AI Role** | Responds to queries | Proactively advises |
|
||||
| **Actions** | Manual form submission | AI executes on command |
|
||||
|
|
|
|||
329
_bmad-output/ux-design/ux-analysis-report.md
Normal file
329
_bmad-output/ux-design/ux-analysis-report.md
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
# SurfSense 2.0 - UX/UI Analysis Report
|
||||
|
||||
**Date:** 2026-02-02
|
||||
**Analyst:** UX Designer (Augment Agent)
|
||||
**Status:** 🔍 ANALYSIS COMPLETE
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
This report analyzes the current UX/UI implementation of SurfSense 2.0 against the design specifications. The analysis reveals significant gaps between the documented designs and actual implementation, particularly in the browser extension.
|
||||
|
||||
### Overall Assessment
|
||||
|
||||
| Component | Spec Completion | UX Quality | Priority |
|
||||
|-----------|-----------------|------------|----------|
|
||||
| Web Dashboard | 75% | ⭐⭐⭐⭐ Good | Medium |
|
||||
| Browser Extension | 35% | ⭐⭐ Basic | **Critical** |
|
||||
| Design System | 60% | ⭐⭐⭐ Adequate | High |
|
||||
|
||||
---
|
||||
|
||||
## Part 1: Browser Extension Analysis
|
||||
|
||||
### 1.1 Current State vs Specification
|
||||
|
||||
| Component | Spec | Current | Gap |
|
||||
|-----------|------|---------|-----|
|
||||
| ChatHeader | Logo + Space Selector + Settings + User | Logo + Settings only | 🔴 Missing 50% |
|
||||
| ChatMessages | Streaming + Thinking Steps + Markdown | Basic bubbles | 🔴 Missing 80% |
|
||||
| ChatInput | Text + Attachments + Quick Actions | Text + Send only | 🔴 Missing 60% |
|
||||
| TokenInfoCard | Full stats + 4 actions + Watchlist | Basic stats + 3 actions | 🟡 Missing 30% |
|
||||
| QuickCapture | Space selector + States + Animation | Basic button | 🟡 Missing 50% |
|
||||
| WatchlistPanel | Full watchlist management | ❌ Not implemented | 🔴 Missing 100% |
|
||||
| AlertConfigModal | Alert configuration UI | ❌ Not implemented | 🔴 Missing 100% |
|
||||
| SafetyScoreDisplay | Risk score visualization | ❌ Not implemented | 🔴 Missing 100% |
|
||||
| Welcome Screen | Greeting + Suggestions | Empty state only | 🔴 Missing 70% |
|
||||
| Settings Dropdown | Full settings menu | Icon only | 🔴 Missing 90% |
|
||||
|
||||
### 1.2 Critical Issues
|
||||
|
||||
#### 🔴 Issue #1: No Backend Integration
|
||||
**Current:** ChatInterface uses placeholder responses with setTimeout
|
||||
**Impact:** Extension is non-functional for actual AI chat
|
||||
**Fix:** Integrate with backend streaming API
|
||||
|
||||
```typescript
|
||||
// Current (ChatInterface.tsx line 35-46)
|
||||
setTimeout(() => {
|
||||
setMessages((prev) => [...prev, { content: "Placeholder response" }]);
|
||||
}, 1000);
|
||||
|
||||
// Should be: Stream from backend API
|
||||
```
|
||||
|
||||
#### 🔴 Issue #2: Missing Thinking Steps
|
||||
**Current:** No visualization of AI reasoning process
|
||||
**Impact:** Users don't understand what AI is doing
|
||||
**Fix:** Port ThinkingStepsDisplay from web dashboard
|
||||
|
||||
#### 🔴 Issue #3: No Welcome Experience
|
||||
**Current:** Empty "Start a conversation..." text
|
||||
**Impact:** Poor first-time user experience
|
||||
**Fix:** Add greeting + suggestion cards per spec
|
||||
|
||||
#### 🔴 Issue #4: Incomplete TokenInfoCard
|
||||
**Current:** Missing price change indicator, market cap, rug check
|
||||
**Impact:** Crypto users lack critical information
|
||||
**Fix:** Enhance component per wireframe spec
|
||||
|
||||
### 1.3 Missing Components (Priority Order)
|
||||
|
||||
1. **SafetyScoreDisplay** - Core crypto feature
|
||||
2. **WatchlistPanel** - Token tracking
|
||||
3. **AlertConfigModal** - Alert setup
|
||||
4. **ThinkingStepsDisplay** - AI transparency
|
||||
5. **Welcome Screen** - Onboarding
|
||||
6. **Settings Dropdown** - Full menu
|
||||
|
||||
---
|
||||
|
||||
## Part 2: Web Dashboard Analysis
|
||||
|
||||
### 2.1 Current Strengths ✅
|
||||
|
||||
| Feature | Implementation | Quality |
|
||||
|---------|---------------|---------|
|
||||
| Chat Interface | thread.tsx (708 lines) | ⭐⭐⭐⭐⭐ Excellent |
|
||||
| Streaming Responses | Full SSE support | ⭐⭐⭐⭐⭐ Excellent |
|
||||
| Thinking Steps | ThinkingStepsDisplay | ⭐⭐⭐⭐⭐ Excellent |
|
||||
| Document Mentions | @mention system | ⭐⭐⭐⭐⭐ Excellent |
|
||||
| Layout System | LayoutShell + Sidebar | ⭐⭐⭐⭐ Good |
|
||||
| Time-based Greeting | Dynamic greetings | ⭐⭐⭐⭐ Good |
|
||||
| Tool UIs | Podcast, Link Preview, etc. | ⭐⭐⭐⭐ Good |
|
||||
|
||||
### 2.2 Missing Crypto Features
|
||||
|
||||
| Feature | Status | Priority |
|
||||
|---------|--------|----------|
|
||||
| Crypto Dashboard Tab | ❌ Not started | P1 |
|
||||
| Portfolio Summary | ❌ Not started | P2 |
|
||||
| Watchlist Table | ❌ Not started | P1 |
|
||||
| Alerts Panel | ❌ Not started | P1 |
|
||||
| Market Overview Widget | ❌ Not started | P2 |
|
||||
| Trending Tokens | ❌ Not started | P3 |
|
||||
| $TOKEN shortcuts | ❌ Not started | P2 |
|
||||
| /command support | ❌ Not started | P2 |
|
||||
|
||||
---
|
||||
|
||||
## Part 3: Design System Analysis
|
||||
|
||||
### 3.1 Color Palette Gaps
|
||||
|
||||
**Specified but not implemented:**
|
||||
```css
|
||||
/* Crypto-specific colors - NOT IN CODEBASE */
|
||||
--crypto-bullish: #22C55E;
|
||||
--crypto-bearish: #EF4444;
|
||||
--chain-solana: #9945FF;
|
||||
--chain-ethereum: #627EEA;
|
||||
--risk-safe: #22C55E;
|
||||
--risk-danger: #EF4444;
|
||||
```
|
||||
|
||||
### 3.2 Typography Alignment
|
||||
|
||||
| Aspect | Spec | Current | Status |
|
||||
|--------|------|---------|--------|
|
||||
| Font Family | Inter | Inter | ✅ Aligned |
|
||||
| Font Sizes | 12-30px scale | Similar | ✅ Aligned |
|
||||
| Font Weights | 400-700 | 400-700 | ✅ Aligned |
|
||||
|
||||
### 3.3 Spacing Consistency
|
||||
|
||||
**Extension-specific spacing not implemented:**
|
||||
```css
|
||||
/* Spec defines but not used */
|
||||
--ext-space-xs: 4px;
|
||||
--ext-space-sm: 8px;
|
||||
--ext-header-height: 56px;
|
||||
--ext-quick-capture-height: 48px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 4: Prioritized Recommendations
|
||||
|
||||
### 🔴 P0 - Critical (This Week)
|
||||
|
||||
| # | Issue | Action | Effort |
|
||||
|---|-------|--------|--------|
|
||||
| 1 | Extension backend integration | Connect to streaming API | 3 days |
|
||||
| 2 | Add ThinkingStepsDisplay to extension | Port from web | 1 day |
|
||||
| 3 | Enhance TokenInfoCard | Add price change, mcap | 0.5 day |
|
||||
| 4 | Create Welcome Screen | Add greeting + suggestions | 1 day |
|
||||
|
||||
### 🟠 P1 - High Priority (Next 2 Weeks)
|
||||
|
||||
| # | Issue | Action | Effort |
|
||||
|---|-------|--------|--------|
|
||||
| 5 | SafetyScoreDisplay component | Create new component | 2 days |
|
||||
| 6 | WatchlistPanel | Create with local storage | 3 days |
|
||||
| 7 | ChatHeader enhancement | Add space selector, user icon | 1 day |
|
||||
| 8 | ChatInput enhancement | Add attachment button | 1 day |
|
||||
| 9 | Settings Dropdown | Full menu implementation | 1 day |
|
||||
|
||||
### 🟡 P2 - Medium Priority (Weeks 3-4)
|
||||
|
||||
| # | Issue | Action | Effort |
|
||||
|---|-------|--------|--------|
|
||||
| 10 | AlertConfigModal | Create alert configuration UI | 2 days |
|
||||
| 11 | Crypto Dashboard tab (web) | New dashboard page | 3 days |
|
||||
| 12 | Watchlist Table (web) | Full watchlist management | 2 days |
|
||||
| 13 | QuickCapture enhancement | Add space selector modal | 1 day |
|
||||
| 14 | Keyboard shortcuts | Implement Cmd+K, etc. | 1 day |
|
||||
|
||||
### 🟢 P3 - Low Priority (Month 2+)
|
||||
|
||||
| # | Issue | Action | Effort |
|
||||
|---|-------|--------|--------|
|
||||
| 15 | Market Overview widget | BTC/ETH/SOL prices | 2 days |
|
||||
| 16 | Trending Tokens carousel | Hot tokens display | 2 days |
|
||||
| 17 | $TOKEN shortcuts | Chat input parsing | 1 day |
|
||||
| 18 | Design system alignment | Crypto colors, animations | 2 days |
|
||||
| 19 | Accessibility audit | ARIA, keyboard nav | 2 days |
|
||||
|
||||
---
|
||||
|
||||
## Part 5: Component-Level Recommendations
|
||||
|
||||
### 5.1 TokenInfoCard Improvements
|
||||
|
||||
**Current:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🪙 Token Symbol │
|
||||
│ chain • address... │
|
||||
│ Price | Vol | Liquidity │
|
||||
│ [Safety] [Holders] [Predict] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Recommended:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🪙 BULLA / SOL │
|
||||
│ Solana • CA: 7xKX...3nPq [⭐] │ ← Add to watchlist
|
||||
│ │
|
||||
│ $0.00001234 ▲ +156.7% │ ← Price change indicator
|
||||
│ 24h change │
|
||||
│ │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ Vol 24h │ │Liquidity│ │ MCap │ │ ← Add Market Cap
|
||||
│ │ $1.2M │ │ $450K │ │ $2.1M │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||||
│ │
|
||||
│ [🛡️Safety][👥Holders][📈Predict][⚠️Rug]│ ← Add Rug check
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.2 ChatHeader Improvements
|
||||
|
||||
**Current:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [Logo] SurfSense [⚙️] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Recommended:**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🌊 SurfSense [Crypto ▼] [⚙️] [👤] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.3 Welcome Screen Implementation
|
||||
|
||||
**Current:** Empty state with "Start a conversation..."
|
||||
|
||||
**Recommended:** Time-based greeting + suggestion cards (see wireframes in ux-design-specification.md)
|
||||
|
||||
---
|
||||
|
||||
## Part 6: User Flow Gaps
|
||||
|
||||
### 6.1 Token Safety Check Flow
|
||||
|
||||
| Step | Spec | Current | Status |
|
||||
|------|------|---------|--------|
|
||||
| 1 | User clicks Safety button | ✅ Button exists | ✅ |
|
||||
| 2 | API call to safety endpoint | ❌ Not implemented | 🔴 |
|
||||
| 3 | Loading state during analysis | ❌ Not implemented | 🔴 |
|
||||
| 4 | Display SafetyScoreDisplay | ❌ Component missing | 🔴 |
|
||||
| 5 | Add to Watchlist action | ❌ Not implemented | 🔴 |
|
||||
| 6 | Set Alert action | ❌ Not implemented | 🔴 |
|
||||
|
||||
### 6.2 Quick Capture Flow
|
||||
|
||||
| Step | Spec | Current | Status |
|
||||
|------|------|---------|--------|
|
||||
| 1 | Click capture button | ✅ Works | ✅ |
|
||||
| 2 | Select Search Space | ❌ No selector | 🟡 |
|
||||
| 3 | Show loading state | ❌ No loading UI | 🟡 |
|
||||
| 4 | Success toast | ✅ Works | ✅ |
|
||||
|
||||
---
|
||||
|
||||
## Part 7: Accessibility Gaps
|
||||
|
||||
| Requirement | Status | Priority |
|
||||
|-------------|--------|----------|
|
||||
| Keyboard navigation | ❌ Missing | P2 |
|
||||
| ARIA labels | ❌ Missing | P2 |
|
||||
| Screen reader announcements | ❌ Missing | P3 |
|
||||
| Color contrast (WCAG AA) | ⚠️ Partial | P2 |
|
||||
| Focus indicators | ⚠️ Partial | P2 |
|
||||
|
||||
---
|
||||
|
||||
## Part 8: Action Items Summary
|
||||
|
||||
### Immediate Actions (This Sprint)
|
||||
|
||||
- [ ] **EXT-001**: Integrate extension with backend streaming API
|
||||
- [ ] **EXT-002**: Port ThinkingStepsDisplay to extension
|
||||
- [ ] **EXT-003**: Enhance TokenInfoCard with price change, mcap
|
||||
- [ ] **EXT-004**: Create Welcome Screen with suggestions
|
||||
- [ ] **EXT-005**: Implement SafetyScoreDisplay component
|
||||
|
||||
### Next Sprint
|
||||
|
||||
- [ ] **EXT-006**: Create WatchlistPanel component
|
||||
- [ ] **EXT-007**: Enhance ChatHeader with space selector
|
||||
- [ ] **EXT-008**: Add attachment button to ChatInput
|
||||
- [ ] **EXT-009**: Implement Settings Dropdown
|
||||
- [ ] **WEB-001**: Create Crypto Dashboard tab
|
||||
|
||||
### Backlog
|
||||
|
||||
- [ ] **EXT-010**: AlertConfigModal
|
||||
- [ ] **WEB-002**: Watchlist Table
|
||||
- [ ] **WEB-003**: Market Overview widget
|
||||
- [ ] **SYS-001**: Design system alignment
|
||||
- [ ] **ACC-001**: Accessibility audit
|
||||
|
||||
---
|
||||
|
||||
## Appendix: File References
|
||||
|
||||
| Component | File Path | Lines |
|
||||
|-----------|-----------|-------|
|
||||
| ChatInterface | `surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx` | 79 |
|
||||
| ChatHeader | `surfsense_browser_extension/sidepanel/chat/ChatHeader.tsx` | 25 |
|
||||
| ChatMessages | `surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx` | 34 |
|
||||
| ChatInput | `surfsense_browser_extension/sidepanel/chat/ChatInput.tsx` | 42 |
|
||||
| TokenInfoCard | `surfsense_browser_extension/sidepanel/dexscreener/TokenInfoCard.tsx` | 83 |
|
||||
| QuickCapture | `surfsense_browser_extension/sidepanel/chat/QuickCapture.tsx` | 50 |
|
||||
| Thread (Web) | `surfsense_web/components/assistant-ui/thread.tsx` | 708 |
|
||||
| UX Spec | `_bmad-output/planning-artifacts/ux-design-specification.md` | 813 |
|
||||
| Extension UX | `_bmad-output/ux-design/extension-ux-design.md` | 933 |
|
||||
|
||||
---
|
||||
|
||||
**Report Status:** ✅ COMPLETE
|
||||
**Next Review:** After P0 items completed
|
||||
**Owner:** UX Designer
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue