Fix layout bug, tabs height, and RDP tunnel UUID handshake

- MainLayout: replace inner <Layout> with row-flex div so sidebar and
  session tabs appear side-by-side instead of stacked vertically
- global.css: add Ant Design Tabs CSS overrides so tab pane content
  fills available height (SSH terminal and RDP canvas sized correctly)
- rdp.ts: send guacd's ready-UUID as first WebSocket message so
  Guacamole.WebSocketTunnel completes its tunnel handshake correctly
- RdpTab: add connecting/error/disconnected status overlays for
  visibility when RDP fails

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/websocket/rdp.ts

@@ -1,4 +1,5 @@
 import { createConnection, Socket } from 'net';
+import { randomUUID } from 'crypto';
 import { FastifyInstance, FastifyRequest } from 'fastify';
 import { SocketStream } from '@fastify/websocket';
 import { WebSocket } from 'ws';
@@ -165,7 +166,12 @@ export async function rdpWebsocket(fastify: FastifyInstance) {
           throw new Error(`guacd handshake failed: expected 'ready', got '${readyInstruction[0]}'`);
         }
 
-        // 5. Flush any buffered bytes that arrived after 'ready'
+        // 5. Send the guacd connection UUID as the first WebSocket message.
+        //    Guacamole.WebSocketTunnel expects this as its tunnel-UUID handshake.
+        const guacdUUID = readyInstruction[1] ?? randomUUID();
+        socket.send(guacdUUID);
+
+        // 6. Flush any buffered bytes that arrived after 'ready'
         if (tcpBuf.value.length > 0 && socket.readyState === WebSocket.OPEN) {
           socket.send(tcpBuf.value);
           tcpBuf.value = '';

frontend/src/components/Layout/MainLayout.tsx

@@ -42,7 +42,7 @@ export const MainLayout: React.FC = () => {
     <Layout style={{ height: '100vh', overflow: 'hidden' }}>
       <TopNav />
 
-      <Layout style={{ flex: 1, overflow: 'hidden' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', flex: 1, overflow: 'hidden' }}>
         {/* Resizable sidebar */}
         <div
           style={{
@@ -89,7 +89,7 @@ export const MainLayout: React.FC = () => {
         >
           <SessionTabs />
         </Content>
-      </Layout>
+      </div>
     </Layout>
   );
 };

frontend/src/components/Tabs/RdpTab.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Alert, Spin } from 'antd';
 import Guacamole from 'guacamole-common-js';
 import { useStore } from '../../store';
 import { Session } from '../../types';
@@ -7,6 +8,8 @@ interface Props {
   session: Session;
 }
 
+type Status = 'connecting' | 'connected' | 'disconnected' | 'error';
+
 function getWsUrl(connectionId: string, token: string): string {
   const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const host = window.location.host;
@@ -16,11 +19,16 @@ function getWsUrl(connectionId: string, token: string): string {
 export const RdpTab: React.FC<Props> = ({ session }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const token = useStore((s) => s.token) ?? '';
+  const [status, setStatus] = useState<Status>('connecting');
+  const [errorMsg, setErrorMsg] = useState<string>('');
 
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
+    setStatus('connecting');
+    setErrorMsg('');
+
     const url = getWsUrl(session.connection.id, token);
     const tunnel = new Guacamole.WebSocketTunnel(url);
     const client = new Guacamole.Client(tunnel);
@@ -30,7 +38,7 @@ export const RdpTab: React.FC<Props> = ({ session }) => {
     displayEl.style.cursor = 'default';
     container.appendChild(displayEl);
 
-    // Mouse input — forward all mouse events to guacd
+    // Mouse input
     const mouse = new Guacamole.Mouse(displayEl);
     const sendMouse = (mouseState: Guacamole.Mouse.State) =>
       client.sendMouseState(mouseState, true);
@@ -52,21 +60,29 @@ export const RdpTab: React.FC<Props> = ({ session }) => {
       display.scale(Math.min(scaleX, scaleY));
     };
 
-    client.getDisplay().onresize = fitDisplay;
+    client.getDisplay().onresize = () => {
+      setStatus('connected');
+      fitDisplay();
+    };
+
     const resizeObserver = new ResizeObserver(fitDisplay);
     resizeObserver.observe(container);
 
-    // Connect
-    client.connect();
-
     tunnel.onerror = (status: Guacamole.Status) => {
       console.error('Guacamole tunnel error:', status.message);
+      setStatus('error');
+      setErrorMsg(`Tunnel error: ${status.message ?? 'unknown'}`);
     };
 
     client.onerror = (error: Guacamole.Status) => {
       console.error('Guacamole client error:', error.message);
+      setStatus('error');
+      setErrorMsg(`Client error: ${error.message ?? 'unknown'}`);
     };
 
+    // Connect
+    client.connect();
+
     return () => {
       keyboard.onkeydown = null;
       keyboard.onkeyup = null;
@@ -80,16 +96,66 @@ export const RdpTab: React.FC<Props> = ({ session }) => {
 
   return (
     <div
-      ref={containerRef}
       style={{
         width: '100%',
         height: '100%',
         overflow: 'hidden',
         background: '#000',
+        position: 'relative',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
       }}
+    >
+      {/* Guacamole canvas is appended here by the effect */}
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+
+      {/* Status overlays */}
+      {status === 'connecting' && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#000a',
+          }}
+        >
+          <Spin size="large" tip="Connecting to RDP…" />
+        </div>
+      )}
+
+      {status === 'error' && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 16,
+            left: 16,
+            right: 16,
+          }}
+        >
+          <Alert
+            type="error"
+            showIcon
+            message="RDP Connection Failed"
+            description={errorMsg || 'See browser console for details.'}
           />
+        </div>
+      )}
+
+      {status === 'disconnected' && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 16,
+            left: 16,
+            right: 16,
+          }}
+        >
+          <Alert type="warning" showIcon message="RDP session disconnected." />
+        </div>
+      )}
+    </div>
   );
 };

frontend/src/global.css

@@ -0,0 +1,19 @@
+/* Reset */
+* { box-sizing: border-box; }
+body { margin: 0; padding: 0; }
+
+/* Ant Design Tabs: ensure tab content fills available height */
+.ant-tabs.ant-tabs-top {
+  display: flex;
+  flex-direction: column;
+}
+.ant-tabs-content-holder {
+  flex: 1;
+  overflow: hidden;
+}
+.ant-tabs-content {
+  height: 100%;
+}
+.ant-tabs-tabpane {
+  height: 100%;
+}

frontend/src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import './global.css';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(