desktop: move global search into sidebar header and remove vestigial top band

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()}

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: [],
 });
 

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}
-        />
-      )}
     </>
   );
 }

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>

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-14 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

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

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}

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" />

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-14 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">

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

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. */}