a bit more progressive update and single turn

2 files changed, 67 insertions, 25 deletions

diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css
index 531d2a3..0d01300 100644
--- a/frontend/src/components/ChatInterface.css
+++ b/frontend/src/components/ChatInterface.css
@@ -71,6 +71,20 @@
   font-size: 14px;
 }
 
+.stage-loading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  margin: 12px 0;
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  color: #666;
+  font-size: 14px;
+  font-style: italic;
+}
+
 .spinner {
   width: 20px;
   height: 20px;
diff --git a/frontend/src/components/ChatInterface.jsx b/frontend/src/components/ChatInterface.jsx
index 951183f..3ae796c 100644
--- a/frontend/src/components/ChatInterface.jsx
+++ b/frontend/src/components/ChatInterface.jsx
@@ -71,13 +71,39 @@ export default function ChatInterface({
               ) : (
                 <div className="assistant-message">
                   <div className="message-label">LLM Council</div>
-                  <Stage1 responses={msg.stage1} />
-                  <Stage2
-                    rankings={msg.stage2}
-                    labelToModel={msg.metadata?.label_to_model}
-                    aggregateRankings={msg.metadata?.aggregate_rankings}
-                  />
-                  <Stage3 finalResponse={msg.stage3} />
+
+                  {/* Stage 1 */}
+                  {msg.loading?.stage1 && (
+                    <div className="stage-loading">
+                      <div className="spinner"></div>
+                      <span>Running Stage 1: Collecting individual responses...</span>
+                    </div>
+                  )}
+                  {msg.stage1 && <Stage1 responses={msg.stage1} />}
+
+                  {/* Stage 2 */}
+                  {msg.loading?.stage2 && (
+                    <div className="stage-loading">
+                      <div className="spinner"></div>
+                      <span>Running Stage 2: Peer rankings...</span>
+                    </div>
+                  )}
+                  {msg.stage2 && (
+                    <Stage2
+                      rankings={msg.stage2}
+                      labelToModel={msg.metadata?.label_to_model}
+                      aggregateRankings={msg.metadata?.aggregate_rankings}
+                    />
+                  )}
+
+                  {/* Stage 3 */}
+                  {msg.loading?.stage3 && (
+                    <div className="stage-loading">
+                      <div className="spinner"></div>
+                      <span>Running Stage 3: Final synthesis...</span>
+                    </div>
+                  )}
+                  {msg.stage3 && <Stage3 finalResponse={msg.stage3} />}
                 </div>
               )}
             </div>
@@ -94,24 +120,26 @@ export default function ChatInterface({
         <div ref={messagesEndRef} />
       </div>
 
-      <form className="input-form" onSubmit={handleSubmit}>
-        <textarea
-          className="message-input"
-          placeholder="Ask your question... (Shift+Enter for new line, Enter to send)"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          disabled={isLoading}
-          rows={3}
-        />
-        <button
-          type="submit"
-          className="send-button"
-          disabled={!input.trim() || isLoading}
-        >
-          Send
-        </button>
-      </form>
+      {conversation.messages.length === 0 && (
+        <form className="input-form" onSubmit={handleSubmit}>
+          <textarea
+            className="message-input"
+            placeholder="Ask your question... (Shift+Enter for new line, Enter to send)"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isLoading}
+            rows={3}
+          />
+          <button
+            type="submit"
+            className="send-button"
+            disabled={!input.trim() || isLoading}
+          >
+            Send
+          </button>
+        </form>
+      )}
     </div>
   );
 }