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/SafetyBadge.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Shield, ShieldAlert, ShieldCheck, ShieldX } from "lucide-react";
+import { getSafetyLabel } from "@/lib/mock/cryptoMockData";
+
+interface SafetyBadgeProps {
+    score: number;
+    size?: "sm" | "md" | "lg";
+    showScore?: boolean;
+    className?: string;
+}
+
+const sizeClasses = {
+    sm: { badge: "px-1.5 py-0.5 text-xs", icon: "h-3 w-3" },
+    md: { badge: "px-2 py-1 text-sm", icon: "h-4 w-4" },
+    lg: { badge: "px-3 py-1.5 text-base", icon: "h-5 w-5" },
+};
+
+function getScoreConfig(score: number) {
+    if (score >= 80) {
+        return {
+            color: "bg-green-500/10 text-green-600 border-green-500/20",
+            Icon: ShieldCheck,
+        };
+    }
+    if (score >= 60) {
+        return {
+            color: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
+            Icon: Shield,
+        };
+    }
+    if (score >= 40) {
+        return {
+            color: "bg-orange-500/10 text-orange-600 border-orange-500/20",
+            Icon: ShieldAlert,
+        };
+    }
+    return {
+        color: "bg-red-500/10 text-red-600 border-red-500/20",
+        Icon: ShieldX,
+    };
+}
+
+export function SafetyBadge({ score, size = "md", showScore = true, className }: SafetyBadgeProps) {
+    const { color, Icon } = getScoreConfig(score);
+    const label = getSafetyLabel(score);
+
+    return (
+        <div
+            className={cn(
+                "inline-flex items-center gap-1 rounded-full border font-medium",
+                color,
+                sizeClasses[size].badge,
+                className
+            )}
+        >
+            <Icon className={sizeClasses[size].icon} />
+            <span>{label}</span>
+            {showScore && <span className="opacity-70">({score})</span>}
+        </div>
+    );
+}
+