feat(ui): scope the breadcrumb row to task detail (#3560)

Author: adamleithp

packages/ui/src/features/mcp-servers/components/McpServersView.tsx

@@ -1,4 +1,3 @@
-import { Plugs } from "@phosphor-icons/react";
 import type {
   McpRecommendedServer,
   McpServerInstallation,
@@ -8,7 +7,6 @@ import { AddCustomServerForm } from "@posthog/ui/features/mcp-server-manager/Add
 import { MarketplaceView } from "@posthog/ui/features/mcp-servers/components/parts/MarketplaceView";
 import { McpInstalledRail } from "@posthog/ui/features/mcp-servers/components/parts/McpInstalledRail";
 import { useMcpServers } from "@posthog/ui/features/mcp-servers/hooks/useMcpServers";
-import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import {
   AlertDialog,
   Box,
@@ -46,22 +44,6 @@ export function McpServersView() {
     null,
   );
 
-  const headerContent = useMemo(
-    () => (
-      <Flex align="center" gap="2" className="w-full min-w-0">
-        <Plugs size={12} className="shrink-0 text-gray-10" />
-        <Text
-          className="truncate whitespace-nowrap font-medium text-[13px]"
-          title="MCP servers"
-        >
-          MCP servers
-        </Text>
-      </Flex>
-    ),
-    [],
-  );
-  useSetHeaderContent(headerContent);
-
   const {
     installations,
     installationsLoading,

packages/ui/src/features/skills/SkillsView.tsx

@@ -11,7 +11,6 @@ import {
   TextField,
 } from "@radix-ui/themes";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useSetHeaderContent } from "../../hooks/useSetHeaderContent";
 import { ResizableSidebar } from "../../primitives/ResizableSidebar";
 import { MarketplaceBrowse } from "./MarketplaceBrowse";
 import { NewSkillDialog } from "./NewSkillDialog";
@@ -115,23 +114,6 @@ export function SkillsView() {
     return map;
   }, [skills, searchQuery]);
 
-  const headerContent = useMemo(
-    () => (
-      <Flex align="center" gap="2" className="w-full min-w-0">
-        <Lightbulb size={12} className="shrink-0 text-gray-10" />
-        <Text
-          className="truncate whitespace-nowrap font-medium text-[13px]"
-          title="Skills"
-        >
-          Skills
-        </Text>
-      </Flex>
-    ),
-    [],
-  );
-
-  useSetHeaderContent(headerContent);
-
   return (
     <Flex direction="column" height="100%" className="overflow-hidden">
       <Box px="4" className="shrink-0 border-b border-b-(--gray-5)">

packages/ui/src/shell/ContentHeader.tsx

@@ -5,12 +5,15 @@ import { useHeaderStore } from "@posthog/ui/shell/headerStore";
 import { Flex } from "@radix-ui/themes";
 
 // The in-pane content header for the unified Bluebird chrome. Shows the active
-// view's title (pushed into the header store by each view) on the left and, on
-// a task detail, that task's action row (TaskHeaderActions) on the right — the
-// branch selector, review-panel toggle, cloud/local handoff, skill buttons and
-// task actions that used to live in the Code header bar. Renders nothing when
-// neither is present. The /website space keeps its own header (WebsiteLayout),
-// so this is mounted only outside it.
+// view's title (pushed into the header store by each view) on the left and that
+// task's action row (TaskHeaderActions) on the right — the branch selector,
+// review-panel toggle, cloud/local handoff, skill buttons and task actions that
+// used to live in the Code header bar.
+//
+// This breadcrumb row is now scoped to the task-detail view only: every other
+// page drops it (the title bar search carries wayfinding instead). The /website
+// (Channels) space keeps its own header (WebsiteLayout), so it's unaffected —
+// this is mounted only outside it.
 export function ContentHeader() {
   const content = useHeaderStore((state) => state.content);
   const view = useAppView();
@@ -22,6 +25,9 @@ export function ContentHeader() {
     : undefined;
   const showTaskSection = view.type === "task-detail" && Boolean(activeTask);
 
+  // Only the task-detail view keeps the breadcrumb row.
+  if (view.type !== "task-detail") return null;
+
   if (!content && !showTaskSection) return null;
 
   return (