diff --git a/surfsense_web/app/preview/chat-comments/page.tsx b/surfsense_web/app/preview/chat-comments/page.tsx
index d5611202c..a99040b77 100644
--- a/surfsense_web/app/preview/chat-comments/page.tsx
+++ b/surfsense_web/app/preview/chat-comments/page.tsx
@@ -7,6 +7,7 @@ import type { CommentData } from "@/components/chat-comments/comment-item/types"
 import { CommentPanel } from "@/components/chat-comments/comment-panel/comment-panel";
 import { CommentThread } from "@/components/chat-comments/comment-thread/comment-thread";
 import type { CommentThreadData } from "@/components/chat-comments/comment-thread/types";
+import { CommentTrigger } from "@/components/chat-comments/comment-trigger/comment-trigger";
 import { MemberMentionPicker } from "@/components/chat-comments/member-mention-picker/member-mention-picker";
 import type { MemberOption } from "@/components/chat-comments/member-mention-picker/types";
 
@@ -328,10 +329,12 @@ export default function ChatCommentsPreviewPage() {
 	const [highlightedIndex, setHighlightedIndex] = useState(0);
 	const [selectedMember, setSelectedMember] = useState<MemberOption | null>(null);
 	const [submittedContent, setSubmittedContent] = useState<string | null>(null);
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const [isEmptyPanelOpen, setIsEmptyPanelOpen] = useState(false);
 
 	return (
 		<div className="min-h-screen bg-background p-8">
-			<div className="mx-auto max-w-4xl space-y-12">
+			<div className="mx-auto max-w-6xl space-y-12">
 				<div>
 					<h1 className="text-2xl font-bold">Chat Comments UI Preview</h1>
 					<p className="text-muted-foreground">
@@ -339,6 +342,88 @@ export default function ChatCommentsPreviewPage() {
 					</p>
 				</div>
 
+				{/* Full Integration Simulation */}
+				<section className="space-y-6">
+					<div>
+						<h2 className="text-xl font-semibold border-b pb-2">🎯 Full Integration Simulation</h2>
+						<p className="text-sm text-muted-foreground">
+							Two scenarios: no comments (hover to see trigger) and with comments (always visible).
+						</p>
+					</div>
+
+					{/* Scenario 1: No comments yet */}
+					<div className="space-y-2">
+						<h3 className="text-sm font-medium text-muted-foreground">No comments yet — hover to see trigger, click to add first comment</h3>
+						<div className="group flex items-start gap-2">
+							<div className="max-w-2xl rounded-lg border bg-muted/20 p-4">
+								<div className="space-y-2">
+									<div className="flex items-center gap-2">
+										<div className="size-8 rounded-full bg-gradient-to-br from-green-500 to-teal-600" />
+										<span className="font-medium">AI Assistant</span>
+									</div>
+									<p className="text-sm leading-relaxed">
+										This is an AI response with no comments yet. Hover over this message to reveal the comment trigger icon on the right. Click to open the panel and add the first comment.
+									</p>
+								</div>
+							</div>
+							<CommentTrigger 
+								commentCount={0} 
+								isOpen={isEmptyPanelOpen} 
+								onClick={() => setIsEmptyPanelOpen(!isEmptyPanelOpen)} 
+							/>
+							{isEmptyPanelOpen && (
+								<CommentPanel
+									messageId={102}
+									threads={[]}
+									members={fakeMembersData}
+									onCreateComment={(content) => alert(`Create first comment: ${content}`)}
+									onCreateReply={() => {}}
+									onEditComment={() => {}}
+									onDeleteComment={() => {}}
+									maxHeight={300}
+								/>
+							)}
+						</div>
+					</div>
+
+					{/* Scenario 2: Has comments */}
+					<div className="space-y-2">
+						<h3 className="text-sm font-medium text-muted-foreground">Has comments — trigger always visible, click to toggle panel</h3>
+						<div className="group flex items-start gap-2">
+							<div className="max-w-2xl rounded-lg border bg-muted/20 p-4">
+								<div className="space-y-2">
+									<div className="flex items-center gap-2">
+										<div className="size-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600" />
+										<span className="font-medium">AI Assistant</span>
+									</div>
+									<p className="text-sm leading-relaxed">
+										Based on my analysis, the quarterly revenue increased by 15% compared to the previous period. 
+										The main drivers were the expansion into new markets and improved customer retention rates. 
+										I recommend focusing on the following areas for continued growth...
+									</p>
+								</div>
+							</div>
+							<CommentTrigger 
+								commentCount={fakeThreadsData.length} 
+								isOpen={isPanelOpen} 
+								onClick={() => setIsPanelOpen(!isPanelOpen)} 
+							/>
+							{isPanelOpen && (
+								<CommentPanel
+									messageId={101}
+									threads={fakeThreadsData.slice(0, 2)}
+									members={fakeMembersData}
+									onCreateComment={(content) => alert(`Create comment: ${content}`)}
+									onCreateReply={(id, content) => alert(`Reply to ${id}: ${content}`)}
+									onEditComment={(id) => alert(`Edit ${id}`)}
+									onDeleteComment={(id) => alert(`Delete ${id}`)}
+									maxHeight={350}
+								/>
+							)}
+						</div>
+					</div>
+				</section>
+
 				{/* Comment Composer Section */}
 				<section className="space-y-4">
 					<h2 className="text-xl font-semibold border-b pb-2">Comment Composer</h2>
@@ -367,6 +452,43 @@ export default function ChatCommentsPreviewPage() {
 					)}
 				</section>
 
+				{/* Comment Trigger Section */}
+				<section className="space-y-4">
+					<h2 className="text-xl font-semibold border-b pb-2">Comment Trigger</h2>
+					<p className="text-sm text-muted-foreground">
+						Toggle button on AI messages. Clicking opens/closes the comment panel.
+					</p>
+
+					<div className="flex items-center gap-8">
+						<div className="space-y-2">
+							<h3 className="text-sm font-medium">No comments yet</h3>
+							<p className="text-xs text-muted-foreground">Hidden until hover</p>
+							<div className="group flex items-center gap-2 rounded-lg border bg-muted/30 p-4">
+								<span className="text-sm">AI response...</span>
+								<CommentTrigger commentCount={0} isOpen={false} onClick={() => {}} />
+							</div>
+						</div>
+
+						<div className="space-y-2">
+							<h3 className="text-sm font-medium">5 comments exist</h3>
+							<p className="text-xs text-muted-foreground">Always visible with count</p>
+							<div className="group flex items-center gap-2 rounded-lg border bg-muted/30 p-4">
+								<span className="text-sm">AI response...</span>
+								<CommentTrigger commentCount={5} isOpen={false} onClick={() => {}} />
+							</div>
+						</div>
+
+						<div className="space-y-2">
+							<h3 className="text-sm font-medium">Panel is open</h3>
+							<p className="text-xs text-muted-foreground">Active/pressed state</p>
+							<div className="group flex items-center gap-2 rounded-lg border bg-muted/30 p-4">
+								<span className="text-sm">AI response...</span>
+								<CommentTrigger commentCount={3} isOpen={true} onClick={() => {}} />
+							</div>
+						</div>
+					</div>
+				</section>
+
 				{/* Comment Panel Section */}
 				<section className="space-y-4">
 					<h2 className="text-xl font-semibold border-b pb-2">Comment Panel</h2>
diff --git a/surfsense_web/components/chat-comments/comment-panel/comment-panel.tsx b/surfsense_web/components/chat-comments/comment-panel/comment-panel.tsx
index 140197908..c09968d54 100644
--- a/surfsense_web/components/chat-comments/comment-panel/comment-panel.tsx
+++ b/surfsense_web/components/chat-comments/comment-panel/comment-panel.tsx
@@ -42,10 +42,11 @@ export function CommentPanel({
 	}
 
 	const hasThreads = threads.length > 0;
+	const showEmptyState = !hasThreads && !isComposerOpen;
 
 	return (
 		<div className="flex w-96 flex-col rounded-lg border bg-card">
-			{hasThreads ? (
+			{hasThreads && (
 				<div
 					className="overflow-y-auto"
 					style={{ maxHeight }}
@@ -65,7 +66,9 @@ export function CommentPanel({
 						))}
 					</div>
 				</div>
-			) : (
+			)}
+
+			{showEmptyState && (
 				<div className="flex min-h-[120px] flex-col items-center justify-center gap-2 p-4 text-center">
 					<MessageSquarePlus className="size-8 text-muted-foreground/50" />
 					<p className="text-sm text-muted-foreground">No comments yet</p>
@@ -75,7 +78,7 @@ export function CommentPanel({
 				</div>
 			)}
 
-			<div className="border-t p-3">
+			<div className={showEmptyState ? "border-t p-3" : "p-3"}>
 				{isComposerOpen ? (
 					<CommentComposer
 						members={members}
diff --git a/surfsense_web/components/chat-comments/comment-trigger/comment-trigger.tsx b/surfsense_web/components/chat-comments/comment-trigger/comment-trigger.tsx
new file mode 100644
index 000000000..5db7a6daf
--- /dev/null
+++ b/surfsense_web/components/chat-comments/comment-trigger/comment-trigger.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { MessageSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { CommentTriggerProps } from "./types";
+
+export function CommentTrigger({ commentCount, isOpen, onClick }: CommentTriggerProps) {
+	const hasComments = commentCount > 0;
+
+	return (
+		<Button
+			variant={isOpen ? "secondary" : "ghost"}
+			size="sm"
+			className={cn(
+				"h-8 gap-1.5 px-2 transition-opacity",
+				isOpen ? "text-foreground" : "text-muted-foreground",
+				!hasComments && !isOpen && "opacity-0 group-hover:opacity-100"
+			)}
+			onClick={onClick}
+		>
+			<MessageSquare className={cn("size-4", isOpen && "fill-current")} />
+			{hasComments && (
+				<span className="min-w-[1.25rem] text-xs font-medium">{commentCount}</span>
+			)}
+		</Button>
+	);
+}
+
diff --git a/surfsense_web/components/chat-comments/comment-trigger/types.ts b/surfsense_web/components/chat-comments/comment-trigger/types.ts
new file mode 100644
index 000000000..b9c33b2e9
--- /dev/null
+++ b/surfsense_web/components/chat-comments/comment-trigger/types.ts
@@ -0,0 +1,6 @@
+export interface CommentTriggerProps {
+	commentCount: number;
+	isOpen: boolean;
+	onClick: () => void;
+}
+