refactor: tighten private analytics header

src/components/ChatAnalysisHeader.scss

@@ -2,6 +2,8 @@
   position: relative;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 16px;
   min-height: 28px;
   padding: 4px 0;
   background: transparent;
@@ -107,9 +109,28 @@
   }
 }
 
+.chat-analysis-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
 @media (max-width: 768px) {
+  .chat-analysis-header {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
   .chat-analysis-breadcrumb {
     flex-wrap: wrap;
     row-gap: 4px;
   }
+
+  .chat-analysis-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
 }

src/components/ChatAnalysisHeader.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown, ChevronLeft } from 'lucide-react'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ChatAnalysisHeader.scss'
 
@@ -7,6 +7,7 @@ export type ChatAnalysisMode = 'private' | 'group'
 
 interface ChatAnalysisHeaderProps {
   currentMode: ChatAnalysisMode
+  actions?: ReactNode
 }
 
 const MODE_CONFIG: Record<ChatAnalysisMode, { label: string; path: string }> = {
@@ -20,7 +21,7 @@ const MODE_CONFIG: Record<ChatAnalysisMode, { label: string; path: string }> = {
   }
 }
 
-function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) {
+function ChatAnalysisHeader({ currentMode, actions }: ChatAnalysisHeaderProps) {
   const navigate = useNavigate()
   const currentLabel = MODE_CONFIG[currentMode].label
   const [menuOpen, setMenuOpen] = useState(false)
@@ -95,6 +96,8 @@ function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) {
           )}
         </div>
       </div>
+
+      {actions ? <div className="chat-analysis-actions">{actions}</div> : null}
     </div>
   )
 }