From e8968ee87b4938df7e137336adffd2e433e26850 Mon Sep 17 00:00:00 2001
From: Kaloyan Nikolov <konik98@gmail.com>
Date: Thu, 26 Feb 2026 01:53:04 +0100
Subject: [PATCH] feat: center session name in header

- Use flexbox to horizontally center session title
- Add absolute positioned spacer for menu button
- Session name now perfectly centered in the top bar
- Message count and streaming badge remain centered below
- Export button stays on the right side
- All 52 tests passing
---
 src/components/ChatWindow.tsx | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 37de9e5..a574bdc 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -161,17 +161,39 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
       height: '100vh',
       backgroundColor: 'var(--bg-primary)'
     }}>
-      {/* Header - Added padding-left to avoid overlap with menu button */}
+      {/* Header */}
       <header style={{
         display: 'flex',
         alignItems: 'center',
-        padding: '16px 20px 16px 80px',
+        padding: '16px 20px',
         borderBottom: '1px solid var(--border)',
         backgroundColor: 'var(--bg-secondary)',
         boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-        minHeight: '64px'
+        minHeight: '64px',
+        position: 'relative'
       }}>
-        <div style={{ flex: 1 }}>
+        {/* Menu button area spacer */}
+        <div style={{ 
+          position: 'absolute',
+          left: '16px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%'
+        }}>
+          {/* This space is reserved for the menu button in App */}
+        </div>
+
+        {/* Centered Session Name */}
+        <div style={{ 
+          flex: 1, 
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center'
+        }}>
           <h1 style={{ 
             fontSize: '18px', 
             fontWeight: 600,
@@ -186,6 +208,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
               color: 'var(--text-muted)',
               display: 'flex',
               alignItems: 'center',
+              justifyContent: 'center',
               gap: '8px'
             }}>
               <span>{getMessageCount()} messages</span>
@@ -204,6 +227,8 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
             </div>
           )}
         </div>
+
+        {/* Export button on the right */}
         <div style={{ display: 'flex', gap: '8px' }}>
           <button
             onClick={exportConversation}