Update src/App.tsx

src/App.tsx

@@ -1,27 +1,28 @@
 import React, { useEffect } from 'react';
 import './App.css';
-import Toolbar from './components/Toolbar';
+import Toolbar   from './components/Toolbar';
 import LeftPanel from './components/LeftPanel';
-import Viewport from './components/Viewport';
+import Viewport  from './components/Viewport';
 import RightPanel from './components/RightPanel';
-import AIPanel from './components/AIPanel';
+import AIPanel   from './components/AIPanel';
+import Timeline  from './components/Timeline';
 import { useStudioStore } from './store/useStudioStore';
 
 function App() {
-  const { addError } = useStudioStore();
+  const { addError, mode } = useStudioStore();
 
-  // Global error boundary for Three.js/React errors
   useEffect(() => {
     const handler = (event: ErrorEvent) => {
       if (
-        event.message.includes('THREE') ||
-        event.message.includes('WebGL') ||
-        event.message.includes('fiber') ||
-        event.message.includes('drei') ||
+        event.message.includes('THREE')   ||
+        event.message.includes('WebGL')   ||
+        event.message.includes('fiber')   ||
+        event.message.includes('drei')    ||
         event.message.includes('Cannot read') ||
         event.message.includes('undefined')
       ) {
-        addError(event.message + (event.filename ? ` (${event.filename}:${event.lineno})` : ''));
+        addError(event.message +
+          (event.filename ? ` (${event.filename}:${event.lineno})` : ''));
       }
     };
     window.addEventListener('error', handler);
@@ -35,6 +36,7 @@ function App() {
         <LeftPanel />
         <div className="studio-center">
           <Viewport />
+          {mode === 'animate' && <Timeline />}
           <AIPanel />
         </div>
         <RightPanel />
@@ -43,4 +45,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;