diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index df7ce3484..b2ca9d729 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -5,10 +5,14 @@ import {
 	MessagePrimitive,
 	useAssistantState,
 } from "@assistant-ui/react";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { CheckIcon, CopyIcon, DownloadIcon, RefreshCwIcon } from "lucide-react";
 import type { FC } from "react";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+import {
+	addingCommentToMessageIdAtom,
+	commentsEnabledAtom,
+} from "@/atoms/chat/current-thread.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { BranchPicker } from "@/components/assistant-ui/branch-picker";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
@@ -88,44 +92,80 @@ function parseMessageId(assistantUiMessageId: string | undefined): number | null
 }
 
 export const AssistantMessage: FC = () => {
-	const [isCommentPanelOpen, setIsCommentPanelOpen] = useState(false);
+	const [messageHeight, setMessageHeight] = useState<number | undefined>(undefined);
+	const messageRef = useRef<HTMLDivElement>(null);
 	const messageId = useAssistantState(({ message }) => message?.id);
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const dbMessageId = parseMessageId(messageId);
+	const commentsEnabled = useAtomValue(commentsEnabledAtom);
+	const [addingCommentToMessageId, setAddingCommentToMessageId] = useAtom(
+		addingCommentToMessageIdAtom
+	);
+
+	const isThreadRunning = useAssistantState(({ thread }) => thread.isRunning);
+	const isLastMessage = useAssistantState(({ message }) => message?.isLast ?? false);
+	const isMessageStreaming = isThreadRunning && isLastMessage;
 
 	const { data: commentsData } = useComments({
 		messageId: dbMessageId ?? 0,
 		enabled: !!dbMessageId,
 	});
 
-	const commentCount = commentsData?.total_count ?? 0;
+	const hasComments = (commentsData?.total_count ?? 0) > 0;
+	const isAddingComment = dbMessageId !== null && addingCommentToMessageId === dbMessageId;
+	const showCommentPanel = hasComments || isAddingComment;
+
+	const handleToggleAddComment = () => {
+		if (!dbMessageId) return;
+		setAddingCommentToMessageId(isAddingComment ? null : dbMessageId);
+	};
+
+	useEffect(() => {
+		if (!messageRef.current) return;
+		const el = messageRef.current;
+		const update = () => setMessageHeight(el.offsetHeight);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
 
 	return (
 		<MessagePrimitive.Root
+			ref={messageRef}
 			className="aui-assistant-message-root group fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
 			data-role="assistant"
 		>
 			<AssistantMessageInner />
 
-			{/* Comment trigger and floating panel */}
-			{dbMessageId && searchSpaceId && (
-				<div className="absolute -right-10 top-3">
-					<CommentTrigger
-						commentCount={commentCount}
-						isOpen={isCommentPanelOpen}
-						onClick={() => setIsCommentPanelOpen(!isCommentPanelOpen)}
-					/>
-					{isCommentPanelOpen && (
-						<div className="absolute top-full left-0 z-50 mt-2 animate-in fade-in slide-in-from-top-2 duration-200">
-							<CommentPanelContainer
-								messageId={dbMessageId}
-								searchSpaceId={Number(searchSpaceId)}
-								isOpen={true}
-								onClose={() => setIsCommentPanelOpen(false)}
-								maxHeight={400}
+			{searchSpaceId && commentsEnabled && !isMessageStreaming && (
+				<div className="absolute left-full top-0 ml-4 hidden lg:block w-72">
+					<div
+						className={`sticky top-3 ${showCommentPanel ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity`}
+					>
+						{!hasComments && (
+							<CommentTrigger
+								commentCount={0}
+								isOpen={isAddingComment}
+								onClick={handleToggleAddComment}
+								disabled={!dbMessageId}
 							/>
-						</div>
-					)}
+						)}
+
+						{showCommentPanel && dbMessageId && (
+							<div
+								className={
+									hasComments ? "" : "mt-2 animate-in fade-in slide-in-from-top-2 duration-200"
+								}
+							>
+								<CommentPanelContainer
+									messageId={dbMessageId}
+									isOpen={true}
+									maxHeight={messageHeight}
+								/>
+							</div>
+						)}
+					</div>
 				</div>
 			)}
 		</MessagePrimitive.Root>
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 51f9c0d33..5e0f33e85 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -26,6 +26,7 @@ import {
 import { useParams } from "next/navigation";
 import { type FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { showCommentsGutterAtom } from "@/atoms/chat/current-thread.atom";
 import {
 	mentionedDocumentIdsAtom,
 	mentionedDocumentsAtom,
@@ -60,57 +61,63 @@ import { Button } from "@/components/ui/button";
 import type { Document } from "@/contracts/types/document.types";
 import { cn } from "@/lib/utils";
 
-/**
- * Props for the Thread component
- */
 interface ThreadProps {
 	messageThinkingSteps?: Map<string, ThinkingStep[]>;
-	/** Optional header component to render at the top of the viewport (sticky) */
 	header?: React.ReactNode;
 }
 
 export const Thread: FC<ThreadProps> = ({ messageThinkingSteps = new Map(), header }) => {
 	return (
 		<ThinkingStepsContext.Provider value={messageThinkingSteps}>
-			<ThreadPrimitive.Root
-				className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
-				style={{
-					["--thread-max-width" as string]: "44rem",
-				}}
-			>
-				<ThreadPrimitive.Viewport
-					turnAnchor="top"
-					className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4"
-				>
-					{/* Optional sticky header for model selector etc. */}
-					{header && <div className="sticky top-0 z-10 mb-4">{header}</div>}
-
-					<AssistantIf condition={({ thread }) => thread.isEmpty}>
-						<ThreadWelcome />
-					</AssistantIf>
-
-					<ThreadPrimitive.Messages
-						components={{
-							UserMessage,
-							EditComposer,
-							AssistantMessage,
-						}}
-					/>
-
-					<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
-						<ThreadScrollToBottom />
-						<AssistantIf condition={({ thread }) => !thread.isEmpty}>
-							<div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both">
-								<Composer />
-							</div>
-						</AssistantIf>
-					</ThreadPrimitive.ViewportFooter>
-				</ThreadPrimitive.Viewport>
-			</ThreadPrimitive.Root>
+			<ThreadContent header={header} />
 		</ThinkingStepsContext.Provider>
 	);
 };
 
+const ThreadContent: FC<{ header?: React.ReactNode }> = ({ header }) => {
+	const showGutter = useAtomValue(showCommentsGutterAtom);
+
+	return (
+		<ThreadPrimitive.Root
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
+			style={{
+				["--thread-max-width" as string]: "44rem",
+			}}
+		>
+			<ThreadPrimitive.Viewport
+				turnAnchor="top"
+				className={cn(
+					"aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4 transition-[padding] duration-300 ease-out",
+					showGutter && "lg:pr-30"
+				)}
+			>
+				{header && <div className="sticky top-0 z-10 mb-4">{header}</div>}
+
+				<AssistantIf condition={({ thread }) => thread.isEmpty}>
+					<ThreadWelcome />
+				</AssistantIf>
+
+				<ThreadPrimitive.Messages
+					components={{
+						UserMessage,
+						EditComposer,
+						AssistantMessage,
+					}}
+				/>
+
+				<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
+					<ThreadScrollToBottom />
+					<AssistantIf condition={({ thread }) => !thread.isEmpty}>
+						<div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both">
+							<Composer />
+						</div>
+					</AssistantIf>
+				</ThreadPrimitive.ViewportFooter>
+			</ThreadPrimitive.Viewport>
+		</ThreadPrimitive.Root>
+	);
+};
+
 const ThreadScrollToBottom: FC = () => {
 	return (
 		<ThreadPrimitive.ScrollToBottom asChild>
diff --git a/surfsense_web/lib/chat/thread-persistence.ts b/surfsense_web/lib/chat/thread-persistence.ts
index 23dd35800..738d1062f 100644
--- a/surfsense_web/lib/chat/thread-persistence.ts
+++ b/surfsense_web/lib/chat/thread-persistence.ts
@@ -23,6 +23,7 @@ export interface ThreadRecord {
 	search_space_id: number;
 	created_at: string;
 	updated_at: string;
+	has_comments?: boolean;
 }
 
 export interface MessageRecord {