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.
2026-04-27 09:46:25 +02:00 · 2026-02-04 02:19:57 +07:00 · 2026-02-04 02:19:57 +07:00 · e4d020799b
commit e4d020799b
parent ad795eb830
58 changed files with 11315 additions and 661 deletions
--- a/_bmad-output/planning-artifacts/ux-design-directions.html
+++ b/_bmad-output/planning-artifacts/ux-design-directions.html
@ -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>
--- a/_bmad-output/planning-artifacts/ux-design-specification.md
+++ b/_bmad-output/planning-artifacts/ux-design-specification.md
@ -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