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.

surfsense_web/components/crypto/ChainIcon.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ChainType } from "@/lib/mock/cryptoMockData";
+
+interface ChainIconProps {
+    chain: ChainType;
+    size?: "sm" | "md" | "lg";
+    showName?: boolean;
+    className?: string;
+}
+
+const chainConfig: Record<ChainType, { color: string; icon: string; name: string }> = {
+    solana: { color: "#9945FF", icon: "◎", name: "Solana" },
+    ethereum: { color: "#627EEA", icon: "Ξ", name: "Ethereum" },
+    base: { color: "#0052FF", icon: "🔵", name: "Base" },
+    arbitrum: { color: "#28A0F0", icon: "🔷", name: "Arbitrum" },
+    polygon: { color: "#8247E5", icon: "⬡", name: "Polygon" },
+    bsc: { color: "#F0B90B", icon: "⬢", name: "BNB Chain" },
+};
+
+const sizeClasses = {
+    sm: "h-4 w-4 text-xs",
+    md: "h-5 w-5 text-sm",
+    lg: "h-6 w-6 text-base",
+};
+
+export function ChainIcon({ chain, size = "md", showName = false, className }: ChainIconProps) {
+    const config = chainConfig[chain] || { color: "#888888", icon: "?", name: chain };
+
+    return (
+        <div className={cn("flex items-center gap-1.5", className)}>
+            <span
+                className={cn(
+                    "flex items-center justify-center rounded-full",
+                    sizeClasses[size]
+                )}
+                style={{ backgroundColor: `${config.color}20`, color: config.color }}
+            >
+                {config.icon}
+            </span>
+            {showName && (
+                <span className="text-sm text-muted-foreground">{config.name}</span>
+            )}
+        </div>
+    );
+}
+