feat(chat): integrate Epic 2, 3, 4 widgets into chat interface

- Create 5 widget wrappers for inline chat display:
  * WhaleActivityWidget - Wraps WhaleActivityFeed for whale transaction display
  * TradingSuggestionWidget - Wraps TradingSuggestionPanel for entry/exit suggestions
  * PortfolioWidget - Wraps PortfolioPanel for portfolio tracking
  * ChartCaptureWidget - Wraps ChartCapturePanel for chart screenshots
  * ThreadGeneratorWidget - Wraps ThreadGeneratorPanel for Twitter threads

- Update widgets/index.ts to export new widgets with Epic grouping

- Update ChatMessages.tsx:
  * Add 5 new widget types to MessageWidget union
  * Import new widget components and their types
  * Add renderWidget cases for all new widgets with proper callbacks
  * Update component documentation to list all supported widgets

- Widget integration pattern:
  * Widgets wrap panels in containers with consistent styling
  * All widgets support callback props for user interactions
  * Widgets can be embedded inline in assistant messages
  * Widget actions are handled via onWidgetAction callback

Enables AI to display Epic 2, 3, 4 panels inline in chat conversations

surfsense_browser_extension/sidepanel/chat/ChatMessages.tsx

@@ -6,11 +6,20 @@ import {
     WatchlistWidget,
     AlertWidget,
     TokenAnalysisWidget,
+    WhaleActivityWidget,
+    TradingSuggestionWidget,
+    PortfolioWidget,
+    ChartCaptureWidget,
+    ThreadGeneratorWidget,
     type ProactiveAlertData,
     type WatchlistItem,
     type AlertConfigData,
     type TokenAnalysisData,
 } from "../widgets";
+import type { WhaleTransaction } from "../whale/WhaleActivityFeed";
+import type { TradingSuggestion } from "../analysis/TradingSuggestionPanel";
+import type { PortfolioData } from "../portfolio/PortfolioPanel";
+import type { ChartCaptureMetadata } from "../capture/ChartCapturePanel";
 
 // Widget types that can be embedded in messages
 export type MessageWidget =
@@ -18,7 +27,12 @@ export type MessageWidget =
     | { type: "proactive_alert"; alert: ProactiveAlertData; recommendation?: string }
     | { type: "watchlist"; tokens: WatchlistItem[] }
     | { type: "alert_config"; config: AlertConfigData; isNew?: boolean }
-    | { type: "token_analysis"; data: TokenAnalysisData; isInWatchlist?: boolean };
+    | { type: "token_analysis"; data: TokenAnalysisData; isInWatchlist?: boolean }
+    | { type: "whale_activity"; transactions: WhaleTransaction[] }
+    | { type: "trading_suggestion"; suggestion: TradingSuggestion }
+    | { type: "portfolio"; portfolio: PortfolioData }
+    | { type: "chart_capture"; metadata?: ChartCaptureMetadata }
+    | { type: "thread_generator"; tokenAddress?: string; tokenSymbol?: string; chain?: string };
 
 export interface Message {
     id: string;
@@ -48,6 +62,11 @@ export interface ChatMessagesProps {
  * - WatchlistWidget: Inline watchlist display
  * - AlertWidget: Alert configuration display
  * - TokenAnalysisWidget: Full token analysis
+ * - WhaleActivityWidget: Whale transaction feed (Epic 2)
+ * - TradingSuggestionWidget: Entry/exit suggestions (Epic 3)
+ * - PortfolioWidget: Portfolio tracker (Epic 3)
+ * - ChartCaptureWidget: Chart screenshot tool (Epic 4)
+ * - ThreadGeneratorWidget: Twitter thread generator (Epic 4)
  */
 export function ChatMessages({
     messages,
@@ -122,6 +141,51 @@ export function ChatMessages({
                         onAnalyzeFurther={() => handleWidgetAction("analyze_further", widget.data)}
                     />
                 );
+            case "whale_activity":
+                return (
+                    <WhaleActivityWidget
+                        transactions={widget.transactions}
+                        onTrackWallet={(address) => handleWidgetAction("track_wallet", address)}
+                        onViewTransaction={(txHash) => handleWidgetAction("view_transaction", txHash)}
+                    />
+                );
+            case "trading_suggestion":
+                return (
+                    <TradingSuggestionWidget
+                        suggestion={widget.suggestion}
+                        onSetAlerts={() => handleWidgetAction("set_alerts", widget.suggestion)}
+                        onViewChart={() => handleWidgetAction("view_chart", widget.suggestion)}
+                    />
+                );
+            case "portfolio":
+                return (
+                    <PortfolioWidget
+                        portfolio={widget.portfolio}
+                        onRefresh={() => handleWidgetAction("refresh_portfolio")}
+                        onAnalyzeToken={(holding) => handleWidgetAction("analyze_token", holding)}
+                        onSetAlert={(holding) => handleWidgetAction("set_alert", holding)}
+                        onViewToken={(holding) => handleWidgetAction("view_token", holding)}
+                        onAddPosition={() => handleWidgetAction("add_position")}
+                    />
+                );
+            case "chart_capture":
+                return (
+                    <ChartCaptureWidget
+                        metadata={widget.metadata}
+                        onCapture={() => handleWidgetAction("capture_chart")}
+                        onExport={(format) => handleWidgetAction("export_chart", format)}
+                    />
+                );
+            case "thread_generator":
+                return (
+                    <ThreadGeneratorWidget
+                        tokenAddress={widget.tokenAddress}
+                        tokenSymbol={widget.tokenSymbol}
+                        chain={widget.chain}
+                        onGenerate={(request) => handleWidgetAction("generate_thread", request)}
+                        onExport={(format) => handleWidgetAction("export_thread", format)}
+                    />
+                );
             default:
                 return null;
         }

surfsense_browser_extension/sidepanel/widgets/ChartCaptureWidget.tsx

@@ -0,0 +1,31 @@
+import { ChartCapturePanel, type ChartCaptureMetadata } from "../capture/ChartCapturePanel";
+
+export interface ChartCaptureWidgetProps {
+    /** Current token metadata */
+    metadata?: ChartCaptureMetadata;
+    /** Callback when capture is clicked */
+    onCapture?: () => void;
+    /** Callback when export is clicked */
+    onExport?: (format: "twitter" | "telegram" | "instagram" | "clipboard") => void;
+}
+
+/**
+ * ChartCaptureWidget - Inline chart capture tool in chat
+ * Wraps ChartCapturePanel for conversational UX
+ */
+export function ChartCaptureWidget({
+    metadata,
+    onCapture,
+    onExport,
+}: ChartCaptureWidgetProps) {
+    return (
+        <div className="my-3 max-h-[600px] overflow-hidden rounded-lg border">
+            <ChartCapturePanel
+                metadata={metadata}
+                onCapture={onCapture}
+                onExport={onExport}
+            />
+        </div>
+    );
+}
+

surfsense_browser_extension/sidepanel/widgets/PortfolioWidget.tsx

@@ -0,0 +1,43 @@
+import { PortfolioPanel, type PortfolioData, type PortfolioHolding } from "../portfolio/PortfolioPanel";
+
+export interface PortfolioWidgetProps {
+    /** Portfolio data */
+    portfolio: PortfolioData;
+    /** Callback when refresh is clicked */
+    onRefresh?: () => void;
+    /** Callback when "Analyze" is clicked for a token */
+    onAnalyzeToken?: (holding: PortfolioHolding) => void;
+    /** Callback when "Set Alert" is clicked for a token */
+    onSetAlert?: (holding: PortfolioHolding) => void;
+    /** Callback when "View on DexScreener" is clicked */
+    onViewToken?: (holding: PortfolioHolding) => void;
+    /** Callback when "Add Manual Position" is clicked */
+    onAddPosition?: () => void;
+}
+
+/**
+ * PortfolioWidget - Inline portfolio display in chat
+ * Wraps PortfolioPanel for conversational UX
+ */
+export function PortfolioWidget({
+    portfolio,
+    onRefresh,
+    onAnalyzeToken,
+    onSetAlert,
+    onViewToken,
+    onAddPosition,
+}: PortfolioWidgetProps) {
+    return (
+        <div className="my-3 max-h-[600px] overflow-hidden rounded-lg border">
+            <PortfolioPanel
+                portfolio={portfolio}
+                onRefresh={onRefresh}
+                onAnalyzeToken={onAnalyzeToken}
+                onSetAlert={onSetAlert}
+                onViewToken={onViewToken}
+                onAddPosition={onAddPosition}
+            />
+        </div>
+    );
+}
+

surfsense_browser_extension/sidepanel/widgets/ThreadGeneratorWidget.tsx

@@ -0,0 +1,40 @@
+import { ThreadGeneratorPanel, type GeneratedThread } from "../content/ThreadGeneratorPanel";
+
+export interface ThreadGeneratorWidgetProps {
+    /** Current token info */
+    tokenAddress?: string;
+    tokenSymbol?: string;
+    chain?: string;
+    /** Generated thread (if available) */
+    generatedThread?: GeneratedThread;
+    /** Callback when thread is generated */
+    onGenerate?: (request: any) => void;
+    /** Callback when thread is exported */
+    onExport?: (format: "copy" | "twitter") => void;
+}
+
+/**
+ * ThreadGeneratorWidget - Inline thread generator in chat
+ * Wraps ThreadGeneratorPanel for conversational UX
+ */
+export function ThreadGeneratorWidget({
+    tokenAddress,
+    tokenSymbol,
+    chain,
+    generatedThread,
+    onGenerate,
+    onExport,
+}: ThreadGeneratorWidgetProps) {
+    return (
+        <div className="my-3 max-h-[600px] overflow-hidden rounded-lg border">
+            <ThreadGeneratorPanel
+                tokenAddress={tokenAddress}
+                tokenSymbol={tokenSymbol}
+                chain={chain}
+                onGenerate={onGenerate}
+                onExport={onExport}
+            />
+        </div>
+    );
+}
+

surfsense_browser_extension/sidepanel/widgets/TradingSuggestionWidget.tsx

@@ -0,0 +1,31 @@
+import { TradingSuggestionPanel, type TradingSuggestion } from "../analysis/TradingSuggestionPanel";
+
+export interface TradingSuggestionWidgetProps {
+    /** Trading suggestion data */
+    suggestion: TradingSuggestion;
+    /** Callback when "Set Alerts" is clicked */
+    onSetAlerts?: () => void;
+    /** Callback when "View Chart" is clicked */
+    onViewChart?: () => void;
+}
+
+/**
+ * TradingSuggestionWidget - Inline trading suggestion display in chat
+ * Wraps TradingSuggestionPanel for conversational UX
+ */
+export function TradingSuggestionWidget({
+    suggestion,
+    onSetAlerts,
+    onViewChart,
+}: TradingSuggestionWidgetProps) {
+    return (
+        <div className="my-3 max-h-[600px] overflow-hidden rounded-lg border">
+            <TradingSuggestionPanel
+                suggestion={suggestion}
+                onSetAlerts={onSetAlerts}
+                onViewChart={onViewChart}
+            />
+        </div>
+    );
+}
+

surfsense_browser_extension/sidepanel/widgets/WhaleActivityWidget.tsx

@@ -0,0 +1,31 @@
+import { WhaleActivityFeed, type WhaleTransaction } from "../whale/WhaleActivityFeed";
+
+export interface WhaleActivityWidgetProps {
+    /** List of whale transactions */
+    transactions: WhaleTransaction[];
+    /** Callback when a wallet is tracked */
+    onTrackWallet?: (address: string) => void;
+    /** Callback when a transaction is viewed */
+    onViewTransaction?: (txHash: string) => void;
+}
+
+/**
+ * WhaleActivityWidget - Inline whale activity display in chat
+ * Wraps WhaleActivityFeed for conversational UX
+ */
+export function WhaleActivityWidget({
+    transactions,
+    onTrackWallet,
+    onViewTransaction,
+}: WhaleActivityWidgetProps) {
+    return (
+        <div className="my-3">
+            <WhaleActivityFeed
+                transactions={transactions}
+                onTrackWallet={onTrackWallet}
+                onViewTransaction={onViewTransaction}
+            />
+        </div>
+    );
+}
+

surfsense_browser_extension/sidepanel/widgets/index.ts

@@ -7,3 +7,14 @@ export { WatchlistWidget, type WatchlistWidgetProps, type WatchlistItem } from "
 export { AlertWidget, type AlertWidgetProps, type AlertConfigData } from "./AlertWidget";
 export { TokenAnalysisWidget, type TokenAnalysisWidgetProps, type TokenAnalysisData } from "./TokenAnalysisWidget";
 
+// Epic 2: Smart Monitoring & Alerts
+export { WhaleActivityWidget, type WhaleActivityWidgetProps } from "./WhaleActivityWidget";
+
+// Epic 3: Trading Intelligence
+export { TradingSuggestionWidget, type TradingSuggestionWidgetProps } from "./TradingSuggestionWidget";
+export { PortfolioWidget, type PortfolioWidgetProps } from "./PortfolioWidget";
+
+// Epic 4: Content Creation & Productivity
+export { ChartCaptureWidget, type ChartCaptureWidgetProps } from "./ChartCaptureWidget";
+export { ThreadGeneratorWidget, type ThreadGeneratorWidgetProps } from "./ThreadGeneratorWidget";
+