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_browser_extension/sidepanel/components/shared/ChainIcon.tsx

@@ -0,0 +1,129 @@
+import { cn } from "~/lib/utils";
+
+export type ChainType = "solana" | "ethereum" | "base" | "arbitrum" | "polygon" | "bsc" | "avalanche" | "unknown";
+
+export interface ChainIconProps {
+    /** Blockchain chain identifier */
+    chain: ChainType | string;
+    /** Size of the icon */
+    size?: "sm" | "md" | "lg";
+    /** Show chain name label */
+    showLabel?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+
+// Chain configuration with colors and display names
+const CHAIN_CONFIG: Record<string, { color: string; bgColor: string; label: string; emoji: string }> = {
+    solana: {
+        color: "#9945FF",
+        bgColor: "bg-purple-500/10",
+        label: "Solana",
+        emoji: "◎",
+    },
+    ethereum: {
+        color: "#627EEA",
+        bgColor: "bg-blue-500/10",
+        label: "Ethereum",
+        emoji: "Ξ",
+    },
+    base: {
+        color: "#0052FF",
+        bgColor: "bg-blue-600/10",
+        label: "Base",
+        emoji: "🔵",
+    },
+    arbitrum: {
+        color: "#28A0F0",
+        bgColor: "bg-sky-500/10",
+        label: "Arbitrum",
+        emoji: "🔷",
+    },
+    polygon: {
+        color: "#8247E5",
+        bgColor: "bg-violet-500/10",
+        label: "Polygon",
+        emoji: "⬡",
+    },
+    bsc: {
+        color: "#F0B90B",
+        bgColor: "bg-yellow-500/10",
+        label: "BSC",
+        emoji: "🟡",
+    },
+    avalanche: {
+        color: "#E84142",
+        bgColor: "bg-red-500/10",
+        label: "Avalanche",
+        emoji: "🔺",
+    },
+    unknown: {
+        color: "#6B7280",
+        bgColor: "bg-gray-500/10",
+        label: "Unknown",
+        emoji: "🔗",
+    },
+};
+
+/**
+ * ChainIcon - Displays blockchain chain icon with optional label
+ * 
+ * Features:
+ * - Chain-specific colors and icons
+ * - Multiple size variants
+ * - Optional chain name label
+ */
+export function ChainIcon({
+    chain,
+    size = "md",
+    showLabel = false,
+    className,
+}: ChainIconProps) {
+    const normalizedChain = chain.toLowerCase();
+    const config = CHAIN_CONFIG[normalizedChain] || CHAIN_CONFIG.unknown;
+
+    const sizeClasses = {
+        sm: "w-4 h-4 text-xs",
+        md: "w-5 h-5 text-sm",
+        lg: "w-6 h-6 text-base",
+    };
+
+    const labelSizes = {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+    };
+
+    return (
+        <div className={cn("flex items-center gap-1.5", className)}>
+            <div
+                className={cn(
+                    "rounded-full flex items-center justify-center",
+                    config.bgColor,
+                    sizeClasses[size]
+                )}
+                style={{ color: config.color }}
+                title={config.label}
+            >
+                <span>{config.emoji}</span>
+            </div>
+            {showLabel && (
+                <span
+                    className={cn("font-medium", labelSizes[size])}
+                    style={{ color: config.color }}
+                >
+                    {config.label}
+                </span>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Get chain color for custom styling
+ */
+export function getChainColor(chain: string): string {
+    const normalizedChain = chain.toLowerCase();
+    return CHAIN_CONFIG[normalizedChain]?.color || CHAIN_CONFIG.unknown.color;
+}
+