From 554ecaed62e00e9214035b1c8dd079341dcae3c1 Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 14:25:19 -0400
Subject: [PATCH 1/6] desktop: move global search into sidebar header and
 remove vestigial top band

Move the global search out of the center-column topbar into the pinned
sidebar header (search on top, Home/nav below, always visible above the
scroll region), anchoring the results popover to the sidebar column.

With search gone from the topbar, remove the now-empty ~40px chrome inset
above the channel and thread/aux pane headers so they sit flush at the top.
The macOS window-controls row and the sidebar's own top-chrome inset are
preserved; window drag/maximize is unchanged (a window-global top-44px
handler, untouched here). Home/inbox panes keep their inset via the
default-off `flush` prop on TopChromeInsetHeader.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/app/AppShell.tsx                  | 16 +--
 desktop/src/app/AppShellContext.tsx           |  4 -
 desktop/src/app/AppTopChrome.tsx              | 99 -------------------
 .../features/channels/ui/ChannelScreen.tsx    |  7 --
 .../channels/ui/RightAuxiliaryPane.tsx        | 11 +--
 desktop/src/features/chat/ui/ChatHeader.tsx   |  3 +-
 .../src/features/search/ui/TopbarSearch.tsx   | 18 +++-
 .../src/features/sidebar/ui/AppSidebar.tsx    | 53 +++++++++-
 .../shared/layout/AuxiliaryPanelHeader.tsx    |  3 +-
 .../shared/layout/TopChromeInsetHeader.tsx    | 13 ++-
 desktop/src/shared/ui/ViewLoadingFallback.tsx | 15 +--
 desktop/tests/e2e/messaging.spec.ts           |  7 +-
 desktop/tests/e2e/smoke.spec.ts               | 35 +++++--
 13 files changed, 113 insertions(+), 171 deletions(-)

diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index 6e8882c0f2..79c0d6bcf9 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -101,8 +101,6 @@ export function AppShell() {
   const [isChannelManagementOpen, setIsChannelManagementOpen] =
     React.useState(false);
   const [searchFocusRequest, setSearchFocusRequest] = React.useState(0);
-  const [topbarSearchHidden, setTopbarSearchHidden] = React.useState(false);
-  const [topbarSearchLoading, setTopbarSearchLoading] = React.useState(false);
   const [browseDialogType, setBrowseDialogType] =
     React.useState<BrowseDialogType>(null);
   const [isNewDmOpen, setIsNewDmOpen] = React.useState(false);
@@ -709,8 +707,6 @@ export function AppShell() {
             unfollowThread: handleUnfollowThread,
             isFollowingThread,
             isNotifiedForThread,
-            setTopbarSearchHidden,
-            setTopbarSearchLoading,
             threadActivityItems,
           }}
         >
@@ -731,17 +727,8 @@ export function AppShell() {
                       <AppTopChrome
                         canGoBack={canGoBack}
                         canGoForward={canGoForward}
-                        channels={channels}
-                        currentPubkey={identityQuery.data?.pubkey}
                         onGoBack={goBack}
                         onGoForward={goForward}
-                        onOpenChannel={(channelId) => {
-                          void goChannel(channelId);
-                        }}
-                        onOpenResult={handleOpenSearchResult}
-                        searchHidden={topbarSearchHidden}
-                        searchLoading={topbarSearchLoading}
-                        searchFocusRequest={searchFocusRequest}
                       />
                     ) : null}
                     {settingsOpen ? (
@@ -875,6 +862,9 @@ export function AppShell() {
                           onSelectChannel={(channelId) =>
                             void goChannel(channelId)
                           }
+                          onOpenSearchResult={handleOpenSearchResult}
+                          searchChannels={channels}
+                          searchFocusRequest={searchFocusRequest}
                           onSelectHome={() => void goHome()}
                           onSelectProjects={() => void goProjects()}
                           onSelectPulse={() => void goPulse()}
diff --git a/desktop/src/app/AppShellContext.tsx b/desktop/src/app/AppShellContext.tsx
index bd27e3019f..3a34c881ce 100644
--- a/desktop/src/app/AppShellContext.tsx
+++ b/desktop/src/app/AppShellContext.tsx
@@ -31,8 +31,6 @@ type AppShellContextValue = {
   unfollowThread: (rootId: string) => void;
   isFollowingThread: (rootId: string) => boolean;
   isNotifiedForThread: (rootId: string) => boolean;
-  setTopbarSearchHidden: (hidden: boolean) => void;
-  setTopbarSearchLoading: (loading: boolean) => void;
   threadActivityItems: ThreadActivityItem[];
 };
 
@@ -51,8 +49,6 @@ const AppShellContext = React.createContext<AppShellContextValue>({
   unfollowThread: () => {},
   isFollowingThread: () => false,
   isNotifiedForThread: () => false,
-  setTopbarSearchHidden: () => {},
-  setTopbarSearchLoading: () => {},
   threadActivityItems: [],
 });
 
diff --git a/desktop/src/app/AppTopChrome.tsx b/desktop/src/app/AppTopChrome.tsx
index 29457553bf..1b010f2312 100644
--- a/desktop/src/app/AppTopChrome.tsx
+++ b/desktop/src/app/AppTopChrome.tsx
@@ -6,97 +6,16 @@ import {
 } from "lucide-react";
 import * as React from "react";
 
-import { TopbarSearch } from "@/features/search/ui/TopbarSearch";
-import type { Channel, SearchHit } from "@/shared/api/types";
-import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { useOptionalSidebar } from "@/shared/ui/sidebar";
-import { Skeleton } from "@/shared/ui/skeleton";
 
 type AppTopChromeProps = {
   canGoBack: boolean;
   canGoForward: boolean;
-  channels: Channel[];
-  currentPubkey?: string;
   onGoBack: () => void;
   onGoForward: () => void;
-  onOpenChannel: (channelId: string) => void;
-  onOpenResult: (hit: SearchHit) => void;
-  searchHidden?: boolean;
-  searchFocusRequest: number;
-  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,
-  onOpenChannel,
-  onOpenResult,
-  searchFocusRequest,
-  searchLoading = false,
-}: Pick<
-  AppTopChromeProps,
-  | "channels"
-  | "currentPubkey"
-  | "onOpenChannel"
-  | "onOpenResult"
-  | "searchFocusRequest"
-  | "searchLoading"
->) {
-  const sidebar = useOptionalSidebar();
-  const isResizing = sidebar?.isResizing ?? false;
-  const state = sidebar?.state ?? "collapsed";
-  const searchClassName =
-    "pointer-events-auto w-[220px] max-w-full md:w-[300px] lg:w-[360px] xl:w-[420px] 2xl:w-[480px]";
-
-  return (
-    <div
-      className="pointer-events-none fixed top-[7px] z-45 flex justify-center px-24 transition-[left] duration-200 ease-linear data-[resizing=true]:transition-none"
-      data-testid="topbar-search-column"
-      data-resizing={isResizing}
-      style={{
-        left: state === "expanded" ? "var(--sidebar-width)" : 0,
-        right: 0,
-      }}
-    >
-      {searchLoading ? (
-        <div
-          aria-hidden="true"
-          className={cn("h-7", searchClassName)}
-          data-testid="topbar-search-loading"
-        >
-          <Skeleton className="h-full w-full rounded-lg" />
-        </div>
-      ) : (
-        <TopbarSearch
-          channels={channels}
-          className={searchClassName}
-          currentPubkey={currentPubkey}
-          focusRequest={searchFocusRequest}
-          onOpenChannel={onOpenChannel}
-          onOpenResult={onOpenResult}
-        />
-      )}
-    </div>
-  );
-}
-
 const TOP_CHROME_ICON_BUTTON_CLASS =
   "h-7 w-7 rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground [&_svg]:size-4";
 const TOP_CHROME_WHEEL_GUARD_HEIGHT = 40;
@@ -126,15 +45,8 @@ function TopChromeSidebarTrigger() {
 export function AppTopChrome({
   canGoBack,
   canGoForward,
-  channels,
-  currentPubkey,
   onGoBack,
   onGoForward,
-  onOpenChannel,
-  onOpenResult,
-  searchHidden = false,
-  searchFocusRequest,
-  searchLoading = false,
 }: AppTopChromeProps) {
   React.useEffect(() => {
     const handleWheel = (event: WheelEvent) => {
@@ -159,7 +71,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
@@ -185,16 +96,6 @@ export function AppTopChrome({
           <ChevronRight />
         </Button>
       </div>
-      {searchHidden ? null : (
-        <CenterColumnTopbarSearch
-          channels={channels}
-          currentPubkey={currentPubkey}
-          onOpenChannel={onOpenChannel}
-          onOpenResult={onOpenResult}
-          searchFocusRequest={searchFocusRequest}
-          searchLoading={searchLoading}
-        />
-      )}
     </>
   );
 }
diff --git a/desktop/src/features/channels/ui/ChannelScreen.tsx b/desktop/src/features/channels/ui/ChannelScreen.tsx
index d3b21fa634..7835c0ff3b 100644
--- a/desktop/src/features/channels/ui/ChannelScreen.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreen.tsx
@@ -96,7 +96,6 @@ export function ChannelScreen({
     isFollowingThread,
     isNotifiedForThread,
     readStateVersion,
-    setTopbarSearchHidden,
   } = useAppShell();
   const {
     clearMessageRouteTarget,
@@ -589,12 +588,6 @@ export function ChannelScreen({
     resetKey: activeChannelId,
     enabled: !isSinglePanelView,
   });
-  React.useEffect(() => {
-    setTopbarSearchHidden(isSinglePanelView);
-    return () => {
-      setTopbarSearchHidden(false);
-    };
-  }, [isSinglePanelView, setTopbarSearchHidden]);
 
   const channelHeader = (
     <ChannelScreenHeader
diff --git a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
index 6dc74b073e..69d1043ef3 100644
--- a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
+++ b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
@@ -1,8 +1,6 @@
 import type * as React from "react";
 
 import { THREAD_PANEL_MIN_WIDTH_PX } from "@/shared/hooks/useThreadPanelWidth";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 
 type RightAuxiliaryPaneProps = {
   canResetWidth: boolean;
@@ -23,7 +21,7 @@ export function RightAuxiliaryPane({
 }: RightAuxiliaryPaneProps) {
   return (
     <aside
-      className="group/right-pane relative flex h-full shrink-0 flex-col overflow-hidden bg-background before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:top-(--buzz-top-chrome-height,2.5rem) before:z-40 before:w-px before:bg-border/80 before:content-['']"
+      className="group/right-pane relative flex h-full shrink-0 flex-col overflow-hidden bg-background before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:top-0 before:z-40 before:w-px before:bg-border/80 before:content-['']"
       data-testid={testId}
       style={{
         maxWidth: `calc(100% - ${THREAD_PANEL_MIN_WIDTH_PX}px)`,
@@ -43,12 +41,7 @@ export function RightAuxiliaryPane({
         }
         type="button"
       >
-        <span
-          className={cn(
-            "absolute bottom-0 left-1/2 w-px -translate-x-1/2 bg-transparent group-hover/right-pane-resize:bg-border/80 group-focus-visible/right-pane-resize:bg-border/80",
-            topChromeInset.top,
-          )}
-        />
+        <span className="absolute bottom-0 left-1/2 top-0 w-px -translate-x-1/2 bg-transparent group-hover/right-pane-resize:bg-border/80 group-focus-visible/right-pane-resize:bg-border/80" />
       </button>
       <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
         {children}
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 5f61717b02..81a6ce6f0e 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -14,7 +14,7 @@ import type * as React from "react";
 import type { ChannelType, ChannelVisibility } from "@/shared/api/types";
 import { UpdateIndicator } from "@/features/settings/UpdateIndicator";
 import { cn } from "@/shared/lib/cn";
-import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
+import { channelChrome } from "@/shared/layout/chromeLayout";
 
 type ChatHeaderProps = {
   actions?: React.ReactNode;
@@ -151,7 +151,6 @@ export function ChatHeader({
       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",
-        topChromeInset.padding,
         channelChrome.negativeMargin,
       )}
     >
diff --git a/desktop/src/features/search/ui/TopbarSearch.tsx b/desktop/src/features/search/ui/TopbarSearch.tsx
index 2d3ec49958..4b77ba56b2 100644
--- a/desktop/src/features/search/ui/TopbarSearch.tsx
+++ b/desktop/src/features/search/ui/TopbarSearch.tsx
@@ -22,6 +22,8 @@ import {
 import { Skeleton } from "@/shared/ui/skeleton";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
 
+type SearchPlacement = "topbar" | "sidebar";
+
 type TopbarSearchProps = {
   channels: Channel[];
   className?: string;
@@ -29,6 +31,18 @@ type TopbarSearchProps = {
   focusRequest?: number;
   onOpenChannel: (channelId: string) => void;
   onOpenResult: (hit: SearchHit) => void;
+  /**
+   * Controls how the results popover is anchored. `topbar` centers a wide
+   * panel under the input; `sidebar` left-anchors a narrower panel that fits
+   * within the persistent sidebar column.
+   */
+  placement?: SearchPlacement;
+};
+
+const RESULTS_POPOVER_CLASS: Record<SearchPlacement, string> = {
+  topbar:
+    "left-1/2 w-[620px] max-w-[min(82vw,620px)] -translate-x-1/2 slide-in-from-top-1",
+  sidebar: "left-0 right-0 w-auto slide-in-from-top-1",
 };
 
 function describeSearchHit(hit: SearchHit) {
@@ -145,6 +159,7 @@ export function TopbarSearch({
   focusRequest = 0,
   onOpenChannel,
   onOpenResult,
+  placement = "topbar",
 }: TopbarSearchProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selectedMenuIndex, setSelectedMenuIndex] = React.useState(0);
@@ -275,7 +290,8 @@ export function TopbarSearch({
         <div
           aria-busy={searchQuery.isLoading && results.length === 0}
           className={cn(
-            "absolute left-1/2 top-full z-50 mt-1 w-[620px] max-w-[min(82vw,620px)] -translate-x-1/2 origin-top overflow-hidden rounded-xl slide-in-from-top-1",
+            "absolute top-full z-50 mt-1 origin-top overflow-hidden rounded-xl",
+            RESULTS_POPOVER_CLASS[placement],
             POPOVER_CUSTOM_ENTER_MOTION_CLASS,
             POPOVER_SURFACE_CLASS,
           )}
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index 24dd20f7bc..aceb8f52dc 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -11,6 +11,7 @@ import * as React from "react";
 import { AnimatePresence } from "motion/react";
 import { FeatureGate } from "@/shared/features";
 import { SidebarDndContext } from "@/features/sidebar/ui/SidebarDnd";
+import { TopbarSearch } from "@/features/search/ui/TopbarSearch";
 
 import type { Workspace } from "@/features/workspaces/types";
 import { AddWorkspaceDialog } from "@/features/workspaces/ui/AddWorkspaceDialog";
@@ -54,6 +55,7 @@ import type {
   ChannelVisibility,
   PresenceStatus,
   Profile,
+  SearchHit,
   UserStatus,
 } from "@/shared/api/types";
 import {
@@ -66,6 +68,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
+  useSidebar,
 } from "@/shared/ui/sidebar";
 
 type CollapsibleSidebarGroup =
@@ -141,6 +144,14 @@ type AppSidebarProps = {
   onSelectWorkflows: () => void;
   onSelectHome: () => void;
   onSelectChannel: (channelId: string) => void;
+  onOpenSearchResult: (hit: SearchHit) => void;
+  /**
+   * Full channel set used for global search. Unlike `channels` (which is
+   * scoped to the viewer's joined sidebar list), this includes open channels
+   * the viewer hasn't joined, so search can surface them.
+   */
+  searchChannels: Channel[];
+  searchFocusRequest: number;
   onSelectSettings: (section?: "profile" | "appearance") => void;
   onSetPresenceStatus?: (status: "online" | "away" | "offline") => void;
   onSetUserStatus: (text: string, emoji: string) => void;
@@ -201,6 +212,9 @@ export function AppSidebar({
   onSelectWorkflows,
   onSelectHome,
   onSelectChannel,
+  onOpenSearchResult,
+  searchChannels,
+  searchFocusRequest,
   onSelectSettings,
   onSetPresenceStatus,
   onSetUserStatus,
@@ -235,6 +249,24 @@ export function AppSidebar({
   const scrollRef = React.useRef<HTMLDivElement>(null);
   useSidebarScrollLock(scrollRef);
 
+  // Search lives in the sidebar's pinned header, so a ⌘K focus request must
+  // first reveal the sidebar. When collapsed (offcanvas) on desktop the input
+  // is mounted but translated off-screen; on mobile it is unmounted entirely.
+  // Open the sidebar on each focus-request bump so the input the shortcut
+  // focuses is actually visible. Skips the initial mount (request === 0).
+  const { isMobile, setOpen, setOpenMobile } = useSidebar();
+  React.useEffect(() => {
+    if (searchFocusRequest === 0) {
+      return;
+    }
+
+    if (isMobile) {
+      setOpenMobile(true);
+    } else {
+      setOpen(true);
+    }
+  }, [searchFocusRequest, isMobile, setOpen, setOpenMobile]);
+
   React.useEffect(() => {
     const scrollElement = scrollRef.current;
     if (!scrollElement) return;
@@ -486,12 +518,20 @@ export function AppSidebar({
             testId="sidebar-more-unread-above"
           />
         ) : null}
-        <SidebarContent
-          className="buzz-sidebar-scrollbar mt-(--buzz-top-chrome-height,2.5rem) overscroll-none"
-          ref={scrollRef}
+        <div
+          className="mt-(--buzz-top-chrome-height,2.5rem) shrink-0 px-2 pt-2"
+          data-testid="sidebar-pinned-header"
         >
+          <TopbarSearch
+            channels={searchChannels}
+            currentPubkey={currentPubkey}
+            focusRequest={searchFocusRequest}
+            onOpenChannel={onSelectChannel}
+            onOpenResult={onOpenSearchResult}
+            placement="sidebar"
+          />
           <SidebarHeader
-            className="cursor-default select-none"
+            className="cursor-default select-none px-0 pb-0 pt-2"
             data-tauri-drag-region
           >
             <SidebarMenu>
@@ -570,7 +610,12 @@ export function AppSidebar({
               </FeatureGate>
             </SidebarMenu>
           </SidebarHeader>
+        </div>
 
+        <SidebarContent
+          className="buzz-sidebar-scrollbar overscroll-none"
+          ref={scrollRef}
+        >
           {isLoading ? (
             <SidebarLoadingContent shape={sidebarLoadingShape} />
           ) : null}
diff --git a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
index 1d91169c78..a7e94fded5 100644
--- a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
+++ b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
+import { channelChrome } from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
 
 type AuxiliaryPanelHeaderProps = React.ComponentProps<"div">;
@@ -17,7 +17,6 @@ export function AuxiliaryPanelHeader({
     <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",
-        topChromeInset.padding,
         channelChrome.negativeMargin,
         className,
       )}
diff --git a/desktop/src/shared/layout/TopChromeInsetHeader.tsx b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
index 66f554c883..1be4222395 100644
--- a/desktop/src/shared/layout/TopChromeInsetHeader.tsx
+++ b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
@@ -3,23 +3,28 @@ 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"> & {
+  /** Drop the top-chrome inset so the header sits flush at y=0. */
+  flush?: boolean;
+};
 
 /**
  * Flowed header row that clears the global search/drag chrome and draws the
- * horizontal separator at the bottom edge of that inset.
+ * horizontal separator at the bottom edge of that inset. Pass `flush` to drop
+ * the inset and sit the header at the top (e.g. channel/thread panes).
  */
 export function TopChromeInsetHeader({
   className,
   children,
+  flush = false,
   ...props
 }: TopChromeInsetHeaderProps) {
   return (
     <div
       className={cn(
         topChromeInset.headerBase,
-        topChromeInset.padding,
-        topChromeInset.divider,
+        !flush && topChromeInset.padding,
+        !flush && topChromeInset.divider,
         className,
       )}
       {...props}
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 68a194ddf6..7ebf491d6e 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -1,6 +1,3 @@
-import * as React from "react";
-
-import { useAppShell } from "@/app/AppShellContext";
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
 import { cn } from "@/shared/lib/cn";
@@ -23,7 +20,7 @@ type ViewLoadingFallbackProps = {
 
 function LoadingHeaderSkeleton() {
   return (
-    <TopChromeInsetHeader data-tauri-drag-region>
+    <TopChromeInsetHeader data-tauri-drag-region flush>
       <header className="flex min-h-8 min-w-0 cursor-default select-none items-center gap-2.5 px-5 py-1.5">
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-1 overflow-hidden">
@@ -396,19 +393,9 @@ export function ViewLoadingFallback({
   includeHeader = false,
   kind,
 }: ViewLoadingFallbackProps) {
-  const { setTopbarSearchLoading } = useAppShell();
   const shouldShowChannelHeader =
     includeHeader && (kind === "channel" || kind === "forum");
 
-  React.useLayoutEffect(() => {
-    if (!includeHeader) return;
-
-    setTopbarSearchLoading(true);
-    return () => {
-      setTopbarSearchLoading(false);
-    };
-  }, [includeHeader, setTopbarSearchLoading]);
-
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
       {shouldShowChannelHeader ? (
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 81e1f7f838..e1371260dc 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -813,15 +813,12 @@ test("narrow thread view collapses channel header actions into a menu", async ({
   await expect(page.getByTestId("channel-management-trigger")).toBeVisible();
 });
 
-test("single-panel thread view hides topbar search and channel actions", async ({
-  page,
-}) => {
+test("single-panel thread view hides channel actions", async ({ page }) => {
   await page.setViewportSize({ width: 860, height: 720 });
 
   await page.goto("/");
   await page.getByTestId("channel-general").click();
   await expect(page.getByTestId("chat-title")).toHaveText("general");
-  await expect(page.getByTestId("open-search")).toBeVisible();
   await expect(page.getByTestId("channel-add-bot-trigger")).toHaveCount(0);
 
   const rootMessage = page.locator('[data-message-id="mock-general-alice"]');
@@ -831,13 +828,11 @@ test("single-panel thread view hides topbar search and channel actions", async (
   await page.getByTestId("reply-message-mock-general-alice").click();
   await expect(threadPanel).toBeVisible();
   await expect(threadPanel.getByTestId("message-thread-back")).toBeVisible();
-  await expect(page.getByTestId("open-search")).toHaveCount(0);
   await expect(page.getByTestId("channel-actions-menu-trigger")).toHaveCount(0);
   await expect(page.getByTestId("channel-add-bot-trigger")).toHaveCount(0);
 
   await threadPanel.getByTestId("message-thread-back").click();
   await expect(page.getByTestId("chat-title")).toHaveText("general");
-  await expect(page.getByTestId("open-search")).toBeVisible();
   await expect(page.getByTestId("channel-add-bot-trigger")).toHaveCount(0);
 });
 
diff --git a/desktop/tests/e2e/smoke.spec.ts b/desktop/tests/e2e/smoke.spec.ts
index 0e39569e7a..96f0b3073f 100644
--- a/desktop/tests/e2e/smoke.spec.ts
+++ b/desktop/tests/e2e/smoke.spec.ts
@@ -40,7 +40,7 @@ async function ensureTimelineScrollable(
   expect(metrics.scrollHeight).toBeGreaterThan(metrics.clientHeight + 160);
 }
 
-async function focusTopbarSearchWithShortcut(
+async function focusSidebarSearchWithShortcut(
   page: import("@playwright/test").Page,
 ) {
   const openSearchButton = page.getByTestId("open-search");
@@ -213,12 +213,12 @@ test("home feed renders resolved author labels", async ({ page }) => {
   await expect(page.getByTestId("home-inbox-list")).not.toContainText("You");
 });
 
-test("opens topbar search with the shortcut and loads the exact result", async ({
+test("opens sidebar search with the shortcut and loads the exact result", async ({
   page,
 }) => {
   await page.goto("/");
 
-  await focusTopbarSearchWithShortcut(page);
+  await focusSidebarSearchWithShortcut(page);
 
   await page.getByTestId("open-search").fill("shipped");
   await expect(page.getByTestId("search-results")).toContainText(
@@ -242,7 +242,7 @@ test("opens topbar search with the shortcut and loads the exact result", async (
 test("opens channel matches from search", async ({ page }) => {
   await page.goto("/");
 
-  await focusTopbarSearchWithShortcut(page);
+  await focusSidebarSearchWithShortcut(page);
 
   await page.getByTestId("open-search").fill("engineering");
   const results = page.getByTestId("search-results");
@@ -269,12 +269,35 @@ test("opens channel matches from search", async ({ page }) => {
   await expect(page.getByTestId("chat-title")).toHaveText("engineering");
 });
 
+test("reopens the collapsed sidebar when the search shortcut fires", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await expect(page.getByTestId("open-search")).toBeVisible();
+
+  const sidebarRoot = page.locator('[data-side="left"][data-state]');
+  await expect(sidebarRoot).toHaveAttribute("data-state", "expanded");
+
+  // Collapse the sidebar; its pinned-header search slides off-screen.
+  await page
+    .getByRole("button", { name: "Toggle Sidebar", exact: true })
+    .click();
+  await expect(sidebarRoot).toHaveAttribute("data-state", "collapsed");
+
+  await focusSidebarSearchWithShortcut(page);
+
+  // The shortcut reveals the sidebar and focuses the search input.
+  await expect(sidebarRoot).toHaveAttribute("data-state", "expanded");
+  await expect(page.getByTestId("open-search")).toBeFocused();
+});
+
 test("search results use your resolved profile label instead of You", async ({
   page,
 }) => {
   await page.goto("/");
 
-  await focusTopbarSearchWithShortcut(page);
+  await focusSidebarSearchWithShortcut(page);
 
   await page.getByTestId("open-search").fill("welcome");
   const results = page.getByTestId("search-results");
@@ -289,7 +312,7 @@ test("opens accessible unjoined channels from search in read-only mode", async (
 }) => {
   await page.goto("/");
 
-  await focusTopbarSearchWithShortcut(page);
+  await focusSidebarSearchWithShortcut(page);
 
   await page.getByTestId("open-search").fill("critique");
   const results = page.getByTestId("search-results");

From ce8298f2a510a9b8c577709e53b1f7a6bebf5a2e Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 14:55:13 -0400
Subject: [PATCH 2/6] desktop: remove vestigial top band from Home and Agents
 panels

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>

Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/app/routes/agents.tsx                | 4 +---
 desktop/src/features/agents/ui/AgentsScreen.tsx  | 2 --
 desktop/src/features/agents/ui/AgentsView.tsx    | 2 +-
 desktop/src/features/home/ui/InboxDetailPane.tsx | 2 +-
 desktop/src/features/home/ui/InboxListPane.tsx   | 2 +-
 desktop/src/shared/ui/ViewLoadingFallback.tsx    | 2 +-
 6 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/desktop/src/app/routes/agents.tsx b/desktop/src/app/routes/agents.tsx
index c70ff7eb9f..b3783eb5c5 100644
--- a/desktop/src/app/routes/agents.tsx
+++ b/desktop/src/app/routes/agents.tsx
@@ -14,9 +14,7 @@ export const Route = createFileRoute("/agents")({
 
 function AgentsRouteComponent() {
   return (
-    <React.Suspense
-      fallback={<ViewLoadingFallback includeHeader kind="agents" />}
-    >
+    <React.Suspense fallback={<ViewLoadingFallback kind="agents" />}>
       <AgentsScreen />
     </React.Suspense>
   );
diff --git a/desktop/src/features/agents/ui/AgentsScreen.tsx b/desktop/src/features/agents/ui/AgentsScreen.tsx
index 88c2cfe543..9bcedca67f 100644
--- a/desktop/src/features/agents/ui/AgentsScreen.tsx
+++ b/desktop/src/features/agents/ui/AgentsScreen.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 
 const AgentsView = React.lazy(async () => {
@@ -11,7 +10,6 @@ const AgentsView = React.lazy(async () => {
 export function AgentsScreen() {
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <TopChromeBackdrop />
       <React.Suspense fallback={<ViewLoadingFallback kind="agents" />}>
         <AgentsView />
       </React.Suspense>
diff --git a/desktop/src/features/agents/ui/AgentsView.tsx b/desktop/src/features/agents/ui/AgentsView.tsx
index 7590f6ff69..a082a63438 100644
--- a/desktop/src/features/agents/ui/AgentsView.tsx
+++ b/desktop/src/features/agents/ui/AgentsView.tsx
@@ -42,7 +42,7 @@ export function AgentsView() {
 
   return (
     <>
-      <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-14 sm:px-6">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
           <div className="flex flex-col gap-6">
             <UnifiedAgentsSection
diff --git a/desktop/src/features/home/ui/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index 79ca0ee4bb..5c7faeb37b 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -234,7 +234,7 @@ export function InboxDetailPane({
       ref={detailPaneRef}
     >
       <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-        <TopChromeInsetHeader>
+        <TopChromeInsetHeader flush>
           <div className="px-5 py-1 pr-3">
             <div className="flex min-w-0 items-center justify-between gap-3">
               <div
diff --git a/desktop/src/features/home/ui/InboxListPane.tsx b/desktop/src/features/home/ui/InboxListPane.tsx
index 670c95b465..6d81d24482 100644
--- a/desktop/src/features/home/ui/InboxListPane.tsx
+++ b/desktop/src/features/home/ui/InboxListPane.tsx
@@ -149,7 +149,7 @@ export function InboxListPane({
         showRightDivider && topChromeInset.verticalDivider,
       )}
     >
-      <TopChromeInsetHeader>
+      <TopChromeInsetHeader flush>
         <div className="px-5 py-1">
           {/* Cap to the list-column width so the right-aligned dropdown stays
               put when the pane goes full-width in reminders mode. */}
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 7ebf491d6e..3c58dd1029 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -260,7 +260,7 @@ function AgentTeamsSkeleton() {
 
 function AgentsLoadingBody() {
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-14 sm:px-6">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
         <div className="flex flex-col gap-6">
           <AgentsLibrarySkeleton />

From f4c1fa3dd60c47c977858c5cb4a93c47605d0b09 Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 15:04:36 -0400
Subject: [PATCH 3/6] desktop: remove vestigial top band from Workflows and
 Projects panels

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/app/routes/projects.$projectId.tsx           | 4 +---
 desktop/src/app/routes/projects.tsx                      | 4 +---
 desktop/src/app/routes/workflows.$workflowId.tsx         | 4 +---
 desktop/src/app/routes/workflows.tsx                     | 4 +---
 desktop/src/features/projects/ui/ProjectDetailScreen.tsx | 4 +---
 desktop/src/features/projects/ui/ProjectsScreen.tsx      | 2 --
 desktop/src/features/projects/ui/ProjectsView.tsx        | 2 +-
 desktop/src/features/workflows/ui/WorkflowsView.tsx      | 4 +---
 desktop/src/shared/ui/ViewLoadingFallback.tsx            | 2 +-
 9 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/desktop/src/app/routes/projects.$projectId.tsx b/desktop/src/app/routes/projects.$projectId.tsx
index b4389c76bb..48956f5783 100644
--- a/desktop/src/app/routes/projects.$projectId.tsx
+++ b/desktop/src/app/routes/projects.$projectId.tsx
@@ -18,9 +18,7 @@ function ProjectDetailRouteComponent() {
   const { projectId } = Route.useParams();
 
   return (
-    <React.Suspense
-      fallback={<ViewLoadingFallback includeHeader kind="projects" />}
-    >
+    <React.Suspense fallback={<ViewLoadingFallback kind="projects" />}>
       <ProjectDetailScreen projectId={projectId} />
     </React.Suspense>
   );
diff --git a/desktop/src/app/routes/projects.tsx b/desktop/src/app/routes/projects.tsx
index a0affa93e4..cc9f215490 100644
--- a/desktop/src/app/routes/projects.tsx
+++ b/desktop/src/app/routes/projects.tsx
@@ -16,9 +16,7 @@ export const Route = createFileRoute("/projects")({
 function ProjectsRouteComponent() {
   usePreviewFeatureWarning("projects");
   return (
-    <React.Suspense
-      fallback={<ViewLoadingFallback includeHeader kind="projects" />}
-    >
+    <React.Suspense fallback={<ViewLoadingFallback kind="projects" />}>
       <ProjectsScreen />
     </React.Suspense>
   );
diff --git a/desktop/src/app/routes/workflows.$workflowId.tsx b/desktop/src/app/routes/workflows.$workflowId.tsx
index 22689d3fde..f6a74aa15d 100644
--- a/desktop/src/app/routes/workflows.$workflowId.tsx
+++ b/desktop/src/app/routes/workflows.$workflowId.tsx
@@ -18,9 +18,7 @@ function WorkflowDetailRouteComponent() {
   const { workflowId } = Route.useParams();
 
   return (
-    <React.Suspense
-      fallback={<ViewLoadingFallback includeHeader kind="workflows" />}
-    >
+    <React.Suspense fallback={<ViewLoadingFallback kind="workflows" />}>
       <WorkflowsRouteScreen selectedWorkflowId={workflowId} />
     </React.Suspense>
   );
diff --git a/desktop/src/app/routes/workflows.tsx b/desktop/src/app/routes/workflows.tsx
index 6d23971d3e..7ab6461fd0 100644
--- a/desktop/src/app/routes/workflows.tsx
+++ b/desktop/src/app/routes/workflows.tsx
@@ -16,9 +16,7 @@ const WorkflowsRouteScreen = React.lazy(async () => {
 function WorkflowsRouteComponent() {
   usePreviewFeatureWarning("workflows");
   return (
-    <React.Suspense
-      fallback={<ViewLoadingFallback includeHeader kind="workflows" />}
-    >
+    <React.Suspense fallback={<ViewLoadingFallback kind="workflows" />}>
       <WorkflowsRouteScreen selectedWorkflowId={null} />
     </React.Suspense>
   );
diff --git a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
index f01f383d6d..623231b381 100644
--- a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
+++ b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
@@ -15,7 +15,6 @@ import { useUsersBatchQuery } from "@/features/profile/hooks";
 import { resolveUserLabel } from "@/features/profile/lib/identity";
 import { isSafeUrl } from "@/shared/lib/url";
 import { Button } from "@/shared/ui/button";
-import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
 
 function CloneUrlRow({ url }: { url: string }) {
@@ -125,8 +124,7 @@ export function ProjectDetailScreen({ projectId }: ProjectDetailScreenProps) {
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <TopChromeBackdrop />
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4 pt-14">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
         <div className="mb-4">
           <Button
             className="gap-1.5 text-muted-foreground"
diff --git a/desktop/src/features/projects/ui/ProjectsScreen.tsx b/desktop/src/features/projects/ui/ProjectsScreen.tsx
index 1cc33ed052..9d13c574d4 100644
--- a/desktop/src/features/projects/ui/ProjectsScreen.tsx
+++ b/desktop/src/features/projects/ui/ProjectsScreen.tsx
@@ -1,10 +1,8 @@
 import { ProjectsView } from "@/features/projects/ui/ProjectsView";
-import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 
 export function ProjectsScreen() {
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <TopChromeBackdrop />
       <ProjectsView />
     </div>
   );
diff --git a/desktop/src/features/projects/ui/ProjectsView.tsx b/desktop/src/features/projects/ui/ProjectsView.tsx
index 715fe4c18a..4ffdea88cf 100644
--- a/desktop/src/features/projects/ui/ProjectsView.tsx
+++ b/desktop/src/features/projects/ui/ProjectsView.tsx
@@ -48,7 +48,7 @@ export function ProjectsView() {
   }
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4 pt-14">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
       <div className="mb-3 flex items-center gap-2">
         <h2 className="text-sm font-medium text-muted-foreground">
           {projects.length} {projects.length === 1 ? "project" : "projects"}
diff --git a/desktop/src/features/workflows/ui/WorkflowsView.tsx b/desktop/src/features/workflows/ui/WorkflowsView.tsx
index eeb657adef..a628fd83af 100644
--- a/desktop/src/features/workflows/ui/WorkflowsView.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowsView.tsx
@@ -16,7 +16,6 @@ import {
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
-import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 
 type WorkflowsViewProps = {
   channels: Channel[];
@@ -166,9 +165,8 @@ export function WorkflowsView({
       className="relative flex min-h-0 flex-1 overflow-hidden"
       data-testid="workflows-view"
     >
-      <TopChromeBackdrop />
       <div
-        className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-14"
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4"
         data-scroll-restoration-id="workflows-list"
       >
         <div className="mb-4 flex items-center justify-between">
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 3c58dd1029..b8d376bb87 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -273,7 +273,7 @@ function AgentsLoadingBody() {
 
 function CardListLoadingBody() {
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-14 sm:px-6">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4 sm:px-6">
       <div className="mb-4 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           <Skeleton className="h-6 w-28" />

From 9d965de0b1e2bc22fe3351abe2ff0fa9888ac003 Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 15:21:14 -0400
Subject: [PATCH 4/6] desktop: drop pt-14 from Home loading/error states

The inbox loading skeleton and the no-feed error state still carried the pt-14 top inset, leaving a transient vestigial band before the real flush headers rendered. Drop it to match the flush treatment applied to the rest of the Home/Agents/Workflows/Projects panels.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/features/home/ui/HomeLoadingState.tsx | 4 ++--
 desktop/src/features/home/ui/HomeView.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/home/ui/HomeLoadingState.tsx b/desktop/src/features/home/ui/HomeLoadingState.tsx
index e0358c0a4d..696219c97b 100644
--- a/desktop/src/features/home/ui/HomeLoadingState.tsx
+++ b/desktop/src/features/home/ui/HomeLoadingState.tsx
@@ -5,7 +5,7 @@ export function HomeLoadingState() {
     <div className="min-h-0 flex-1 overflow-hidden">
       <div className="grid h-full min-h-0 w-full lg:grid-cols-[320px_minmax(0,1fr)]">
         <div className="relative overflow-hidden bg-background/60 after:absolute after:bottom-0 after:right-0 after:top-10 after:w-px after:bg-border/70 after:content-['']">
-          <div className="px-5 py-1 pt-14">
+          <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]">
                 <Skeleton className="h-4 w-4 shrink-0 rounded-md" />
@@ -51,7 +51,7 @@ export function HomeLoadingState() {
         </div>
 
         <div className="relative flex min-h-0 flex-col overflow-hidden bg-background/60">
-          <div className="px-5 py-1 pr-3 pt-14">
+          <div className="px-5 py-1 pr-3">
             <div className="flex min-w-0 items-center justify-between gap-3">
               <div className="flex min-w-0 items-center gap-[4px]">
                 <Skeleton className="h-4 w-4 shrink-0 rounded-md" />
diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx
index fd5085bb31..81d93be87d 100644
--- a/desktop/src/features/home/ui/HomeView.tsx
+++ b/desktop/src/features/home/ui/HomeView.tsx
@@ -326,7 +326,7 @@ export function HomeView({
 
   if (!feed) {
     return (
-      <div className="flex-1 overflow-hidden px-4 pb-3 pt-14 sm:px-6">
+      <div className="flex-1 overflow-hidden px-4 pb-3 pt-4 sm:px-6">
         <div className="flex w-full max-w-3xl flex-col gap-4">
           <div className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-5">
             <p className="text-base font-semibold tracking-tight">

From 6ee1875fdba8c280a000e679f829dbee7cd09401 Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 15:32:02 -0400
Subject: [PATCH 5/6] desktop: clear top drag region in flush panels without
 the band
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removing the vestigial TopChromeBackdrop also dropped the pt-14 that doubled as clearance for the global window-drag region (AppTopChrome's fixed top-0 z-20 h-10 strip, which is draggable so it can't be pointer-events-none). With only pt-4, the first-row controls (Workflows' Create CTA, Projects' back button, the Agents library header) landed under that strip and Playwright clicks were intercepted — the Desktop Smoke E2E failure Max flagged.

Restore clearance with the purpose-built topChromeInset.padding token (40px = the drag-strip height) instead of an arbitrary pad, on the Workflows/Projects/Agents loaded views, their loading skeletons (CardListLoadingBody, AgentsLoadingBody), the Projects detail screen, and the Home feed-error state. No visible band returns; interactive content just clears the drag strip. navigation + workflows + agents e2e all green.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/features/agents/ui/AgentsView.tsx    |  9 ++++++++-
 desktop/src/features/home/ui/HomeView.tsx        |  7 ++++++-
 .../features/projects/ui/ProjectDetailScreen.tsx |  9 ++++++++-
 .../src/features/projects/ui/ProjectsView.tsx    |  9 ++++++++-
 .../src/features/workflows/ui/WorkflowsView.tsx  |  7 ++++++-
 desktop/src/shared/ui/ViewLoadingFallback.tsx    | 16 +++++++++++++---
 6 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentsView.tsx b/desktop/src/features/agents/ui/AgentsView.tsx
index a082a63438..639bd3569f 100644
--- a/desktop/src/features/agents/ui/AgentsView.tsx
+++ b/desktop/src/features/agents/ui/AgentsView.tsx
@@ -1,3 +1,5 @@
+import { topChromeInset } from "@/shared/layout/chromeLayout";
+import { cn } from "@/shared/lib/cn";
 import { AddAgentToChannelDialog } from "./AddAgentToChannelDialog";
 import { AddTeamToChannelDialog } from "./AddTeamToChannelDialog";
 import { BatchImportDialog } from "./BatchImportDialog";
@@ -42,7 +44,12 @@ export function AgentsView() {
 
   return (
     <>
-      <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
+      <div
+        className={cn(
+          "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
+          topChromeInset.padding,
+        )}
+      >
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
           <div className="flex flex-col gap-6">
             <UnifiedAgentsSection
diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx
index 81d93be87d..29b792c203 100644
--- a/desktop/src/features/home/ui/HomeView.tsx
+++ b/desktop/src/features/home/ui/HomeView.tsx
@@ -326,7 +326,12 @@ export function HomeView({
 
   if (!feed) {
     return (
-      <div className="flex-1 overflow-hidden px-4 pb-3 pt-4 sm:px-6">
+      <div
+        className={cn(
+          "flex-1 overflow-hidden px-4 pb-3 sm:px-6",
+          topChromeInset.padding,
+        )}
+      >
         <div className="flex w-full max-w-3xl flex-col gap-4">
           <div className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-5">
             <p className="text-base font-semibold tracking-tight">
diff --git a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
index 623231b381..86439d5a70 100644
--- a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
+++ b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
@@ -13,6 +13,8 @@ import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useProjectQuery } from "@/features/projects/hooks";
 import { useUsersBatchQuery } from "@/features/profile/hooks";
 import { resolveUserLabel } from "@/features/profile/lib/identity";
+import { topChromeInset } from "@/shared/layout/chromeLayout";
+import { cn } from "@/shared/lib/cn";
 import { isSafeUrl } from "@/shared/lib/url";
 import { Button } from "@/shared/ui/button";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
@@ -124,7 +126,12 @@ export function ProjectDetailScreen({ projectId }: ProjectDetailScreenProps) {
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
+      <div
+        className={cn(
+          "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
+          topChromeInset.padding,
+        )}
+      >
         <div className="mb-4">
           <Button
             className="gap-1.5 text-muted-foreground"
diff --git a/desktop/src/features/projects/ui/ProjectsView.tsx b/desktop/src/features/projects/ui/ProjectsView.tsx
index 4ffdea88cf..8ca16846e7 100644
--- a/desktop/src/features/projects/ui/ProjectsView.tsx
+++ b/desktop/src/features/projects/ui/ProjectsView.tsx
@@ -2,6 +2,8 @@ import { ExternalLink, FolderGit2, GitFork, Users } from "lucide-react";
 
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useProjectsQuery } from "@/features/projects/hooks";
+import { topChromeInset } from "@/shared/layout/chromeLayout";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 
@@ -48,7 +50,12 @@ export function ProjectsView() {
   }
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
+    <div
+      className={cn(
+        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
+        topChromeInset.padding,
+      )}
+    >
       <div className="mb-3 flex items-center gap-2">
         <h2 className="text-sm font-medium text-muted-foreground">
           {projects.length} {projects.length === 1 ? "project" : "projects"}
diff --git a/desktop/src/features/workflows/ui/WorkflowsView.tsx b/desktop/src/features/workflows/ui/WorkflowsView.tsx
index a628fd83af..59de0c288d 100644
--- a/desktop/src/features/workflows/ui/WorkflowsView.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowsView.tsx
@@ -13,6 +13,8 @@ import {
   getChannelWorkflows,
   triggerWorkflow,
 } from "@/shared/api/tauriWorkflows";
+import { topChromeInset } from "@/shared/layout/chromeLayout";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
@@ -166,7 +168,10 @@ export function WorkflowsView({
       data-testid="workflows-view"
     >
       <div
-        className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4"
+        className={cn(
+          "flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
+          topChromeInset.padding,
+        )}
         data-scroll-restoration-id="workflows-list"
       >
         <div className="mb-4 flex items-center justify-between">
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index b8d376bb87..09cef49048 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -1,7 +1,7 @@
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
 import { cn } from "@/shared/lib/cn";
-import { channelChrome } from "@/shared/layout/chromeLayout";
+import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 
@@ -260,7 +260,12 @@ function AgentTeamsSkeleton() {
 
 function AgentsLoadingBody() {
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
+    <div
+      className={cn(
+        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
+        topChromeInset.padding,
+      )}
+    >
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
         <div className="flex flex-col gap-6">
           <AgentsLibrarySkeleton />
@@ -273,7 +278,12 @@ function AgentsLoadingBody() {
 
 function CardListLoadingBody() {
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4 sm:px-6">
+    <div
+      className={cn(
+        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 sm:px-6",
+        topChromeInset.padding,
+      )}
+    >
       <div className="mb-4 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           <Skeleton className="h-6 w-28" />

From 164ec275f35478088b32a3f068183530d26e6d9a Mon Sep 17 00:00:00 2001
From: Tyler Longwell <tlongwell@block.xyz>
Date: Fri, 19 Jun 2026 16:48:31 -0400
Subject: [PATCH 6/6] desktop: restore top drag-region inset on the channel
 header

The vestigial-band cleanup dropped topChromeInset.padding from the
channel header chrome wrapper. Every other flush panel (Workflows,
Projects, Agents, Home, the loading skeletons) kept that 40px inset as
invisible clearance for the global window-drag strip when the visible
band was removed; the channel header was the one surface that lost it
outright.

The wrapper's height is measured into --buzz-channel-content-top-padding,
which drives the message scroll container's top padding. Losing 40px
tipped the Welcome timeline from "just barely scrollable" to "exactly
fits": with no overflow, the bottom-anchored welcome intro (mt-auto) had
no slack to redistribute, so it never reflowed down when the composer
banner dismissed. onboarding.spec.ts:1063 asserts that reflow and timed
out deterministically. Restoring the inset returns the channel pane to
the same clearance as its sibling panels and the same overflow margin as
main; the reflow fires and the test passes.

No visible band returns -- the header still sits flush; this only
restores the invisible drag-strip clearance.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
---
 desktop/src/features/chat/ui/ChatHeader.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 81a6ce6f0e..5f61717b02 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -14,7 +14,7 @@ import type * as React from "react";
 import type { ChannelType, ChannelVisibility } from "@/shared/api/types";
 import { UpdateIndicator } from "@/features/settings/UpdateIndicator";
 import { cn } from "@/shared/lib/cn";
-import { channelChrome } from "@/shared/layout/chromeLayout";
+import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
 
 type ChatHeaderProps = {
   actions?: React.ReactNode;
@@ -151,6 +151,7 @@ export function ChatHeader({
       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",
+        topChromeInset.padding,
         channelChrome.negativeMargin,
       )}
     >