Add experiment logs to the monitoring page

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -30,6 +30,7 @@ import {
   StatusList, 
   RobotConnected 
 } from './MonitoringPageComponents';
+import ExperimentLogs from "./components/ExperimentLogs.tsx";
 
 // ----------------------------------------------------------------------
 // 1. State management
@@ -222,7 +223,7 @@ function ControlPanel({
 }: { 
   loading: boolean, 
   isPlaying: boolean, 
-  onAction: (a: "pause" | "play" | "nextPhase") => void, 
+  onAction: (a: "pause" | "play" | "nextPhase") => void,
   onReset: () => void 
 }) {
   return (
@@ -381,17 +382,8 @@ const MonitoringPage: React.FC = () => {
         )}
       </main>
 
-      {/* LOGS TODO: add actual logs */}
-      <aside className={styles.logs}>
-        <h3>Logs</h3>
-        <div className={styles.logHeader}>
-          <span>Global:</span>
-          <button>ALL</button>
-          <button>Add</button>
-          <button className={styles.live}>Live</button>
-        </div>
-        <textarea defaultValue="Example Log: much log"></textarea>
-      </aside>
+      {/* LOGS */}
+      <ExperimentLogs />
 
       {/* FOOTER */}
       <footer className={styles.controlsSection}>