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/tool-ui/crypto/trending-tokens.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { z } from "zod";
+import { cn } from "@/lib/utils";
+import { Flame, TrendingUp, TrendingDown, Star, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ChainIcon } from "@/components/crypto/ChainIcon";
+
+// Schema for trending token
+const TrendingTokenSchema = z.object({
+    symbol: z.string(),
+    name: z.string(),
+    chain: z.string(),
+    contractAddress: z.string().optional(),
+    price: z.number(),
+    priceChange24h: z.number(),
+    priceChange1h: z.number().optional(),
+    volume24h: z.number().optional(),
+    liquidity: z.number().optional(),
+    rank: z.number().optional(),
+});
+
+// Schema for trending tokens tool arguments
+export const TrendingTokensArgsSchema = z.object({
+    chain: z.string().optional(),
+    tokens: z.array(TrendingTokenSchema),
+    timeframe: z.string().optional(),
+});
+
+export type TrendingTokensArgs = z.infer<typeof TrendingTokensArgsSchema>;
+
+// Schema for trending tokens result
+export const TrendingTokensResultSchema = z.object({
+    success: z.boolean(),
+    message: z.string().optional(),
+});
+
+export type TrendingTokensResult = z.infer<typeof TrendingTokensResultSchema>;
+
+const formatPrice = (price: number): string => {
+    if (price < 0.00001) return `$${price.toExponential(2)}`;
+    if (price < 1) return `$${price.toFixed(6)}`;
+    return `$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+
+const formatLargeNumber = (num: number): string => {
+    if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
+    if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
+    if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
+    return `$${num.toFixed(2)}`;
+};
+
+/**
+ * TrendingTokensToolUI - Displays trending/hot tokens inline in chat
+ * Used when AI responds to "what's hot on Solana?" or "show trending tokens"
+ */
+export const TrendingTokensToolUI = makeAssistantToolUI<TrendingTokensArgs, TrendingTokensResult>({
+    toolName: "get_trending_tokens",
+    render: ({ args, status }) => {
+        const isLoading = status.type === "running";
+        const tokens = args.tokens || [];
+        const chain = args.chain || "all chains";
+        const timeframe = args.timeframe || "24h";
+
+        return (
+            <Card className="my-3 overflow-hidden">
+                <CardHeader className="pb-3">
+                    <CardTitle className="text-lg flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <Flame className="h-5 w-5 text-orange-500" />
+                            Trending on {chain}
+                            <Badge variant="secondary">{timeframe}</Badge>
+                            {isLoading && <Badge variant="outline" className="animate-pulse">Loading...</Badge>}
+                        </div>
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                    {tokens.length === 0 ? (
+                        <p className="text-muted-foreground text-center py-4">No trending tokens found</p>
+                    ) : (
+                        <div className="divide-y">
+                            {tokens.map((token, index) => (
+                                <div key={token.symbol + index} className="flex items-center justify-between py-3 hover:bg-muted/50 -mx-2 px-2 rounded cursor-pointer transition-colors">
+                                    <div className="flex items-center gap-3">
+                                        <span className="text-lg font-bold text-muted-foreground w-6">#{token.rank || index + 1}</span>
+                                        <ChainIcon chain={token.chain} size="sm" />
+                                        <div>
+                                            <div className="flex items-center gap-2">
+                                                <span className="font-medium">{token.symbol}</span>
+                                            </div>
+                                            <span className="text-xs text-muted-foreground">{token.name}</span>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-4">
+                                        <div className="text-right">
+                                            <p className="font-medium">{formatPrice(token.price)}</p>
+                                            <p className={cn("text-sm flex items-center justify-end gap-0.5", token.priceChange24h >= 0 ? "text-green-500" : "text-red-500")}>
+                                                {token.priceChange24h >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+                                                {token.priceChange24h >= 0 ? "+" : ""}{token.priceChange24h.toFixed(1)}%
+                                            </p>
+                                        </div>
+                                        {token.volume24h && (
+                                            <div className="text-right hidden md:block">
+                                                <p className="text-xs text-muted-foreground">Volume</p>
+                                                <p className="text-sm">{formatLargeNumber(token.volume24h)}</p>
+                                            </div>
+                                        )}
+                                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                                            <Star className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        );
+    },
+});
+