Draggable handle added to log display

src/components/LogDock.jsx

@@ -1,21 +1,73 @@
-// components/LogDock.jsx
-import React from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 
 export default function LogDock({ open, onClose, lines, progress }) {
-  if (!open) return null; // don’t render if it's closed
+  const [height, setHeight] = useState(0.3 * window.innerHeight);
+  const startYRef = useRef(0);
+  const startHRef = useRef(height);
+  const resizingRef = useRef(false);
+
+  // to ensure the height is within bounds if window is resized
+  useEffect(() => {
+    const onResize = () => {
+      const maxH = Math.round(window.innerHeight * 0.9);
+      setHeight((h) => Math.min(Math.max(h, 120), maxH));
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const onMouseMove = useCallback((e) => {
+    if (!resizingRef.current) return;
+    const dy = startYRef.current - e.clientY; // dragging up increases height
+    const next = Math.round(startHRef.current + dy);
+    const minH = 120;
+    const maxH = Math.round(window.innerHeight * 0.9);
+    setHeight(Math.min(Math.max(next, minH), maxH));
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    resizingRef.current = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', stopResizing);
+  }, [onMouseMove]);
+
+  const onMouseDownHandle = (e) => {
+    resizingRef.current = true;
+    startYRef.current = e.clientY;
+    startHRef.current = height;
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', stopResizing);
+  };
+
+  if (!open) return null;
 
   return (
-    <div style={{
-      position: 'fixed',
-      left: 0, right: 0, bottom: 0,
-      height: '30vh',
-      background: '#111',
-      color: '#ddd',
-      borderTop: '1px solid #333',
-      display: 'flex',
-      flexDirection: 'column',
-      zIndex: 1000
-    }}>
+    <div
+      style={{
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height,
+        background: '#111',
+        color: '#ddd',
+        borderTop: '1px solid #333',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 1000,
+      }}
+    >
+      {/* Drag handle */}
+      <div
+        onMouseDown={onMouseDownHandle}
+        title="Drag to resize"
+        style={{
+          height: 3,
+          cursor: 'ns-resize',
+          background:
+            '#111',
+        }}
+      />
       {/* Header */}
       <div style={{ padding: '8px', display: 'flex', alignItems: 'center', gap: 12 }}>
         <strong>Simulation Logs</strong>