new version full rebuild with claude opus 4.6 and own rdp daemon

frontend/src/components/Layout/MainLayout.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { Layout } from 'antd';
 import { TopNav } from '../Nav/TopNav';
 import { ConnectionTree } from '../Sidebar/ConnectionTree';
+import { ConnectionProperties } from '../Sidebar/ConnectionProperties';
 import { SessionTabs } from '../Tabs/SessionTabs';
 
 const { Content } = Layout;
@@ -10,10 +11,17 @@ const MIN_SIDEBAR = 180;
 const MAX_SIDEBAR = 600;
 const DEFAULT_SIDEBAR = 260;
 
+const MIN_PROPERTIES_HEIGHT = 150;
+const DEFAULT_TREE_FRACTION = 0.6;
+
 export const MainLayout: React.FC = () => {
   const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR);
+  const [treeFraction, setTreeFraction] = useState(DEFAULT_TREE_FRACTION);
   const isResizing = useRef(false);
+  const isVResizing = useRef(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
 
+  // Horizontal sidebar resize
   const onMouseDown = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     isResizing.current = true;
@@ -38,6 +46,36 @@ export const MainLayout: React.FC = () => {
     document.addEventListener('mouseup', onMouseUp);
   }, []);
 
+  // Vertical splitter between tree and properties
+  const onVMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isVResizing.current = true;
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+
+    const onMouseMove = (me: MouseEvent) => {
+      if (!isVResizing.current || !sidebarRef.current) return;
+      const rect = sidebarRef.current.getBoundingClientRect();
+      const totalHeight = rect.height;
+      const relativeY = me.clientY - rect.top;
+      const propertiesHeight = totalHeight - relativeY;
+      // Enforce min heights
+      if (propertiesHeight < MIN_PROPERTIES_HEIGHT || relativeY < MIN_PROPERTIES_HEIGHT) return;
+      setTreeFraction(relativeY / totalHeight);
+    };
+
+    const onMouseUp = () => {
+      isVResizing.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, []);
+
   return (
     <Layout style={{ height: '100vh', overflow: 'hidden' }}>
       <TopNav />
@@ -45,6 +83,7 @@ export const MainLayout: React.FC = () => {
       <div style={{ display: 'flex', flexDirection: 'row', flex: 1, overflow: 'hidden' }}>
         {/* Resizable sidebar */}
         <div
+          ref={sidebarRef}
           style={{
             width: sidebarWidth,
             flexShrink: 0,
@@ -55,7 +94,36 @@ export const MainLayout: React.FC = () => {
             background: '#fff',
           }}
         >
-          <ConnectionTree />
+          {/* Connection tree (top) */}
+          <div style={{ flex: `0 0 ${treeFraction * 100}%`, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+            <ConnectionTree />
+          </div>
+
+          {/* Vertical splitter */}
+          <div
+            onMouseDown={onVMouseDown}
+            style={{
+              height: 4,
+              cursor: 'row-resize',
+              background: 'transparent',
+              flexShrink: 0,
+              zIndex: 10,
+              borderTop: '1px solid #f0f0f0',
+              transition: 'background 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLDivElement).style.background = '#1677ff40';
+            }}
+            onMouseLeave={(e) => {
+              if (!isVResizing.current)
+                (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+            }}
+          />
+
+          {/* Connection properties (bottom) */}
+          <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+            <ConnectionProperties />
+          </div>
         </div>
 
         {/* Resize handle */}