docs: update PRD with comprehensive extension features and UX integration strategy

- Added UX strategy: Extension for Quick Actions, Frontend for Management
- Organized features into 4 phases (Phase 1 completed)
- Added 14 new extension features (FR-EXT-07 to FR-EXT-17):
  * Smart Monitoring: Price alerts, whale tracking, rug pull detection
  * Trading Intelligence: Token analysis, entry/exit suggestions, portfolio tracker
  * Content Creation: Chart screenshots, AI thread generator
  * Productivity: Quick actions, notifications, keyboard shortcuts
- Added Feature Responsibility Matrix showing Extension vs Frontend roles
- Added Settings Sync strategy (FR-EXT-06) with deep links to frontend
- Documented state sync architecture: Extension ↔ Backend API ↔ Frontend

surfsense_browser_extension/sidepanel/chat/ChatInterface.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { usePageContext } from "../context/PageContextProvider";
+import { TokenInfoCard } from "../dexscreener/TokenInfoCard";
+import { QuickCapture } from "./QuickCapture";
+import { ChatHeader } from "./ChatHeader";
+import { ChatMessages } from "./ChatMessages";
+import { ChatInput } from "./ChatInput";
+
+/**
+ * Main chat interface for side panel
+ * Adapts UI based on page context (e.g., shows token card on DexScreener)
+ */
+export function ChatInterface() {
+    const { context } = usePageContext();
+    const [messages, setMessages] = useState<any[]>([]);
+    const [isStreaming, setIsStreaming] = useState(false);
+
+    const handleSendMessage = async (content: string) => {
+        // TODO: Implement message sending with backend API
+        console.log("Sending message:", content);
+        setIsStreaming(true);
+
+        // Add user message
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: `msg-${Date.now()}`,
+                role: "user",
+                content,
+                timestamp: new Date(),
+            },
+        ]);
+
+        // TODO: Stream response from backend
+        setTimeout(() => {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: `msg-${Date.now()}`,
+                    role: "assistant",
+                    content: "This is a placeholder response. Backend integration coming soon!",
+                    timestamp: new Date(),
+                },
+            ]);
+            setIsStreaming(false);
+        }, 1000);
+    };
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Header */}
+            <ChatHeader />
+
+            {/* Token info card (only on DexScreener) */}
+            {context?.pageType === "dexscreener" && context.tokenData && (
+                <TokenInfoCard tokenData={context.tokenData} />
+            )}
+
+            {/* Chat messages */}
+            <div className="flex-1 overflow-y-auto">
+                <ChatMessages messages={messages} />
+            </div>
+
+            {/* Chat input */}
+            <ChatInput
+                onSend={handleSendMessage}
+                disabled={isStreaming}
+                placeholder={
+                    context?.pageType === "dexscreener"
+                        ? "Ask about this token..."
+                        : "Ask me anything..."
+                }
+            />
+
+            {/* Quick capture button */}
+            <QuickCapture />
+        </div>
+    );
+}