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/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";
+