From 15199dfdee993859b01ced4851aa0e75eb7d7534 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Fri, 5 Jun 2026 12:44:17 -0400
Subject: [PATCH] feat(layout): move avatar to center hero position;
 timer+notes+chat to left sidebar

---
 frontend/src/App.tsx | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 803bb14..1960f1c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -116,16 +116,13 @@ export default function App() {
 
         {/* ── Main three-column body ── */}
         <div className="flex-1 flex min-h-0 px-4 gap-4">
-          {/* LEFT: Avatar + Chat */}
+          {/* LEFT: Focus Timer + Chat + Input */}
           <div className="w-72 shrink-0 flex flex-col gap-3">
-            <div className="flex-1 min-h-0 rounded-2xl bg-white/30 overflow-hidden">
-              <KiraAvatar
-                isSpeaking={isKiraSpeaking}
-                isListening={isRecording}
-                outfit={currentOutfit}
-                accessory={currentAcc}
-                onTalkToggle={handleTalkToggle}
-              />
+            <div className="shrink-0">
+              <Timer />
+            </div>
+            <div className="shrink-0">
+              <Notes />
             </div>
             <div className="shrink-0">
               <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
@@ -142,14 +139,15 @@ export default function App() {
             </div>
           </div>
 
-          {/* CENTER: Focus Timer + Notes */}
-          <div className="flex-1 flex flex-col gap-4 min-w-0">
-            <div className="flex-1 flex items-center justify-center">
-              <Timer />
-            </div>
-            <div className="shrink-0">
-              <Notes />
-            </div>
+          {/* CENTER: Avatar (hero) */}
+          <div className="flex-1 min-w-0 rounded-2xl bg-white/30 overflow-hidden">
+            <KiraAvatar
+              isSpeaking={isKiraSpeaking}
+              isListening={isRecording}
+              outfit={currentOutfit}
+              accessory={currentAcc}
+              onTalkToggle={handleTalkToggle}
+            />
           </div>
 
           {/* RIGHT: Ambient + Companions */}