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/widgets/AlertWidget.tsx

@@ -0,0 +1,148 @@
+import { cn } from "~/lib/utils";
+import { Bell, CheckCircle, Edit, Trash2, Plus } from "lucide-react";
+import { Button } from "@/routes/ui/button";
+
+export interface AlertConfigData {
+    /** Token symbol */
+    tokenSymbol: string;
+    /** Alert condition description */
+    condition: string;
+    /** Current price */
+    currentPrice?: string;
+    /** Trigger price */
+    triggerPrice?: string;
+    /** Notification channels */
+    channels: {
+        browser: boolean;
+        inApp: boolean;
+        email: boolean;
+    };
+}
+
+export interface AlertWidgetProps {
+    /** Alert configuration data */
+    config: AlertConfigData;
+    /** Whether this is a new alert or existing */
+    isNew?: boolean;
+    /** Callback when edit is clicked */
+    onEdit?: () => void;
+    /** Callback when delete is clicked */
+    onDelete?: () => void;
+    /** Callback when add another is clicked */
+    onAddAnother?: () => void;
+    /** Callback when view all alerts is clicked */
+    onViewAll?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+
+/**
+ * AlertWidget - Embedded alert configuration widget for chat
+ * 
+ * Shows alert configuration inline in chat after user sets an alert
+ * via natural language command.
+ */
+export function AlertWidget({
+    config,
+    isNew = true,
+    onEdit,
+    onDelete,
+    onAddAnother,
+    onViewAll,
+    className,
+}: AlertWidgetProps) {
+    return (
+        <div className={cn(
+            "rounded-lg border bg-card p-4 my-2",
+            className
+        )}>
+            {/* Header */}
+            <div className="flex items-center gap-2 mb-3">
+                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                    {isNew ? (
+                        <CheckCircle className="h-4 w-4 text-green-500" />
+                    ) : (
+                        <Bell className="h-4 w-4 text-primary" />
+                    )}
+                </div>
+                <span className="font-medium text-sm">
+                    {isNew ? "Alert Created" : "AlertWidget"}
+                </span>
+            </div>
+
+            {/* Alert details */}
+            <div className="bg-muted/50 rounded-md p-3 mb-3 space-y-2">
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Token:</span>
+                    <span className="font-medium">{config.tokenSymbol}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Condition:</span>
+                    <span className="font-medium">{config.condition}</span>
+                </div>
+                {config.currentPrice && (
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Current:</span>
+                        <span>{config.currentPrice}</span>
+                    </div>
+                )}
+                {config.triggerPrice && (
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Trigger at:</span>
+                        <span className="font-medium text-primary">{config.triggerPrice}</span>
+                    </div>
+                )}
+
+                {/* Notification channels */}
+                <div className="pt-2 border-t">
+                    <p className="text-xs text-muted-foreground mb-1">Notify via:</p>
+                    <div className="flex flex-wrap gap-2">
+                        <span className={cn(
+                            "text-xs px-2 py-0.5 rounded",
+                            config.channels.browser ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground line-through"
+                        )}>
+                            {config.channels.browser ? "✓" : "✗"} Browser
+                        </span>
+                        <span className={cn(
+                            "text-xs px-2 py-0.5 rounded",
+                            config.channels.inApp ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground line-through"
+                        )}>
+                            {config.channels.inApp ? "✓" : "✗"} In-app
+                        </span>
+                        <span className={cn(
+                            "text-xs px-2 py-0.5 rounded",
+                            config.channels.email ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground line-through"
+                        )}>
+                            {config.channels.email ? "✓" : "✗"} Email
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex gap-2">
+                <Button size="sm" variant="outline" onClick={onEdit} className="flex-1">
+                    <Edit className="h-3 w-3 mr-1" />
+                    Edit
+                </Button>
+                <Button size="sm" variant="outline" onClick={onDelete}>
+                    <Trash2 className="h-3 w-3" />
+                </Button>
+                <Button size="sm" variant="outline" onClick={onAddAnother}>
+                    <Plus className="h-3 w-3" />
+                </Button>
+            </div>
+
+            {/* View all link */}
+            {onViewAll && (
+                <button
+                    onClick={onViewAll}
+                    className="w-full mt-2 text-xs text-primary hover:underline"
+                >
+                    View all alerts →
+                </button>
+            )}
+        </div>
+    );
+}
+