diff --git a/apps/web/src/components/ConversationView.tsx b/apps/web/src/components/ConversationView.tsx
index 74ed6bbdc..13d3c432d 100644
--- a/apps/web/src/components/ConversationView.tsx
+++ b/apps/web/src/components/ConversationView.tsx
@@ -17,12 +17,16 @@ interface ConversationViewProps {
 	requestBody?: string | null;
 	responseBody?: string | null;
 	entries?: ConversationEntry[];
+	linebreak?: boolean;
+	expanded?: boolean;
 }
 
 function ConversationViewComponent({
 	requestBody,
 	responseBody,
 	entries,
+	linebreak = false,
+	expanded = false,
 }: ConversationViewProps) {
 	const messages = useMemo(() => {
 		const resolvedEntries =
@@ -85,7 +89,9 @@ function ConversationViewComponent({
 	}
 
 	return (
-		<div className="h-[calc(65vh-10rem)] w-full overflow-hidden">
+		<div
+			className={`w-full overflow-hidden ${expanded ? "h-full" : "h-[calc(65vh-10rem)]"}`}
+		>
 			<div className="h-full w-full overflow-y-auto overflow-x-hidden px-4 py-3 space-y-3">
 				{messages.map((message, index) => (
 					<Message
@@ -96,6 +102,7 @@ function ConversationViewComponent({
 						tools={message.tools}
 						toolResults={message.toolResults}
 						cleanLineNumbers={cleanLineNumbers}
+						linebreak={linebreak}
 					/>
 				))}
 			</div>
diff --git a/apps/web/src/components/RequestDetailsModal.tsx b/apps/web/src/components/RequestDetailsModal.tsx
index 68bc68912..1e9750aa6 100644
--- a/apps/web/src/components/RequestDetailsModal.tsx
+++ b/apps/web/src/components/RequestDetailsModal.tsx
@@ -11,7 +11,7 @@ import {
 	formatTokens,
 } from "@ccflare/ui";
 import { useQuery } from "@tanstack/react-query";
-import { Eye } from "lucide-react";
+import { Eye, Maximize2, Minimize2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { api } from "../api";
 import { queryKeys } from "../lib/query-keys";
@@ -20,6 +20,7 @@ import { ConversationView } from "./ConversationView";
 import { CopyButton } from "./CopyButton";
 import { TokenUsageDisplay } from "./TokenUsageDisplay";
 import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -45,6 +46,9 @@ export function RequestDetailsModal({
 	onClose,
 }: RequestDetailsModalProps) {
 	const [beautifyMode, setBeautifyMode] = useState(true);
+	const [linebreakMode, setLinebreakMode] = useState(false);
+	const [activeTab, setActiveTab] = useState("conversation");
+	const [expanded, setExpanded] = useState(false);
 	const {
 		data: conversationChain = [],
 		isLoading: conversationLoading,
@@ -73,9 +77,46 @@ export function RequestDetailsModal({
 
 	const statusCode = request.response?.status;
 
+	const handleOpenChange = (open: boolean) => {
+		if (!open) {
+			setExpanded(false);
+			onClose();
+		}
+	};
+
+	const conversationContent = conversationLoading ? (
+		<div className="flex items-center justify-center h-32 text-muted-foreground">
+			Loading conversation...
+		</div>
+	) : conversationError ? (
+		<div className="flex items-center justify-center h-32 text-destructive">
+			{conversationError instanceof Error
+				? conversationError.message
+				: "Failed to load conversation"}
+		</div>
+	) : (
+		<ConversationView
+			entries={conversationEntries}
+			linebreak={linebreakMode}
+			expanded={expanded}
+		/>
+	);
+
 	return (
-		<Dialog open={isOpen} onOpenChange={onClose}>
-			<DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+			<DialogContent
+				className={`max-w-4xl max-h-[90vh] overflow-hidden flex flex-col ${
+					expanded
+						? "left-0 top-0 translate-x-0 translate-y-0 w-full max-w-none max-h-none h-full rounded-none"
+						: ""
+				}`}
+				onEscapeKeyDown={(e) => {
+					if (expanded) {
+						e.preventDefault();
+						setExpanded(false);
+					}
+				}}
+			>
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						<Eye className="h-5 w-5" />
@@ -106,119 +147,109 @@ export function RequestDetailsModal({
 								<Badge variant="warning">Rate Limited</Badge>
 							)}
 						</div>
-						<div className="flex items-center gap-2">
-							<Label htmlFor="beautify-mode" className="text-sm">
-								Beautify
-							</Label>
-							<Switch
-								id="beautify-mode"
-								checked={beautifyMode}
-								onCheckedChange={setBeautifyMode}
-							/>
+						<div className="flex items-center gap-4">
+							{(activeTab === "conversation" || expanded) && (
+								<div className="flex items-center gap-2">
+									<Label htmlFor="linebreak-mode" className="text-sm">
+										Linebreak
+									</Label>
+									<Switch
+										id="linebreak-mode"
+										checked={linebreakMode}
+										onCheckedChange={setLinebreakMode}
+									/>
+								</div>
+							)}
+							<div className="flex items-center gap-2">
+								<Label htmlFor="beautify-mode" className="text-sm">
+									Beautify
+								</Label>
+								<Switch
+									id="beautify-mode"
+									checked={beautifyMode}
+									onCheckedChange={setBeautifyMode}
+								/>
+							</div>
 						</div>
 					</DialogDescription>
 				</DialogHeader>
 
-				<Tabs defaultValue="conversation" className="flex-1 overflow-hidden">
-					<TabsList className="grid w-full grid-cols-5">
-						<TabsTrigger value="conversation">Conversation</TabsTrigger>
-						<TabsTrigger value="request">Request</TabsTrigger>
-						<TabsTrigger value="response">Response</TabsTrigger>
-						<TabsTrigger value="metadata">Metadata</TabsTrigger>
-						<TabsTrigger value="tokens">Token Usage</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="conversation" className="mt-4 flex-1 min-h-0">
-						{conversationLoading ? (
-							<div className="flex items-center justify-center h-32 text-muted-foreground">
-								Loading conversation...
-							</div>
-						) : conversationError ? (
-							<div className="flex items-center justify-center h-32 text-destructive">
-								{conversationError instanceof Error
-									? conversationError.message
-									: "Failed to load conversation"}
-							</div>
-						) : (
-							<ConversationView entries={conversationEntries} />
-						)}
-					</TabsContent>
-
-					<TabsContent
-						value="request"
-						className="mt-4 space-y-4 overflow-y-auto max-h-[60vh]"
+				{expanded ? (
+					<div className="flex-1 min-h-0 mt-4 overflow-hidden">
+						{conversationContent}
+					</div>
+				) : (
+					<Tabs
+						value={activeTab}
+						onValueChange={setActiveTab}
+						className="flex-1 overflow-hidden"
 					>
-						<div>
-							<div className="flex items-center justify-between mb-2">
-								<h3 className="font-semibold">Headers</h3>
-								<CopyButton
-									variant="ghost"
-									size="sm"
-									getValue={() => formatHeaders(request.request.headers)}
-								>
-									Copy
-								</CopyButton>
-							</div>
-							<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
-								{formatHeaders(request.request.headers)}
-							</pre>
-						</div>
+						<TabsList className="grid w-full grid-cols-5">
+							<TabsTrigger value="conversation">Conversation</TabsTrigger>
+							<TabsTrigger value="request">Request</TabsTrigger>
+							<TabsTrigger value="response">Response</TabsTrigger>
+							<TabsTrigger value="metadata">Metadata</TabsTrigger>
+							<TabsTrigger value="tokens">Token Usage</TabsTrigger>
+						</TabsList>
 
-						{request.request.body && (
+						<TabsContent value="conversation" className="mt-4 flex-1 min-h-0">
+							{conversationContent}
+						</TabsContent>
+
+						<TabsContent
+							value="request"
+							className="mt-4 space-y-4 overflow-y-auto max-h-[60vh]"
+						>
 							<div>
 								<div className="flex items-center justify-between mb-2">
-									<h3 className="font-semibold">Body</h3>
+									<h3 className="font-semibold">Headers</h3>
 									<CopyButton
 										variant="ghost"
 										size="sm"
-										getValue={() => formatBody(request.request.body)}
+										getValue={() => formatHeaders(request.request.headers)}
 									>
 										Copy
 									</CopyButton>
 								</div>
 								<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
-									{formatBody(request.request.body)}
+									{formatHeaders(request.request.headers)}
 								</pre>
 							</div>
-						)}
-					</TabsContent>
 
-					<TabsContent
-						value="response"
-						className="mt-4 space-y-4 overflow-y-auto max-h-[60vh]"
-					>
-						{request.response ? (
-							<>
+							{request.request.body && (
 								<div>
 									<div className="flex items-center justify-between mb-2">
-										<h3 className="font-semibold">Headers</h3>
+										<h3 className="font-semibold">Body</h3>
 										<CopyButton
 											variant="ghost"
 											size="sm"
-											getValue={() =>
-												request.response
-													? formatHeaders(request.response.headers)
-													: ""
-											}
+											getValue={() => formatBody(request.request.body)}
 										>
 											Copy
 										</CopyButton>
 									</div>
 									<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
-										{formatHeaders(request.response.headers)}
+										{formatBody(request.request.body)}
 									</pre>
 								</div>
+							)}
+						</TabsContent>
 
-								{request.response.body && (
+						<TabsContent
+							value="response"
+							className="mt-4 space-y-4 overflow-y-auto max-h-[60vh]"
+						>
+							{request.response ? (
+								<>
 									<div>
 										<div className="flex items-center justify-between mb-2">
-											<h3 className="font-semibold">Body</h3>
+											<h3 className="font-semibold">Headers</h3>
 											<CopyButton
 												variant="ghost"
 												size="sm"
 												getValue={() =>
 													request.response
-														? formatBody(request.response.body)
+														? formatHeaders(request.response.headers)
 														: ""
 												}
 											>
@@ -226,61 +257,101 @@ export function RequestDetailsModal({
 											</CopyButton>
 										</div>
 										<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
-											{formatBody(request.response.body)}
+											{formatHeaders(request.response.headers)}
 										</pre>
 									</div>
-								)}
-							</>
-						) : (
-							<div className="text-center text-muted-foreground py-8">
-								{request.error ? (
-									<>
-										<p className="text-destructive font-medium">
-											Error: {request.error}
-										</p>
-										<p className="mt-2">No response data available</p>
-									</>
-								) : (
-									<p>No response data available</p>
-								)}
-							</div>
-						)}
-					</TabsContent>
 
-					<TabsContent
-						value="metadata"
-						className="mt-4 overflow-y-auto max-h-[60vh]"
-					>
-						<div>
-							<div className="flex items-center justify-between mb-2">
-								<h3 className="font-semibold">Request Metadata</h3>
-								<CopyButton
-									variant="ghost"
-									size="sm"
-									getValue={() =>
-										beautifyMode
-											? JSON.stringify(request.meta, null, 2)
-											: JSON.stringify(request.meta)
-									}
-								>
-									Copy
-								</CopyButton>
+									{request.response.body && (
+										<div>
+											<div className="flex items-center justify-between mb-2">
+												<h3 className="font-semibold">Body</h3>
+												<CopyButton
+													variant="ghost"
+													size="sm"
+													getValue={() =>
+														request.response
+															? formatBody(request.response.body)
+															: ""
+													}
+												>
+													Copy
+												</CopyButton>
+											</div>
+											<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
+												{formatBody(request.response.body)}
+											</pre>
+										</div>
+									)}
+								</>
+							) : (
+								<div className="text-center text-muted-foreground py-8">
+									{request.error ? (
+										<>
+											<p className="text-destructive font-medium">
+												Error: {request.error}
+											</p>
+											<p className="mt-2">No response data available</p>
+										</>
+									) : (
+										<p>No response data available</p>
+									)}
+								</div>
+							)}
+						</TabsContent>
+
+						<TabsContent
+							value="metadata"
+							className="mt-4 overflow-y-auto max-h-[60vh]"
+						>
+							<div>
+								<div className="flex items-center justify-between mb-2">
+									<h3 className="font-semibold">Request Metadata</h3>
+									<CopyButton
+										variant="ghost"
+										size="sm"
+										getValue={() =>
+											beautifyMode
+												? JSON.stringify(request.meta, null, 2)
+												: JSON.stringify(request.meta)
+										}
+									>
+										Copy
+									</CopyButton>
+								</div>
+								<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
+									{beautifyMode
+										? JSON.stringify(request.meta, null, 2)
+										: JSON.stringify(request.meta)}
+								</pre>
 							</div>
-							<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono">
-								{beautifyMode
-									? JSON.stringify(request.meta, null, 2)
-									: JSON.stringify(request.meta)}
-							</pre>
-						</div>
-					</TabsContent>
+						</TabsContent>
+
+						<TabsContent
+							value="tokens"
+							className="mt-4 overflow-y-auto max-h-[60vh]"
+						>
+							<TokenUsageDisplay summary={summary} />
+						</TabsContent>
+					</Tabs>
+				)}
 
-					<TabsContent
-						value="tokens"
-						className="mt-4 overflow-y-auto max-h-[60vh]"
+				{(activeTab === "conversation" || expanded) && (
+					<Button
+						variant="secondary"
+						size="icon"
+						className="absolute bottom-4 right-4 z-10 shadow-lg"
+						onClick={() => setExpanded((prev) => !prev)}
+						aria-label={
+							expanded ? "Shrink conversation view" : "Expand conversation view"
+						}
 					>
-						<TokenUsageDisplay summary={summary} />
-					</TabsContent>
-				</Tabs>
+						{expanded ? (
+							<Minimize2 className="h-4 w-4" />
+						) : (
+							<Maximize2 className="h-4 w-4" />
+						)}
+					</Button>
+				)}
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/web/src/components/conversation/Message.tsx b/apps/web/src/components/conversation/Message.tsx
index 4a9a20201..6788c3295 100644
--- a/apps/web/src/components/conversation/Message.tsx
+++ b/apps/web/src/components/conversation/Message.tsx
@@ -23,6 +23,7 @@ interface MessageProps {
 	tools?: ToolUse[];
 	toolResults?: ToolResult[];
 	cleanLineNumbers: (content: string) => string;
+	linebreak?: boolean;
 }
 
 const ROLE_STYLES: Record<Role, { bg: string; Icon: LucideIcon }> = {
@@ -38,6 +39,7 @@ function MessageComponent({
 	tools,
 	toolResults,
 	cleanLineNumbers,
+	linebreak = false,
 }: MessageProps) {
 	const isRightAligned = role === "user";
 	const thinkingBlock = contentBlocks?.find(
@@ -104,7 +106,10 @@ function MessageComponent({
 					{/* Thinking block */}
 					{hasThinking && thinkingBlock && (
 						<div className="mb-2">
-							<ThinkingBlock content={cleanLineNumbers(thinkingText)} />
+							<ThinkingBlock
+								content={cleanLineNumbers(thinkingText)}
+								linebreak={linebreak}
+							/>
 						</div>
 					)}
 
@@ -121,7 +126,11 @@ function MessageComponent({
 					)}
 
 					{displayContent.length > 0 && (
-						<MessageBubble role={role} content={displayContent} />
+						<MessageBubble
+							role={role}
+							content={displayContent}
+							linebreak={linebreak}
+						/>
 					)}
 
 					{/* Tool usage */}
@@ -132,6 +141,7 @@ function MessageComponent({
 									key={`tool-${tool.id || `${tool.name}-${JSON.stringify(tool.input)}`}`}
 									toolName={tool.name}
 									input={tool.input}
+									linebreak={linebreak}
 								/>
 							))}
 						</div>
@@ -142,6 +152,7 @@ function MessageComponent({
 						<div className="mt-2 space-y-2">
 							{toolResults?.map((result, index) => (
 								<ToolResultBlock
+									linebreak={linebreak}
 									key={`result-${result.tool_use_id || index}`}
 									content={
 										typeof result.content === "string"
diff --git a/apps/web/src/components/conversation/MessageBubble.tsx b/apps/web/src/components/conversation/MessageBubble.tsx
index 7c082805b..7134d68d2 100644
--- a/apps/web/src/components/conversation/MessageBubble.tsx
+++ b/apps/web/src/components/conversation/MessageBubble.tsx
@@ -2,10 +2,12 @@ import type { Role } from "@ccflare/types";
 import React from "react";
 import { useCollapsible } from "../../hooks/useCollapsible";
 import { Button } from "../ui/button";
+import { blockContentClass } from "./block-styles";
 
 interface MessageBubbleProps {
 	role: Role;
 	content: string;
+	linebreak?: boolean;
 }
 
 const MAX_CHARS_COLLAPSE = 300;
@@ -16,7 +18,11 @@ const ROLE_BG_COLORS: Record<Role, string> = {
 	system: "bg-accent/10",
 };
 
-function MessageBubbleComponent({ role, content }: MessageBubbleProps) {
+function MessageBubbleComponent({
+	role,
+	content,
+	linebreak = false,
+}: MessageBubbleProps) {
 	const { display, isLong, isExpanded, toggle } = useCollapsible(
 		content,
 		MAX_CHARS_COLLAPSE,
@@ -27,14 +33,16 @@ function MessageBubbleComponent({ role, content }: MessageBubbleProps) {
 		<div>
 			<div className={`rounded-lg px-4 py-2 ${bgColor}`}>
 				<div
-					className={`whitespace-pre text-sm overflow-x-auto text-left ${
-						isExpanded && isLong ? "max-h-96 overflow-y-auto pr-2" : ""
-					}`}
+					className={blockContentClass({
+						linebreak,
+						capped: isExpanded && isLong,
+						extra: "text-sm text-left",
+					})}
 				>
-					{display}
+					{linebreak ? content : display}
 				</div>
 			</div>
-			{isLong && (
+			{isLong && !linebreak && (
 				<Button
 					variant="ghost"
 					size="sm"
diff --git a/apps/web/src/components/conversation/ThinkingBlock.tsx b/apps/web/src/components/conversation/ThinkingBlock.tsx
index 5b5197fe0..f9c36960a 100644
--- a/apps/web/src/components/conversation/ThinkingBlock.tsx
+++ b/apps/web/src/components/conversation/ThinkingBlock.tsx
@@ -2,14 +2,19 @@ import { MessageSquare } from "lucide-react";
 import React from "react";
 import { useCollapsible } from "../../hooks/useCollapsible";
 import { Button } from "../ui/button";
+import { blockContentClass } from "./block-styles";
 
 interface ThinkingBlockProps {
 	content: string;
+	linebreak?: boolean;
 }
 
 const MAX_CHARS_COLLAPSE = 200;
 
-function ThinkingBlockComponent({ content }: ThinkingBlockProps) {
+function ThinkingBlockComponent({
+	content,
+	linebreak = false,
+}: ThinkingBlockProps) {
 	const { display, isLong, isExpanded, toggle } = useCollapsible(
 		content,
 		MAX_CHARS_COLLAPSE,
@@ -22,7 +27,7 @@ function ThinkingBlockComponent({ content }: ThinkingBlockProps) {
 					<MessageSquare className="w-3 h-3 text-warning" />
 					<span className="text-xs font-medium text-warning">Thinking</span>
 				</div>
-				{isLong && (
+				{isLong && !linebreak && (
 					<Button
 						variant="ghost"
 						size="sm"
@@ -33,8 +38,13 @@ function ThinkingBlockComponent({ content }: ThinkingBlockProps) {
 					</Button>
 				)}
 			</div>
-			<div className="text-xs text-warning whitespace-pre overflow-x-auto">
-				{display}
+			<div
+				className={blockContentClass({
+					linebreak,
+					extra: "text-xs text-warning",
+				})}
+			>
+				{linebreak ? content : display}
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/components/conversation/ToolResultBlock.tsx b/apps/web/src/components/conversation/ToolResultBlock.tsx
index fb698baee..424414f88 100644
--- a/apps/web/src/components/conversation/ToolResultBlock.tsx
+++ b/apps/web/src/components/conversation/ToolResultBlock.tsx
@@ -2,14 +2,19 @@ import { FileText } from "lucide-react";
 import React from "react";
 import { useCollapsible } from "../../hooks/useCollapsible";
 import { Button } from "../ui/button";
+import { blockContentClass } from "./block-styles";
 
 interface ToolResultBlockProps {
 	content: string;
+	linebreak?: boolean;
 }
 
 const MAX_CHARS_COLLAPSE = 200;
 
-function ToolResultBlockComponent({ content }: ToolResultBlockProps) {
+function ToolResultBlockComponent({
+	content,
+	linebreak = false,
+}: ToolResultBlockProps) {
 	const { display, isLong, isExpanded, toggle } = useCollapsible(
 		content,
 		MAX_CHARS_COLLAPSE,
@@ -22,7 +27,7 @@ function ToolResultBlockComponent({ content }: ToolResultBlockProps) {
 					<FileText className="w-3 h-3 text-success" />
 					<span className="text-xs font-medium text-success">Tool Result</span>
 				</div>
-				{isLong && (
+				{isLong && !linebreak && (
 					<Button
 						variant="ghost"
 						size="sm"
@@ -35,11 +40,13 @@ function ToolResultBlockComponent({ content }: ToolResultBlockProps) {
 			</div>
 			<div className="text-xs bg-success/10 p-2 rounded mt-1 overflow-hidden">
 				<pre
-					className={`overflow-x-auto whitespace-pre text-left ${
-						isExpanded && isLong ? "max-h-96 overflow-y-auto pr-2" : ""
-					}`}
+					className={blockContentClass({
+						linebreak,
+						capped: isExpanded && isLong,
+						extra: "text-left",
+					})}
 				>
-					{display}
+					{linebreak ? content : display}
 				</pre>
 			</div>
 		</div>
diff --git a/apps/web/src/components/conversation/ToolUsageBlock.tsx b/apps/web/src/components/conversation/ToolUsageBlock.tsx
index 1d245dcf3..6fbec7133 100644
--- a/apps/web/src/components/conversation/ToolUsageBlock.tsx
+++ b/apps/web/src/components/conversation/ToolUsageBlock.tsx
@@ -2,15 +2,21 @@ import { Terminal } from "lucide-react";
 import React, { useMemo } from "react";
 import { useCollapsible } from "../../hooks/useCollapsible";
 import { Button } from "../ui/button";
+import { blockContentClass } from "./block-styles";
 
 interface ToolUsageBlockProps {
 	toolName: string;
 	input?: Record<string, unknown>;
+	linebreak?: boolean;
 }
 
 const MAX_CHARS_COLLAPSE = 200;
 
-function ToolUsageBlockComponent({ toolName, input }: ToolUsageBlockProps) {
+function ToolUsageBlockComponent({
+	toolName,
+	input,
+	linebreak = false,
+}: ToolUsageBlockProps) {
 	const inputStr = useMemo(
 		() => (input ? JSON.stringify(input, null, 2) : ""),
 		[input],
@@ -31,7 +37,7 @@ function ToolUsageBlockComponent({ toolName, input }: ToolUsageBlockProps) {
 						Tool: {toolName}
 					</span>
 				</div>
-				{hasInput && isLong && (
+				{hasInput && isLong && !linebreak && (
 					<Button
 						variant="ghost"
 						size="sm"
@@ -44,11 +50,13 @@ function ToolUsageBlockComponent({ toolName, input }: ToolUsageBlockProps) {
 			</div>
 			{hasInput && (
 				<pre
-					className={`text-xs bg-info/10 p-2 rounded mt-1 overflow-x-auto whitespace-pre text-left ${
-						isExpanded && isLong ? "max-h-96 overflow-y-auto pr-2" : ""
-					}`}
+					className={blockContentClass({
+						linebreak,
+						capped: isExpanded && isLong,
+						extra: "text-xs bg-info/10 p-2 rounded mt-1 text-left",
+					})}
 				>
-					{display}
+					{linebreak ? inputStr : display}
 				</pre>
 			)}
 		</div>
diff --git a/apps/web/src/components/conversation/block-styles.ts b/apps/web/src/components/conversation/block-styles.ts
new file mode 100644
index 000000000..9e2f6e09b
--- /dev/null
+++ b/apps/web/src/components/conversation/block-styles.ts
@@ -0,0 +1,28 @@
+interface BlockContentOptions {
+	/** Wrap long lines and show the full block (linebreak mode). */
+	linebreak?: boolean;
+	/** Cap the block height with internal scrolling (expanded collapsible). */
+	capped?: boolean;
+	/** Additional static classes (colors, padding, etc.). */
+	extra?: string;
+}
+
+/**
+ * Shared class builder for conversation content blocks. Linebreak mode
+ * replaces horizontal scrolling with wrapping and removes height caps.
+ */
+export function blockContentClass({
+	linebreak,
+	capped,
+	extra,
+}: BlockContentOptions): string {
+	return [
+		extra,
+		linebreak
+			? "whitespace-pre-wrap break-words overflow-x-hidden"
+			: "whitespace-pre overflow-x-auto",
+		!linebreak && capped ? "max-h-96 overflow-y-auto pr-2" : "",
+	]
+		.filter(Boolean)
+		.join(" ");
+}
diff --git a/apps/web/src/components/conversation/linebreak.test.tsx b/apps/web/src/components/conversation/linebreak.test.tsx
new file mode 100644
index 000000000..116af6a55
--- /dev/null
+++ b/apps/web/src/components/conversation/linebreak.test.tsx
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Message } from "./Message";
+
+const longContent = `word\n${"x".repeat(400)}`;
+
+function renderMessage(linebreak?: boolean) {
+	return renderToStaticMarkup(
+		// biome-ignore lint/a11y/useValidAriaRole: "role" is a chat message role, not ARIA
+		<Message
+			role="assistant"
+			content={longContent}
+			contentBlocks={[]}
+			tools={[]}
+			toolResults={[]}
+			cleanLineNumbers={(value: string) => value}
+			linebreak={linebreak}
+		/>,
+	);
+}
+
+describe("linebreak mode", () => {
+	it("wraps and fully expands content blocks when enabled", () => {
+		const html = renderMessage(true);
+
+		expect(html).toContain("whitespace-pre-wrap");
+		expect(html).toContain("break-words");
+		expect(html).not.toContain("Show more");
+		expect(html).toContain("x".repeat(400));
+	});
+
+	it("keeps collapsible no-wrap rendering by default", () => {
+		const html = renderMessage();
+
+		expect(html).toContain("whitespace-pre");
+		expect(html).not.toContain("whitespace-pre-wrap");
+		expect(html).toContain("Show more");
+		expect(html).not.toContain("x".repeat(400));
+	});
+});
diff --git a/apps/web/src/hooks/useCollapsible.ts b/apps/web/src/hooks/useCollapsible.ts
index 5cde035cb..a976fc7b1 100644
--- a/apps/web/src/hooks/useCollapsible.ts
+++ b/apps/web/src/hooks/useCollapsible.ts
@@ -4,7 +4,7 @@ export const useCollapsible = (content: string, limit: number) => {
 	const [isExpanded, setIsExpanded] = useState(false);
 
 	const isLong = useMemo(
-		() => content && content.length > limit,
+		() => !!content && content.length > limit,
 		[content, limit],
 	);