Added some cool logic to the terminal to follow the file path the use…

…r and the host

examples/experimental/nodes/frontend/server.js

@@ -35,28 +35,35 @@ redisClient.on('error', (err) => {
   });
 })();
 
-
 io.on('connection', (socket) => {
   console.log('A user connected');
 
   socket.on('terminal_command', async (command) => {
-    // console.log(`Received command: ${command}`);
-    // Create the message envelope that matches the Python Message[AgentAction] structure
-    const messageEnvelope = {
-      data: {
-        agent_name: "Terminal",
-        action_type: "run",
-        argument: command,
-        path: "",
-        data_type: "agent_action"  // This needs to be inside the data object
-      }
-    };
+    console.log('Received command:', command);
 
     try {
-      // Publish the JSON-serialized message to the Agent:Runtime channel
+      // Send command to Runtime through Redis
+      const messageEnvelope = {
+        data: {
+          agent_name: "Terminal",
+          action_type: "run",
+          argument: command,
+          path: "",
+          data_type: "agent_action"
+        }
+      };
       await redisClient.publish('Agent:Runtime', JSON.stringify(messageEnvelope));
     } catch (err) {
-      console.error('Error publishing to Redis:', err);
+      console.error('Error publishing command:', err);
+      socket.emit('new_message', { 
+        channel: 'Runtime:Agent', 
+        message: JSON.stringify({
+          data: {
+            data_type: "text",
+            text: `Error: ${err.message}`
+          }
+        })
+      });
     }
   });
 

examples/experimental/nodes/frontend/src/components/Terminal/Terminal.css

@@ -1,98 +1,137 @@
-/* Update Terminal Header Styles */
+/* Terminal Container */
+.terminal-container {
+  display: flex;
+  flex-direction: column;
+  height: 33vh;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  font-family: 'Courier New', monospace;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Terminal Header */
 #terminal-header {
-    background-color: #252526;
-    color: #d4d4d4;
-    padding: 8px 12px;
-    font-size: 13px;
-    font-weight: bold;
-    border-bottom: 1px solid #333;
-    text-align: left;
-  }
-
-  .terminal-title {
-    font-size: 13px;
-    color: #cccccc;
-  }
-
-
-
-  #terminal {
-    height: 33vh;
-    padding: 10px;
-    background-color: #1e1e1e;
-    border-radius: 0 0 8px 8px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    overflow-y: auto;
-    color: #d4d4d4;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 14px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .terminal-container {
-    display: flex;
-    flex-direction: column;
-    height: 33vh;
-    background-color: #000000;
-    color: #d4d4d4;
-    font-family: 'Courier New', monospace;
-  }
-
-  .terminal-header {
-    background-color: #333;
-    color: #fff;
-    padding: 8px;
-    text-align: center;
-    font-weight: bold;
-    border-radius: 8px 8px 0 0;
-  }
-
-  .terminal-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    overflow: hidden;
-  }
-
-  .terminal-history {
-    flex: 1;
-    overflow-y: auto;
-    margin-bottom: 10px;
-  }
-
-  .terminal-line {
-    padding: 2px 0;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-
-  .terminal-input-line {
-    display: flex;
-    align-items: center;
-    background-color: #000000;
-    padding: 5px;
-    border-radius: 4px;
-  }
-
-  .terminal-prompt {
-    color: #d4d4d4;
-    margin-right: 8px;
-  }
-
-  .terminal-input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    color: #d4d4d4;
-    font-family: 'Courier New', monospace;
-    font-size: inherit;
-    padding: 0;
-    outline: none;
-  }
-
-  .terminal-input:focus {
-    outline: none;
-    box-shadow: none;
-  }
+  background-color: #252526;
+  color: #d4d4d4;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: bold;
+  border-bottom: 1px solid #333;
+  display: flex;
+  align-items: center;
+}
+
+.terminal-title {
+  font-size: 13px;
+  color: #cccccc;
+  margin-left: 8px;
+}
+
+/* Terminal Body */
+.terminal-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  overflow: hidden;
+  background-color: #1e1e1e;
+}
+
+/* Terminal History */
+.terminal-history {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 10px;
+  padding: 0 5px;
+}
+
+/* Terminal Entry Styling */
+.terminal-entry {
+  margin-bottom: 6px;
+}
+
+.terminal-command {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.terminal-output {
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #b4b4b4;
+}
+
+/* Terminal Input Line */
+.terminal-input-line {
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  padding: 5px;
+}
+
+.terminal-prompt {
+  color: #00ff00;
+  margin-right: 8px;
+}
+
+.terminal-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #d4d4d4;
+  font-family: 'Courier New', monospace;
+  font-size: inherit;
+  padding: 0;
+  outline: none;
+}
+
+/* Output Type Styling */
+.terminal-success {
+  color: #4EC9B0;
+}
+
+.terminal-notice {
+  color: #808080;
+}
+
+.terminal-error {
+  color: #F48771;
+}
+
+.terminal-text {
+  color: #d4d4d4;
+}
+
+/* Scrollbar Styling */
+.terminal-history::-webkit-scrollbar {
+  width: 8px;
+}
+
+.terminal-history::-webkit-scrollbar-track {
+  background: #1e1e1e;
+}
+
+.terminal-history::-webkit-scrollbar-thumb {
+  background: #424242;
+  border-radius: 4px;
+}
+
+.terminal-history::-webkit-scrollbar-thumb:hover {
+  background: #4f4f4f;
+}
+
+/* Selection Styling */
+.terminal-container ::selection {
+  background-color: #264f78;
+  color: #d4d4d4;
+}
+
+/* Remove duplicate styles */
+#terminal {
+  display: none; /* Remove duplicate terminal styles */
+}
+
+.terminal-header {
+  display: none; /* Remove duplicate header styles */
+}