ux and application control changes

web/app.js

@@ -17,11 +17,18 @@ window.agentMemory = {}
 //async function runAnalysis(){
 async function fire(){
 
-    const inputBox = document.getElementById("initial_input")
+    //const inputBox = document.getElementById("initial_input")
+    const inputBox = document.getElementById("main_input")
     const text = inputBox.value
 
     //console.log("🚀 Run Analysis:", text)
 
+    // safety check to prevent silent errrors if element isn't found
+    if (!inputBox) {
+        console.error("❌ main_input not found")
+        return
+    }
+
     if(!text) return
 
     // Create session once

web/index.html

@@ -10,12 +10,17 @@
 
     <h1>CGJI01 — Multi-Agent Jungian Intelligence</h1>
 
+    <!-- 🔹 CHAT DISPLAY -->
+    <div id="chat"
+         style="height:400px; overflow-y:auto; border:1px solid #ccc; padding:10px; margin-top:10px;">
+    </div>
+
     <!-- 🔹 SINGLE INPUT (REPLACES BOTH BOXES) -->
     <p id="input_label">Enter query:</p>
 
-<textarea id="main_input"
-          placeholder="Let's talk"
-          style="width:100%; height:80px;"></textarea>
+    <textarea id="main_input"
+              placeholder="Let's talk"
+              style="width:100%; height:80px;"></textarea>
 
     <!-- 🔹 FIRE BUTTON (STARTS CONVERSATION) -->
     <button id="fire_btn" onclick="fire()">Fire</button>
@@ -27,10 +32,6 @@
         End Session
     </button>
 
-    <!-- 🔹 CHAT DISPLAY -->
-    <div id="chat"
-         style="height:400px; overflow-y:auto; border:1px solid #ccc; padding:10px; margin-top:10px;"></div>
-
     <hr>
 
     <!-- 🔹 AGENT GRID -->

web/style.css

@@ -33,12 +33,14 @@ gap:20px;
 margin-top:30px;
 }
 
+/* Agent-box Styling - darktheme*/
 .agent{
 background:#222;
 padding:15px;
 border-radius:8px;
 }
 
+/* Final-box Styling - darktheme*/
 .final{
 grid-column:span 3;
 background:#333;
@@ -134,14 +136,13 @@ button {
     gap: 15px;
 }
 
-.agent {
-    border: 1px solid #ccc;
-    padding: 10px;
-    background: #fafafa;
+/* Premium Polish */
+#chat {
+    background-color: #020617;
+    border-radius: 8px;
 }
 
-/* Final output highlight */
-.final {
-    grid-column: span 3;
-    background: #f0f0f0;
+textarea:focus {
+    outline: none;
+    border: 1px solid #3b82f6;
 }