From 7979b1c16ab6a6b073cb08c1f52e8c665d90f5e1 Mon Sep 17 00:00:00 2001
From: Sreeram Sreedhar <sreeram@supermemory.com>
Date: Sat, 6 Jun 2026 18:38:15 -0700
Subject: [PATCH] fix(web): extend graph gradient backdrop across the chat
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chat-page layout split into a graph rail (left) and chat shell
(right). The gradient + dotted-grid backdrop lived inside the rail with
overflow-hidden, so the chat side fell back to flat #05080D — pure black.

Lift the backdrop to span both columns so the gradient flows continuously:
- ChatGraphContextRail gains a `showBackdrop` prop (default true); when
  false it skips its own gradient/grid/opaque bg.
- The page-desktop chat layout renders one shared backdrop behind both
  columns and passes showBackdrop={false} to the rail.
- Drop the rail's right-edge fade-to-#05080D overlay, which painted a
  hard vertical seam over the now-continuous gradient.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../chat/chat-graph-context-rail.tsx          | 19 ++++++++++++++-----
 apps/web/components/chat/index.tsx            | 17 +++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/chat/chat-graph-context-rail.tsx b/apps/web/components/chat/chat-graph-context-rail.tsx
index cb83141b..c89c8339 100644
--- a/apps/web/components/chat/chat-graph-context-rail.tsx
+++ b/apps/web/components/chat/chat-graph-context-rail.tsx
@@ -13,10 +13,12 @@ export function ChatGraphContextRail({
 	messages,
 	containerTags,
 	className,
+	showBackdrop = true,
 }: {
 	messages: UIMessage[]
 	containerTags?: string[] | null
 	className?: string
+	showBackdrop?: boolean
 }) {
 	const { effectiveContainerTags } = useProject()
 	const graphContainerTags =
@@ -32,14 +34,22 @@ export function ChatGraphContextRail({
 		<div
 			id="chat-graph-context-rail"
 			className={cn(
-				"relative flex min-h-0 min-w-0 flex-1 flex-col bg-[#05080D] overflow-hidden",
+				"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+				showBackdrop && "bg-[#05080D]",
 				dmSansClassName(),
 				className,
 			)}
 		>
-			<AnimatedGradientBackground animateFromBottom={false} topPosition="55%" />
-			<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
-			<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+			{showBackdrop && (
+				<>
+					<AnimatedGradientBackground
+						animateFromBottom={false}
+						topPosition="55%"
+					/>
+					<div className="pointer-events-none absolute inset-0 z-0 bg-[#05080D]/50" />
+					<div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+				</>
+			)}
 			<div className="pointer-events-none absolute top-3 left-4 z-20">
 				<p className="text-xs font-medium text-white/70">Memory map</p>
 				<p className="mt-0.5 max-w-[14rem] text-[10px] leading-snug text-white/35">
@@ -48,7 +58,6 @@ export function ChatGraphContextRail({
 						: "Memories used by Nova will be highlighted here"}
 				</p>
 			</div>
-			<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-r from-transparent to-[#05080D]" />
 			<div className="relative z-[2] min-h-0 flex-1 pt-10">
 				<MemoryGraph
 					containerTags={graphContainerTags}
diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 5ee10396..2d7bc397 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -48,6 +48,7 @@ import { SuperLoader } from "../superloader"
 import { UserMessage } from "./message/user-message"
 import { AgentMessage } from "./message/agent-message"
 import { ChatGraphContextRail } from "./chat-graph-context-rail"
+import { AnimatedGradientBackground } from "@/components/animated-gradient-background"
 import { ChainOfThought } from "./input/chain-of-thought"
 import { useIsMobile } from "@hooks/use-mobile"
 import { useAuth } from "@lib/auth-context"
@@ -1601,14 +1602,26 @@ export function ChatSidebar({
 		>
 			{chatHistorySheet}
 			{isPageDesktop ? (
-				<div className="flex h-full min-h-0 w-full flex-1 flex-row">
+				<div className="relative flex h-full min-h-0 w-full flex-1 flex-row overflow-hidden bg-[#05080D]">
+					{/* Shared backdrop spanning both the graph rail and the chat so the
+					    gradient flows continuously across the whole panel instead of
+					    stopping at the graph edge. */}
+					<div className="pointer-events-none absolute inset-0 z-0">
+						<AnimatedGradientBackground
+							animateFromBottom={false}
+							topPosition="55%"
+						/>
+						<div className="absolute inset-0 bg-[#05080D]/50" />
+						<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(105,167,240,0.25)_1px,transparent_1px)] bg-size-[32px_32px] mask-[radial-gradient(ellipse_at_center,black_60%,transparent_100%)]" />
+					</div>
 					<ChatGraphContextRail
+						showBackdrop={false}
 						messages={messages}
 						containerTags={
 							chatProject === AUTO_CHAT_SPACE_ID ? null : [chatProject]
 						}
 					/>
-					<div className="flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
+					<div className="relative z-[2] flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
 						{pageDesktopToolbarRow}
 						<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
 							{shell}