fix(ui): stop the space header remounting on every tab switch

Each space page pushed its own ChannelHeader through the header store on
mount and nulled it on unmount, so switching tabs tore down and rebuilt
the whole header — breadcrumb, tab strip, indicator — which read as a
flicker. WebsiteLayout now renders one persistent ChannelHeader for the
five page routes (page derived from the pathname), so a tab switch just
updates the page prop and the indicator slides. Task detail, new task,
canvases, and legacy-layout scenes keep the store path unchanged.

Generated-By: PostHog Code
Task-Id: 0331ac58-0a1c-4b4e-b884-2ff7d8e71986

Author: puemos

packages/ui/src/features/canvas/components/WebsiteLayout.tsx

@@ -24,6 +24,7 @@ import {
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { ChannelBreadcrumb } from "@posthog/ui/features/canvas/components/ChannelBreadcrumb";
+import { ChannelHeader } from "@posthog/ui/features/canvas/components/ChannelHeader";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
 import {
   channelPageIcon,
@@ -63,7 +64,7 @@ import {
   useParams,
   useRouterState,
 } from "@tanstack/react-router";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useMemo, useState } from "react";
 
 function threadIdFor(dashboardId: string): string {
   return `dashboard:${dashboardId}`;
@@ -429,6 +430,26 @@ export function WebsiteLayout() {
       ? "Space"
       : "Channel";
 
+  // The five space pages render one persistent header here rather than each
+  // scene pushing its own copy through the header store: a header that
+  // remounts on every tab switch flashes, while a stable instance lets the
+  // tab indicator slide. Scenes still push (harmlessly) for the legacy
+  // layout; everything else (task detail, new task, mirrored pages) keeps
+  // the store path.
+  const channelPage = useMemo(() => {
+    if (!spacesLayout || !channelId) return null;
+    if (pathname === base) return "home" as const;
+    if (pathname === `${base}/context`) return "context" as const;
+    if (pathname === `${base}/loops`) return "loops" as const;
+    if (pathname === `${base}/artifacts`) return "artifacts" as const;
+    if (pathname === `${base}/history`) return "history" as const;
+    return null;
+  }, [spacesLayout, channelId, base, pathname]);
+  const spaceHeader =
+    channelPage && channelId ? (
+      <ChannelHeader channelId={channelId} page={channelPage} />
+    ) : null;
+
   const isDashboardDetail = Boolean(channelId && dashboardId);
   // The canvases grid (its own sub-route now that the channel index is the
   // static homepage, which carries its own header content).
@@ -446,7 +467,7 @@ export function WebsiteLayout() {
           new task, CONTEXT.md) pushes its "# channel / leaf" breadcrumb into
           the header store, as do channel-less mirrored pages (Home, Skills, …).
           Hidden when the canvas toolbar is showing (grid / a single canvas). */}
-      {!showToolbar && headerContent && (
+      {!showToolbar && (spaceHeader ?? headerContent) && (
         <Flex
           align="center"
           gap="2"
@@ -460,7 +481,7 @@ export function WebsiteLayout() {
             justify="between"
             className="min-w-0 flex-1 overflow-hidden"
           >
-            {headerContent}
+            {spaceHeader ?? headerContent}
           </Flex>
           {channelTask && <TaskHeaderActions task={channelTask} />}
         </Flex>