From 1840d6f94209ff036c5cc890df0144c48f00c773 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Thu, 19 Mar 2026 13:36:21 +0000
Subject: [PATCH] fix: improve inline file reference chip contrast and spacing
 (#23285)

---
 site/src/components/ChatMessageInput/FileReferenceNode.tsx   | 5 ++++-
 .../pages/AgentsPage/AgentDetail/ConversationTimeline.tsx    | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/src/components/ChatMessageInput/FileReferenceNode.tsx b/site/src/components/ChatMessageInput/FileReferenceNode.tsx
index 0ab0196084..50fb65a0e9 100644
--- a/site/src/components/ChatMessageInput/FileReferenceNode.tsx
+++ b/site/src/components/ChatMessageInput/FileReferenceNode.tsx
@@ -30,6 +30,7 @@ export function FileReferenceChip({
 	isSelected,
 	onRemove,
 	onClick,
+	className: extraClassName,
 }: {
 	fileName: string;
 	startLine: number;
@@ -37,6 +38,7 @@ export function FileReferenceChip({
 	isSelected?: boolean;
 	onRemove?: () => void;
 	onClick?: () => void;
+	className?: string;
 }) {
 	const shortFile = fileName.split("/").pop() || fileName;
 	const lineLabel =
@@ -45,9 +47,10 @@ export function FileReferenceChip({
 	return (
 		<span
 			className={cn(
-				"inline-flex h-6 max-w-[300px] cursor-pointer select-none items-center gap-1.5 rounded-md border border-border-default bg-surface-secondary px-1.5 align-middle text-xs text-content-primary shadow-sm transition-colors",
+				"inline-flex h-6 max-w-[300px] cursor-pointer select-none items-center gap-1.5 rounded-md border border-border-default bg-surface-primary px-1.5 align-middle text-xs text-content-primary shadow-sm transition-colors",
 				isSelected &&
 					"border-content-link bg-content-link/10 ring-1 ring-content-link/40",
+				extraClassName,
 			)}
 			contentEditable={false}
 			title={`${fileName}:${lineLabel}`}
diff --git a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
index 9848265bcb..7357089b7a 100644
--- a/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
@@ -366,6 +366,10 @@ const ChatMessageItem = memo<{
 																fileName={block.file_name}
 																startLine={block.start_line}
 																endLine={block.end_line}
+																className={cn(
+																	i > 0 && "ml-1",
+																	i < userInlineContent.length - 1 && "mr-1",
+																)}
 															/>
 														),
 													)