feat(ui): complete layout redesign — three-panel desk layout

Replaced the hero + scrollable grid with a fixed-height three-column
workspace:
- Left (fixed 288px): Kira avatar + compact chat + text input
- Center (flex): Large focus timer + notes
- Right (fixed 256px): Music, white noise, wardrobe, pets

Thin top bar: scene selector dots + clock
Thin bottom bar: status + connection indicator

No cards, no scrollable grid, no wasted space. Clean, modern,
everything visible at once. Avatar fills full sidebar height.

frontend/src/App.tsx

@@ -1,6 +1,4 @@
 import { useState, useEffect } from 'react';
-import Clock from './components/Clock';
-import BackgroundScene from './components/BackgroundScene';
 import MusicPlayer from './components/MusicPlayer';
 import Timer from './components/Timer';
 import Notes from './components/Notes';
@@ -9,7 +7,6 @@ import KiraAvatar from './components/KiraAvatar';
 import ChatBubble from './components/ChatBubble';
 import PetZone from './components/PetZone';
 import Wardrobe from './components/Wardrobe';
-import Toolbar from './components/Toolbar';
 import Particles from './components/Particles';
 import WelcomeScreen from './components/WelcomeScreen';
 import { SCENES, type Scene } from './components/scenes';
@@ -37,7 +34,6 @@ export default function App() {
   const [currentAcc, setCurrentAcc] = useState<string | null>(null);
   const [textInput, setTextInput] = useState('');
 
-  // Apply saved preferences once they load
   useEffect(() => {
     if (preferences.scene) setCurrentSceneId(preferences.scene);
     if (preferences.outfit) setCurrentOutfit(preferences.outfit);
@@ -76,54 +72,53 @@ export default function App() {
     identify(name);
   };
 
-  // Show WelcomeScreen for first-time users
   if (!identified && !loadingPrefs) {
     const savedId = localStorage.getItem('kira-user-id');
     if (!savedId) {
       return <WelcomeScreen onComplete={handleWelcome} />;
     }
-    // Has saved ID but not identified yet — show welcome with their name
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
+      <div className="h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20">
         <div className="max-w-sm w-full p-6 text-center space-y-4">
-          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
-            <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
-              <span className="text-2xl">🌸</span>
-            </div>
-          </div>
-          <p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
+          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto" style={{ animation: 'pulse-glow 3s ease-in-out infinite' }}><div className="w-full h-full rounded-full bg-white flex items-center justify-center"><span className="text-2xl">🌸</span></div></div>
+          <p className="text-kira-plum/60 text-sm">coming back? say your name</p>
           <WelcomeScreen onComplete={handleWelcome} isCompact />
         </div>
-        <style>{`
-          @keyframes pulse-glow {
-            0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
-            50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
-          }
-          .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
-        `}</style>
+        <style>{'@keyframes pulse-glow{0%,100%{box-shadow:0 0 12px rgba(255,182,193,0.3)}50%{box-shadow:0 0 28px rgba(216,180,254,0.5)}}'}</style>
       </div>
     );
   }
 
-  // Main app with user's name in the greeting
   const userName = preferences.name || 'there';
 
   return (
-    <div
-      className="min-h-screen relative transition-all duration-1000"
-      style={{ background: currentScene.gradient }}
-    >
+    <div className="h-screen relative transition-all duration-1000" style={{ background: currentScene.gradient }}>
       <Particles type={currentScene.particles ?? 'none'} />
-
-      <div className="relative z-20 h-screen flex flex-col">
-        {/* Top toolbar */}
-        <div className="px-4 pt-4">
-          <Toolbar currentScene={currentSceneId} onSceneChange={handleSceneChange} />
+      <div className="relative z-20 h-full flex flex-col">
+        {/* ── Top bar: scene selector + clock ── */}
+        <div className="flex items-center justify-between px-5 py-3 shrink-0">
+          <div className="flex items-center gap-1">
+            {SCENES.map((s) => (
+              <button key={s.id} onClick={() => handleSceneChange(s.id)}
+                className={'w-8 h-8 rounded-full flex items-center justify-center text-sm transition-all '
+                  + (s.id === currentSceneId ? 'bg-white/60 shadow-sm scale-110' : 'hover:bg-white/30')}>
+                {s.icon}
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="text-kira-plum/30 text-xs font-medium">
+              {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} &middot; {new Date().toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })}
+            </span>
+            <span className="text-xs text-kira-plum/20">🌸 body double</span>
+          </div>
         </div>
 
-        {/* Hero: Avatar centered, ~1/3 of viewport */}
-        <div className="flex-none flex justify-center py-4 px-4">
-          <div className="w-full max-w-md">
+        {/* ── Main three-column body ── */}
+        <div className="flex-1 flex min-h-0 px-4 gap-4">
+          {/* LEFT: Avatar + Chat */}
+          <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}
@@ -132,73 +127,53 @@ export default function App() {
                 onTalkToggle={handleTalkToggle}
               />
             </div>
-        </div>
-
-        {/* Tools grid below the avatar */}
-        <div className="flex-1 overflow-y-auto px-4 pb-4 scrollbar-thin">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-7xl mx-auto">
-
-            {/* Column 1: Chat + Text Input */}
-            <div className="space-y-4">
+            <div className="shrink-0">
               <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
-
-              {/* Text input fallback */}
-              <div className="p-3">
-                <div className="text-[10px] text-kira-plum/30 mb-2">
-                  hey {userName} ✨
             </div>
-                <div className="flex gap-2">
+            <div className="shrink-0 flex gap-2">
               <input
                 value={textInput}
                 onChange={(e) => setTextInput(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
-                    placeholder={`what's up, ${userName}?`}
-                    className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
+                placeholder={`hey ${userName}...`}
+                className="flex-1 bg-white/40 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border-0 focus:outline-none focus:ring-2 focus:ring-kira-pink/30"
               />
-                  <button onClick={handleTextSend} className="btn-kira px-3 text-sm">
-                    Send
-                  </button>
-                </div>
-                <div className="flex items-center gap-2 mt-2 text-[10px] text-kira-plum/30">
-                  <span className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-kira-mint' : 'bg-red-300'}`} />
-                  {isConnected ? 'connected' : 'connecting...'}
-                </div>
+              <button onClick={handleTextSend} className="btn-kira px-4 text-sm shrink-0">Send</button>
             </div>
           </div>
 
-            {/* Column 2: Timer + Music */}
-            <div className="space-y-4">
+          {/* 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 />
-              <MusicPlayer />
             </div>
-
-            {/* Column 3: Notes + White Noise */}
-            <div className="space-y-4">
+            <div className="shrink-0">
               <Notes />
+            </div>
+          </div>
+
+          {/* RIGHT: Ambient + Companions */}
+          <div className="w-64 shrink-0 flex flex-col gap-3 overflow-y-auto">
+            <MusicPlayer />
             <WhiteNoise />
-            </div>
-
-            {/* Column 4: Cats + Wardrobe + Clock */}
-            <div className="space-y-4">
-              <Clock />
-              <PetZone />
             <Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
-            </div>
-
+            <PetZone />
           </div>
         </div>
 
-        {/* Bottom bar */}
-        <div className="px-4 pb-4">
-          <div className="px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
-            <div className="flex items-center gap-3">
-              <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
-              <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>
-            </div>
-            <div className="flex items-center gap-3">
-              <span className="hidden sm:inline">{identified ? `hi ${userName}` : 'body double mode'}</span>
-              <span>🌸</span>
+        {/* ── Bottom status bar ── */}
+        <div className="shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30">
+          <div className="flex items-center gap-2">
+            <span className={`w-1.5 h-1.5 rounded-full ${
+              isRecording ? 'bg-red-400 animate-pulse'
+              : isKiraSpeaking ? 'bg-kira-pink animate-pulse'
+              : 'bg-kira-mint'
+            }`} />
+            {isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking...' : `kira's here for you, ${userName}`}
           </div>
+          <div className="flex items-center gap-2">
+            <span className={isConnected ? '' : 'text-red-300'}>{isConnected ? '' : 'reconnecting...'}</span>
+            <span>💖</span>
           </div>
         </div>
       </div>

frontend/src/components/ChatBubble.tsx

@@ -22,7 +22,7 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
   }, [messages]);
 
   return (
-    <div className="p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
+    <div className="p-3 flex flex-col" style={{ maxHeight: 160 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>💬</span> Conversation
         <span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />

frontend/src/components/KiraAvatar.tsx

@@ -197,7 +197,7 @@ export default function KiraAvatar(props: Props) {
   `;
 
   return (
-    <div className="flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
+    <div className="flex flex-col items-center w-full h-full overflow-hidden">
       <div className="relative w-full flex-1" style={{ minHeight: 250 }}>
         <div
           ref={canvasRef}