From ceb98608c2303ea9d5975e8ab3fb510263d2690c Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Thu, 25 Jun 2026 14:18:08 +0100
Subject: [PATCH] Fix profile sidebar CI failures

---
 .../features/profile/ui/UserProfilePanel.tsx  | 57 ++++-----------
 .../ui/UserProfilePanelHeaderControls.tsx     | 72 +++++++++++++++++++
 desktop/tests/e2e/mentions.spec.ts            |  2 +-
 3 files changed, 88 insertions(+), 43 deletions(-)
 create mode 100644 desktop/src/features/profile/ui/UserProfilePanelHeaderControls.tsx

diff --git a/desktop/src/features/profile/ui/UserProfilePanel.tsx b/desktop/src/features/profile/ui/UserProfilePanel.tsx
index 813c32886..f7beecea4 100644
--- a/desktop/src/features/profile/ui/UserProfilePanel.tsx
+++ b/desktop/src/features/profile/ui/UserProfilePanel.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ArrowLeft, X } from "lucide-react";
 import { toast } from "sonner";
 
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
@@ -7,7 +6,6 @@ import {
   useAgentMemoryQuery,
   useIsManagedAgent,
 } from "@/features/agent-memory/hooks";
-import { MemoryRefreshButton } from "@/features/agent-memory/ui/MemorySection";
 import {
   type AttachManagedAgentToChannelResult,
   useAcpRuntimesQuery,
@@ -85,8 +83,6 @@ import { useIsThreadPanelOverlay } from "@/shared/hooks/use-mobile";
 import { THREAD_PANEL_MIN_WIDTH_PX } from "@/shared/hooks/useThreadPanelWidth";
 import {
   AuxiliaryPanelHeader,
-  AuxiliaryPanelHeaderGroup,
-  AuxiliaryPanelTitle,
   auxiliaryPanelContentPaddingClass,
 } from "@/shared/layout/AuxiliaryPanelHeader";
 import { cn } from "@/shared/lib/cn";
@@ -97,13 +93,16 @@ import type {
   CreatePersonaInput,
   UpdatePersonaInput,
 } from "@/shared/api/types";
-import { Button } from "@/shared/ui/button";
 import {
   OverlayPanelBackdrop,
   PANEL_BASE_CLASS,
   PANEL_OVERLAY_CLASS,
   PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS,
 } from "@/shared/ui/OverlayPanelBackdrop";
+import {
+  UserProfilePanelHeaderActions,
+  UserProfilePanelHeaderLeft,
+} from "./UserProfilePanelHeaderControls";
 
 export type { ProfilePanelView };
 
@@ -712,46 +711,20 @@ export function UserProfilePanel({
   });
 
   const headerLeftContent = (
-    <AuxiliaryPanelHeaderGroup>
-      {view !== "summary" ? (
-        <Button
-          aria-label="Back to profile"
-          className="shrink-0"
-          data-testid="user-profile-panel-back"
-          onClick={() => setView("summary")}
-          size="icon"
-          type="button"
-          variant="outline"
-        >
-          <ArrowLeft />
-        </Button>
-      ) : null}
-      <AuxiliaryPanelTitle>
-        {PROFILE_PANEL_VIEW_TITLES[view]}
-      </AuxiliaryPanelTitle>
-    </AuxiliaryPanelHeaderGroup>
+    <UserProfilePanelHeaderLeft
+      title={PROFILE_PANEL_VIEW_TITLES[view]}
+      view={view}
+      onBack={() => setView("summary")}
+    />
   );
 
   const headerActions = (
-    <div className="ml-auto flex shrink-0 items-center gap-2">
-      {view === "memories" && viewerIsOwner && effectivePubkey ? (
-        <MemoryRefreshButton
-          agentPubkey={effectivePubkey}
-          variant="outline"
-          viewerIsOwner={viewerIsOwner}
-        />
-      ) : null}
-      <Button
-        aria-label="Close profile"
-        data-testid="user-profile-panel-close"
-        onClick={onClose}
-        size="icon"
-        type="button"
-        variant="ghost"
-      >
-        <X />
-      </Button>
-    </div>
+    <UserProfilePanelHeaderActions
+      effectivePubkey={effectivePubkey}
+      view={view}
+      viewerIsOwner={viewerIsOwner}
+      onClose={onClose}
+    />
   );
 
   const profileBody = (
diff --git a/desktop/src/features/profile/ui/UserProfilePanelHeaderControls.tsx b/desktop/src/features/profile/ui/UserProfilePanelHeaderControls.tsx
new file mode 100644
index 000000000..f590bdecb
--- /dev/null
+++ b/desktop/src/features/profile/ui/UserProfilePanelHeaderControls.tsx
@@ -0,0 +1,72 @@
+import { ArrowLeft, X } from "lucide-react";
+
+import { MemoryRefreshButton } from "@/features/agent-memory/ui/MemorySection";
+import type { ProfilePanelView } from "@/features/profile/ui/UserProfilePanelUtils";
+import {
+  AuxiliaryPanelHeaderGroup,
+  AuxiliaryPanelTitle,
+} from "@/shared/layout/AuxiliaryPanelHeader";
+import { Button } from "@/shared/ui/button";
+
+export function UserProfilePanelHeaderLeft({
+  title,
+  view,
+  onBack,
+}: {
+  title: string;
+  view: ProfilePanelView;
+  onBack: () => void;
+}) {
+  return (
+    <AuxiliaryPanelHeaderGroup>
+      {view !== "summary" ? (
+        <Button
+          aria-label="Back to profile"
+          className="shrink-0"
+          data-testid="user-profile-panel-back"
+          onClick={onBack}
+          size="icon"
+          type="button"
+          variant="outline"
+        >
+          <ArrowLeft />
+        </Button>
+      ) : null}
+      <AuxiliaryPanelTitle>{title}</AuxiliaryPanelTitle>
+    </AuxiliaryPanelHeaderGroup>
+  );
+}
+
+export function UserProfilePanelHeaderActions({
+  effectivePubkey,
+  view,
+  viewerIsOwner,
+  onClose,
+}: {
+  effectivePubkey: string | null;
+  view: ProfilePanelView;
+  viewerIsOwner: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <div className="ml-auto flex shrink-0 items-center gap-2">
+      {view === "memories" && viewerIsOwner && effectivePubkey ? (
+        <MemoryRefreshButton
+          agentPubkey={effectivePubkey}
+          variant="outline"
+          viewerIsOwner={viewerIsOwner}
+        />
+      ) : null}
+      <Button
+        aria-label="Close profile"
+        data-testid="user-profile-panel-close"
+        onClick={onClose}
+        size="icon"
+        type="button"
+        variant="ghost"
+      >
+        <X />
+      </Button>
+    </div>
+  );
+}
diff --git a/desktop/tests/e2e/mentions.spec.ts b/desktop/tests/e2e/mentions.spec.ts
index c969bd2a0..25ec481fc 100644
--- a/desktop/tests/e2e/mentions.spec.ts
+++ b/desktop/tests/e2e/mentions.spec.ts
@@ -1034,7 +1034,7 @@ test("clicking author name opens user profile panel", async ({ page }) => {
   // Click now opens the full profile panel instead of the popover
   const panel = page.getByTestId("user-profile-panel");
   await expect(panel).toBeVisible();
-  await expect(panel).toContainText("deadbeef");
+  await expect(panel).toContainText("npub1mock...");
 });
 
 test("hovering avatar opens popover, clicking opens profile panel", async ({