From 0f9dd34b6e9e9cf634158740a9890e94793cda52 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Sat, 18 Jul 2026 00:31:47 +0100
Subject: [PATCH] feat(ui): scope the breadcrumb row to task detail

The in-pane breadcrumb/header row now renders only on the task-detail
view. Every other page drops it (the title bar search carries wayfinding
instead); the /website Channels space keeps its own header via
WebsiteLayout and is unaffected.

Also stop the Skills and MCP servers pages from pushing header content,
so their mirrored appearance in the Channels space loses the row too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K18PGBxVQy1fnC9ADbst3y
---
 .../mcp-servers/components/McpServersView.tsx  | 18 ------------------
 packages/ui/src/features/skills/SkillsView.tsx | 18 ------------------
 packages/ui/src/shell/ContentHeader.tsx        | 18 ++++++++++++------
 3 files changed, 12 insertions(+), 42 deletions(-)

diff --git a/packages/ui/src/features/mcp-servers/components/McpServersView.tsx b/packages/ui/src/features/mcp-servers/components/McpServersView.tsx
index 1b28254cb3..791d4d702e 100644
--- a/packages/ui/src/features/mcp-servers/components/McpServersView.tsx
+++ b/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,
diff --git a/packages/ui/src/features/skills/SkillsView.tsx b/packages/ui/src/features/skills/SkillsView.tsx
index f482f67e29..371dce5002 100644
--- a/packages/ui/src/features/skills/SkillsView.tsx
+++ b/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)">
diff --git a/packages/ui/src/shell/ContentHeader.tsx b/packages/ui/src/shell/ContentHeader.tsx
index b59e135db3..74f34c089d 100644
--- a/packages/ui/src/shell/ContentHeader.tsx
+++ b/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 (