some GUI changes

src/static/webssh.js

@@ -40,6 +40,7 @@ async function loadSavedConnections() {
       connections.forEach(conn => {
         conn.connected = false;
         conn.socket = null;
+        conn.loadAverage = null;
         if (!conn.terminalBuffer) conn.terminalBuffer = [];
       });
       renderConnectionList();
@@ -76,6 +77,7 @@ function loadLocalConnections() {
         key: '',
         connected: false,
         socket: null,
+        loadAverage: null,
         terminalBuffer: c.terminalBuffer || []
       }));
       renderConnectionList();
@@ -414,6 +416,7 @@ function createConnection() {
     disconnectTimeout: disconnectTimeout,
     connected: false,
     socket: null,
+    loadAverage: null,
     terminalBuffer: []
   };
 
@@ -433,11 +436,17 @@ function renderConnectionList() {
   const list = document.getElementById('connectionList');
   list.innerHTML = '';
   connections.forEach(conn => {
+    const loadText = conn.connected
+      ? (conn.loadAverage || 'N/A')
+      : (conn.socket && conn.socket.readyState === WebSocket.CONNECTING ? 'Loading...' : '—');
     const item = document.createElement('div');
     item.className = `connection-item ${conn.id === currentConnectionId ? 'active' : ''} ${conn.connected ? 'connected' : 'disconnected'}`;
     item.onclick = () => selectConnection(conn.id);
     item.innerHTML = `
-      <div class="connection-name">${conn.name}</div>
+      <div class="connection-heading">
+        <div class="connection-name">${conn.name}</div>
+        <div class="connection-load" title="Remote Linux load average">Load: ${loadText}</div>
+      </div>
       <div class="connection-info">
         <span class="connection-status ${conn.connected ? 'connected' : 'disconnected'}"></span>
         ${conn.username}@${conn.host}:${conn.port}
@@ -607,6 +616,8 @@ async function connectConnection(id) {
 
   term.writeln(`Connecting to ${conn.name} (${conn.username}@${conn.host}:${conn.port})...`);
   updateTerminalStatus('connecting');
+  conn.loadAverage = null;
+  renderConnectionList();
 
   try {
     if (!backendWsPort) {
@@ -649,12 +660,18 @@ async function connectConnection(id) {
           resetInactivityTimers();
           return;
         }
+        if (msg.type === 'load_average') {
+          conn.loadAverage = msg.value || null;
+          renderConnectionList();
+          return;
+        }
         if (msg.type === 'error') {
           if (conn.id === currentConnectionId) {
             term.writeln(`[ERROR] ${msg.message}`);
             updateTerminalStatus('disconnected');
           }
           conn.connected = false;
+          conn.loadAverage = null;
           renderConnectionList();
           return;
         }
@@ -673,11 +690,13 @@ async function connectConnection(id) {
         updateTerminalStatus('disconnected');
       }
       conn.connected = false;
+      conn.loadAverage = null;
       renderConnectionList();
     };
     
     conn.socket.onclose = (event) => {
       conn.connected = false;
+      conn.loadAverage = null;
       conn.socket = null;
       if (conn.id === currentConnectionId) {
         term.writeln(`[DISCONNECTED] Code: ${event.code}`);