working socket integration

Frontend/src/index.css

@@ -441,6 +441,17 @@ body {
   font-weight: bold;
 }
 
+.terminal-prompt-marker {
+  color: #569cd6;
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+.terminal-prompt-line {
+  color: #569cd6;
+  font-weight: bold;
+}
+
 .terminal-input-line {
   color: #4ec9b0;
   background-color: rgba(78, 201, 176, 0.1);
@@ -875,7 +886,7 @@ body {
   margin-right: 4px;
 }
 
-.terminal-toggle-button {
+.terminal-toggle-button, .websocket-toggle-button {
   background-color: transparent;
   border: none;
   color: #cccccc;
@@ -886,7 +897,12 @@ body {
   align-items: center;
 }
 
-.terminal-toggle-button:hover {
+.terminal-toggle-button:hover, .websocket-toggle-button:hover {
+  opacity: 1;
+}
+
+.websocket-toggle-button.active {
+  color: #4ec9b0;
   opacity: 1;
 }
 
@@ -969,6 +985,15 @@ body {
 
 .terminal-input-wrapper {
   margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.terminal-input-prompt {
+  color: #4ec9b0;
+  font-weight: bold;
+  margin-right: 8px;
+  font-size: 18px;
 }
 
 .terminal-input-help {
@@ -977,6 +1002,113 @@ body {
   font-style: italic;
 }
 
+/* WebSocket Terminal */
+.websocket-terminal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  font-family: 'Consolas', monospace;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: #252526;
+  border-bottom: 1px solid #333;
+}
+
+.terminal-title {
+  font-size: 14px;
+}
+
+.terminal-close {
+  background: none;
+  border: none;
+  color: #d4d4d4;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.terminal-output {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.terminal-line {
+  margin-bottom: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.terminal-line.system {
+  color: #569cd6;
+}
+
+.terminal-line.error {
+  color: #f44747;
+}
+
+.terminal-line.input {
+  color: #ce9178;
+}
+
+.input-prefix {
+  color: #569cd6;
+  font-weight: bold;
+}
+
+.terminal-input-form {
+  display: flex;
+  padding: 8px;
+  background-color: #252526;
+  border-top: 1px solid #333;
+}
+
+.terminal-input-field {
+  flex: 1;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  border: 1px solid #3c3c3c;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-family: 'Consolas', monospace;
+  font-size: 14px;
+}
+
+.terminal-input-field:focus {
+  outline: none;
+  border-color: #007acc;
+}
+
+.terminal-input-submit {
+  margin-left: 8px;
+  background-color: #0e639c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.terminal-input-submit:hover {
+  background-color: #1177bb;
+}
+
+.terminal-input-submit:disabled {
+  background-color: #3c3c3c;
+  cursor: not-allowed;
+}
+
 .terminal-line.info {
   color: #75beff;
 }