From 916f57891e520d58d9e4120961b313dd50e65c20 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Sat, 13 Jun 2026 13:35:48 -0400
Subject: [PATCH 1/3] fix(desktop): continuous blur across inbox header columns

Render a single full-width backdrop strip behind the inbox pane headers
instead of a per-pane backdrop-filter box. The blur now samples
continuously across the column boundary rather than clipping at each
pane edge. Inset headers become transparent and share a measured height
via a new CSS variable so the strip spans both columns.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 desktop/src/features/home/ui/HomeView.tsx     | 17 ++++++++++-
 .../src/features/home/ui/InboxDetailPane.tsx  | 17 +++++++++--
 .../src/features/home/ui/InboxListPane.tsx    | 20 +++++++++++--
 .../shared/layout/TopChromeInsetHeader.tsx    | 15 ++++++++--
 desktop/src/shared/layout/chromeLayout.ts     | 30 ++++++++++++++++++-
 5 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx
index e8db2a5da..9461ef9c0 100644
--- a/desktop/src/features/home/ui/HomeView.tsx
+++ b/desktop/src/features/home/ui/HomeView.tsx
@@ -40,7 +40,12 @@ import { resolveUserLabel } from "@/features/profile/lib/identity";
 import { deleteMessage, sendChannelMessage } from "@/shared/api/tauri";
 import type { HomeFeedResponse } from "@/shared/api/types";
 import { KIND_REACTION } from "@/shared/constants/kinds";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
+import {
+  insetHeaderHeightMeasurement,
+  insetHeaderOverlay,
+  topChromeInset,
+} from "@/shared/layout/chromeLayout";
+import { useMeasuredCssVariable } from "@/shared/layout/useMeasuredCssVariable";
 import { cn } from "@/shared/lib/cn";
 import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
 import { useElementWidth } from "@/shared/hooks/use-mobile";
@@ -68,6 +73,12 @@ export function HomeView({
   onRefresh,
 }: HomeViewProps) {
   const [homeInboxRef, homeInboxWidthPx] = useElementWidth<HTMLDivElement>();
+  // One pane header drives the shared backdrop strip height so the blur is a
+  // single element spanning both columns instead of clipping per pane.
+  const headerChromeRef = useMeasuredCssVariable({
+    targetRef: homeInboxRef,
+    ...insetHeaderHeightMeasurement,
+  });
   const isNarrowHomeViewport =
     homeInboxWidthPx > 0 &&
     homeInboxWidthPx < INBOX_SINGLE_COLUMN_BREAKPOINT_PX;
@@ -348,10 +359,13 @@ export function HomeView({
           } as React.CSSProperties
         }
       >
+        <div aria-hidden className={insetHeaderOverlay.backdrop} />
+
         {showListPane ? (
           <InboxListPane
             doneSet={effectiveDoneSet}
             filter={filter}
+            headerChromeRef={headerChromeRef}
             items={filteredItems}
             onFilterChange={setFilter}
             onSelect={(itemId) => {
@@ -398,6 +412,7 @@ export function HomeView({
             contextChannelName={selectedChannel?.name ?? null}
             currentPubkey={currentPubkey}
             disabledReplyReason={disabledReplyReason}
+            headerChromeRef={showListPane ? undefined : headerChromeRef}
             isDeletingMessage={isDeletingMessage}
             isDone={
               selectedItem ? effectiveDoneSet.has(selectedItem.id) : false
diff --git a/desktop/src/features/home/ui/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index 2104811b1..69499df96 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -24,6 +24,7 @@ import type { TimelineMessage } from "@/features/messages/types";
 import { MessageComposer } from "@/features/messages/ui/MessageComposer";
 import { UpdateIndicator } from "@/features/settings/UpdateIndicator";
 import type { Channel } from "@/shared/api/types";
+import { insetHeaderOverlay } from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
@@ -46,6 +47,8 @@ type InboxDetailPaneProps = {
   canOpenChannel: boolean;
   canReply: boolean;
   disabledReplyReason?: string | null;
+  /** Measured ref wiring the header height to the shared backdrop strip. */
+  headerChromeRef?: React.Ref<HTMLDivElement>;
   isDone: boolean;
   isDeletingMessage?: boolean;
   isSendingReply?: boolean;
@@ -80,6 +83,7 @@ export function InboxDetailPane({
   canOpenChannel,
   canReply,
   disabledReplyReason,
+  headerChromeRef,
   isDone,
   isDeletingMessage = false,
   isSendingReply = false,
@@ -234,7 +238,11 @@ export function InboxDetailPane({
       ref={detailPaneRef}
     >
       <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-        <TopChromeInsetHeader>
+        <TopChromeInsetHeader
+          className={insetHeaderOverlay.negativeMargin}
+          ref={headerChromeRef}
+          transparent
+        >
           <div className="px-5 py-1 pr-3">
             <div className="flex min-w-0 items-center justify-between gap-3">
               <div
@@ -316,7 +324,12 @@ export function InboxDetailPane({
           </div>
         </TopChromeInsetHeader>
 
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-32">
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-y-auto overscroll-contain pb-32",
+            insetHeaderOverlay.contentPadding,
+          )}
+        >
           <div>
             {isThreadContextLoading ? (
               <div className="px-6 pb-3 text-[11px] text-muted-foreground">
diff --git a/desktop/src/features/home/ui/InboxListPane.tsx b/desktop/src/features/home/ui/InboxListPane.tsx
index f3f2af662..ed01793bc 100644
--- a/desktop/src/features/home/ui/InboxListPane.tsx
+++ b/desktop/src/features/home/ui/InboxListPane.tsx
@@ -1,11 +1,15 @@
 import { ChevronDown, Inbox } from "lucide-react";
+import type * as React from "react";
 
 import {
   formatInboxTypeLabel,
   type InboxFilter,
   type InboxItem,
 } from "@/features/home/lib/inbox";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
+import {
+  insetHeaderOverlay,
+  topChromeInset,
+} from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
@@ -30,6 +34,8 @@ const FILTER_OPTIONS: Array<{ label: string; value: InboxFilter }> = [
 type InboxListPaneProps = {
   doneSet: ReadonlySet<string>;
   filter: InboxFilter;
+  /** Measured ref wiring the header height to the shared backdrop strip. */
+  headerChromeRef?: React.Ref<HTMLDivElement>;
   items: InboxItem[];
   onFilterChange: (filter: InboxFilter) => void;
   onSelect: (itemId: string) => void;
@@ -40,6 +46,7 @@ type InboxListPaneProps = {
 export function InboxListPane({
   doneSet,
   filter,
+  headerChromeRef,
   items,
   onFilterChange,
   onSelect,
@@ -55,7 +62,11 @@ export function InboxListPane({
         showRightDivider && topChromeInset.verticalDivider,
       )}
     >
-      <TopChromeInsetHeader>
+      <TopChromeInsetHeader
+        className={insetHeaderOverlay.negativeMargin}
+        ref={headerChromeRef}
+        transparent
+      >
         <div className="px-5 py-1">
           <div className="flex min-w-0 items-center justify-between gap-3">
             <div className="flex min-w-0 items-center gap-[6px]">
@@ -99,7 +110,10 @@ export function InboxListPane({
       </TopChromeInsetHeader>
 
       <div
-        className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+          insetHeaderOverlay.contentPadding,
+        )}
         data-testid="home-inbox-list"
       >
         {items.length === 0 ? (
diff --git a/desktop/src/shared/layout/TopChromeInsetHeader.tsx b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
index 66f554c88..a9eff76eb 100644
--- a/desktop/src/shared/layout/TopChromeInsetHeader.tsx
+++ b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
@@ -3,7 +3,14 @@ import type * as React from "react";
 import { topChromeInset } from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
 
-type TopChromeInsetHeaderProps = React.ComponentProps<"div">;
+type TopChromeInsetHeaderProps = React.ComponentProps<"div"> & {
+  /**
+   * Render without its own backdrop, borders, and hairlines — for headers
+   * stacked on a shared `insetHeaderOverlay.backdrop` strip that spans
+   * multiple columns (keeps the blur continuous across pane boundaries).
+   */
+  transparent?: boolean;
+};
 
 /**
  * Flowed header row that clears the global search/drag chrome and draws the
@@ -12,14 +19,16 @@ type TopChromeInsetHeaderProps = React.ComponentProps<"div">;
 export function TopChromeInsetHeader({
   className,
   children,
+  transparent = false,
   ...props
 }: TopChromeInsetHeaderProps) {
   return (
     <div
       className={cn(
-        topChromeInset.headerBase,
+        transparent
+          ? "relative z-40 shrink-0"
+          : cn(topChromeInset.headerBase, topChromeInset.divider),
         topChromeInset.padding,
-        topChromeInset.divider,
         className,
       )}
       {...props}
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts
index 7c90b892e..f7a961ac5 100644
--- a/desktop/src/shared/layout/chromeLayout.ts
+++ b/desktop/src/shared/layout/chromeLayout.ts
@@ -1,14 +1,17 @@
 export const TOP_CHROME_HEIGHT_DEFAULT = "2.5rem";
 export const CHANNEL_CONTENT_TOP_PADDING_DEFAULT = "5.75rem";
+export const INSET_HEADER_HEIGHT_DEFAULT = "5rem";
 
 export const chromeCssVars = {
   topChromeHeight: "--buzz-top-chrome-height",
   channelContentTopPadding: "--buzz-channel-content-top-padding",
+  insetHeaderHeight: "--buzz-inset-header-height",
 } as const;
 
 export const chromeCssVarDefaults = {
   [chromeCssVars.topChromeHeight]: TOP_CHROME_HEIGHT_DEFAULT,
   [chromeCssVars.channelContentTopPadding]: CHANNEL_CONTENT_TOP_PADDING_DEFAULT,
+  [chromeCssVars.insetHeaderHeight]: INSET_HEADER_HEIGHT_DEFAULT,
 } as const;
 
 export const channelContentTopPaddingMeasurement = {
@@ -16,6 +19,31 @@ export const channelContentTopPaddingMeasurement = {
   resetValue: chromeCssVarDefaults[chromeCssVars.channelContentTopPadding],
 } as const;
 
+export const insetHeaderHeightMeasurement = {
+  cssVariable: chromeCssVars.insetHeaderHeight,
+  resetValue: chromeCssVarDefaults[chromeCssVars.insetHeaderHeight],
+} as const;
+
+/**
+ * Tailwind class fragments for a flowed `TopChromeInsetHeader` that overlays
+ * the scrollable content below it, so the content scrolls under the
+ * translucent blurred header (same treatment as the channel header).
+ */
+export const insetHeaderOverlay = {
+  /** Negative bottom margin pulling the next sibling under the header. */
+  negativeMargin: "-mb-(--buzz-inset-header-height,5rem)",
+  /** Padding-top reserving the measured header height inside the scroll area. */
+  contentPadding: "pt-(--buzz-inset-header-height,5rem)",
+  /**
+   * Single full-width backdrop strip drawn behind transparent inset headers.
+   * Rendered once per view so the blur samples continuously across column
+   * boundaries instead of clipping at each pane's backdrop-filter box.
+   * Carries the search-strip hairline (`before:`) and the bottom border.
+   */
+  backdrop:
+    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) border-b border-border/35 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55 before:pointer-events-none before:absolute before:inset-x-0 before:top-(--buzz-top-chrome-height,2.5rem) before:h-px before:bg-border/35 before:content-['']",
+} as const;
+
 /** Tailwind class fragments for layout under the global top chrome. */
 export const topChromeInset = {
   /** Absolute/fixed top offset below the search bar. */
@@ -29,7 +57,7 @@ export const topChromeInset = {
     "before:pointer-events-none before:absolute before:inset-x-0 before:top-(--buzz-top-chrome-height,2.5rem) before:h-px before:bg-border/35 before:content-['']",
   /** Shared header backdrop and bottom border below the inset row. */
   headerBase:
-    "relative z-40 shrink-0 border-b border-border/35 bg-background/75 backdrop-blur-md supports-backdrop-filter:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/35",
+    "relative z-40 shrink-0 border-b border-border/35 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
   /** Vertical pane divider starting below the global top chrome. */
   verticalDivider:
     "after:pointer-events-none after:absolute after:bottom-0 after:right-0 after:top-(--buzz-top-chrome-height,2.5rem) after:z-40 after:w-px after:bg-border/35 after:content-['']",

From 584ef13c7bc769addba6972067f5bbfb310d13bc Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 17 Jun 2026 08:38:08 -0400
Subject: [PATCH 2/3] fix(desktop): remove header divider lines

Keep the shared header blur treatment while removing the horizontal rules drawn by the global chrome, channel header, and top chrome backdrop.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 desktop/src/app/AppTopChrome.tsx            | 17 -----------------
 desktop/src/features/chat/ui/ChatHeader.tsx |  2 +-
 desktop/src/shared/layout/chromeLayout.ts   |  7 +++----
 desktop/src/shared/ui/TopChromeBackdrop.tsx |  3 +--
 4 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/desktop/src/app/AppTopChrome.tsx b/desktop/src/app/AppTopChrome.tsx
index 17c68ab60..28370b4a4 100644
--- a/desktop/src/app/AppTopChrome.tsx
+++ b/desktop/src/app/AppTopChrome.tsx
@@ -26,22 +26,6 @@ type AppTopChromeProps = {
   searchLoading?: boolean;
 };
 
-function GlobalTopDivider() {
-  const sidebar = useOptionalSidebar();
-  const state = sidebar?.state ?? "collapsed";
-
-  return (
-    <div
-      aria-hidden="true"
-      className="pointer-events-none fixed top-10 z-40 h-px bg-border/35"
-      style={{
-        left: state === "expanded" ? "var(--sidebar-width)" : 0,
-        right: 0,
-      }}
-    />
-  );
-}
-
 function CenterColumnTopbarSearch({
   channels,
   currentPubkey,
@@ -141,7 +125,6 @@ export function AppTopChrome({
         className="fixed inset-x-0 top-0 z-20 h-10 cursor-default select-none"
         data-tauri-drag-region
       />
-      <GlobalTopDivider />
       <div className="fixed left-[80px] top-[6px] z-45 flex items-center gap-0.5">
         <TopChromeSidebarTrigger />
         <Button
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 5f61717b0..a19256ffc 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -150,7 +150,7 @@ export function ChatHeader({
     <div
       ref={chromeWrapperRef}
       className={cn(
-        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border/35 after:content-[''] supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
         topChromeInset.padding,
         channelChrome.negativeMargin,
       )}
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts
index f7a961ac5..31ab2883e 100644
--- a/desktop/src/shared/layout/chromeLayout.ts
+++ b/desktop/src/shared/layout/chromeLayout.ts
@@ -38,10 +38,11 @@ export const insetHeaderOverlay = {
    * Single full-width backdrop strip drawn behind transparent inset headers.
    * Rendered once per view so the blur samples continuously across column
    * boundaries instead of clipping at each pane's backdrop-filter box.
-   * Carries the search-strip hairline (`before:`) and the bottom border.
+   * Keeps the inset header visually continuous without drawing horizontal
+   * dividers across the header area.
    */
   backdrop:
-    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) border-b border-border/35 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55 before:pointer-events-none before:absolute before:inset-x-0 before:top-(--buzz-top-chrome-height,2.5rem) before:h-px before:bg-border/35 before:content-['']",
+    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
 } as const;
 
 /** Tailwind class fragments for layout under the global top chrome. */
@@ -67,8 +68,6 @@ export const topChromeInset = {
 export const topChromeBackdrop = {
   /** Height matching the global top chrome search/drag strip. */
   height: "h-(--buzz-top-chrome-height,2.5rem)",
-  /** `after:` pseudo-element offset aligned to the bottom of top chrome. */
-  dividerTop: "after:top-(--buzz-top-chrome-height,2.5rem)",
 } as const;
 
 /** Tailwind class fragments for measured channel header chrome. */
diff --git a/desktop/src/shared/ui/TopChromeBackdrop.tsx b/desktop/src/shared/ui/TopChromeBackdrop.tsx
index c437f6073..9ed4949f7 100644
--- a/desktop/src/shared/ui/TopChromeBackdrop.tsx
+++ b/desktop/src/shared/ui/TopChromeBackdrop.tsx
@@ -18,9 +18,8 @@ export function TopChromeBackdrop({ className }: { className?: string }) {
     <div
       aria-hidden="true"
       className={cn(
-        "pointer-events-none absolute inset-x-0 top-0 z-40 bg-background/75 backdrop-blur-md supports-[backdrop-filter]:bg-background/65 after:absolute after:inset-x-0 after:h-px after:bg-border/35 after:content-[''] dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35",
+        "pointer-events-none absolute inset-x-0 top-0 z-40 bg-background/75 backdrop-blur-md supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35",
         topChromeBackdrop.height,
-        topChromeBackdrop.dividerTop,
         className,
       )}
     />

From 92291b370b004c4a84b9f83fda0fa0a08d3cea7b Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 17 Jun 2026 11:06:48 -0400
Subject: [PATCH 3/3] fix(desktop): share channel header backdrop

Render one channel header blur behind split columns so the backdrop blends across channel and auxiliary panes.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 desktop/src/features/channels/ui/ChannelPane.tsx         | 5 ++++-
 desktop/src/features/channels/ui/ChannelScreen.tsx       | 3 +++
 desktop/src/features/channels/ui/ChannelScreenHeader.tsx | 3 +++
 desktop/src/features/chat/ui/ChatHeader.tsx              | 6 +++++-
 desktop/src/shared/layout/AuxiliaryPanelHeader.tsx       | 2 +-
 desktop/src/shared/layout/chromeLayout.ts                | 8 +++++++-
 6 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 517fa0728..819586d57 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -598,7 +598,10 @@ export const ChannelPane = React.memo(function ChannelPane({
     [agentSessionAgents, openAgentSessionPubkey],
   );
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden">
+    <div className="relative flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden">
+      {!isSinglePanelView ? (
+        <div aria-hidden="true" className={channelChrome.backdrop} />
+      ) : null}
       {!isSinglePanelView ? (
         <section
           aria-label="Channel messages and composer"
diff --git a/desktop/src/features/channels/ui/ChannelScreen.tsx b/desktop/src/features/channels/ui/ChannelScreen.tsx
index 094fc6567..c97693123 100644
--- a/desktop/src/features/channels/ui/ChannelScreen.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreen.tsx
@@ -565,6 +565,8 @@ export function ChannelScreen({
     resetKey: activeChannelId,
     enabled: !isSinglePanelView,
   });
+  const useSharedChannelHeaderBackdrop =
+    activeChannel?.channelType !== "forum" && !isSinglePanelView;
   React.useEffect(() => {
     setTopbarSearchHidden(isSinglePanelView);
     return () => {
@@ -590,6 +592,7 @@ export function ChannelScreen({
       onManageChannel={openChannelManagement}
       onToggleMembers={() => setIsMembersSidebarOpen((prev) => !prev)}
       showHeaderContent={!isSinglePanelView}
+      transparentChrome={useSharedChannelHeaderBackdrop}
     />
   );
 
diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index cda079449..c1c224541 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -26,6 +26,7 @@ type ChannelScreenHeaderProps = {
   isAddBotOpen?: boolean;
   isJoining?: boolean;
   showHeaderContent?: boolean;
+  transparentChrome?: boolean;
   onAddBotOpenChange?: (open: boolean) => void;
   onJoinChannel?: () => Promise<void>;
   onManageChannel: () => void;
@@ -46,6 +47,7 @@ export function ChannelScreenHeader({
   isJoining = false,
   onAddBotOpenChange,
   showHeaderContent = true,
+  transparentChrome = false,
   onJoinChannel,
   onManageChannel,
   onToggleMembers,
@@ -121,6 +123,7 @@ export function ChannelScreenHeader({
         />
       }
       title={activeChannelTitle}
+      transparentChrome={transparentChrome}
       visibility={activeChannel?.visibility}
     />
   );
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index a19256ffc..b227d370a 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -30,6 +30,7 @@ type ChatHeaderProps = {
   mode?: "home" | "channel" | "agents" | "workflows" | "pulse" | "projects";
   overlaysContent?: boolean;
   statusBadge?: React.ReactNode;
+  transparentChrome?: boolean;
 };
 
 const HEADER_ICON_CLASS = "h-4 w-4 text-muted-foreground";
@@ -92,6 +93,7 @@ export function ChatHeader({
   mode = "channel",
   overlaysContent = false,
   statusBadge,
+  transparentChrome = false,
 }: ChatHeaderProps) {
   const trimmedDescription = description?.trim() ?? "";
 
@@ -150,7 +152,9 @@ export function ChatHeader({
     <div
       ref={chromeWrapperRef}
       className={cn(
-        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+        transparentChrome
+          ? "pointer-events-none relative z-40"
+          : "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
         topChromeInset.padding,
         channelChrome.negativeMargin,
       )}
diff --git a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
index 1d91169c7..638bdf67e 100644
--- a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
+++ b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
@@ -16,7 +16,7 @@ export function AuxiliaryPanelHeader({
   return (
     <div
       className={cn(
-        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border/35 after:content-[''] supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+        "pointer-events-none relative z-40",
         topChromeInset.padding,
         channelChrome.negativeMargin,
         className,
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts
index 31ab2883e..a3d0becd8 100644
--- a/desktop/src/shared/layout/chromeLayout.ts
+++ b/desktop/src/shared/layout/chromeLayout.ts
@@ -42,7 +42,7 @@ export const insetHeaderOverlay = {
    * dividers across the header area.
    */
   backdrop:
-    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) bg-background/90 backdrop-blur-md supports-backdrop-filter:bg-background/85 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
 } as const;
 
 /** Tailwind class fragments for layout under the global top chrome. */
@@ -74,6 +74,12 @@ export const topChromeBackdrop = {
 export const channelChrome = {
   /** Padding-top that clears the measured channel header chrome. */
   contentPadding: "pt-(--buzz-channel-content-top-padding,5.75rem)",
+  /**
+   * Single full-width backdrop strip behind channel and auxiliary headers so
+   * backdrop blur samples continuously across column boundaries.
+   */
+  backdrop:
+    "pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-channel-content-top-padding,5.75rem) bg-background/90 backdrop-blur-md supports-backdrop-filter:bg-background/85 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
   /** Absolute/fixed top offset below the measured channel header chrome. */
   top: "top-(--buzz-channel-content-top-padding,5.75rem)",
   /** Height matching the measured channel header chrome. */