fix: restore controls after task completion

web/app.js

@@ -166,9 +166,16 @@ function updateModeUI() {
 
 async function setConversationMode(mode) {
     if (mode !== "voice" && mode !== "text") return;
+    const previousMode = conversationMode;
     conversationMode = mode;
     localStorage.setItem(MODE_KEY, mode);
     updateModeUI();
+    if (mode === "voice" && previousMode === "text") {
+        chatInput.blur();
+        window.setTimeout(() => {
+            document.querySelector(".workspace").scrollIntoView({ block: "start", behavior: "smooth" });
+        }, 0);
+    }
 
     if (!room || !room.localParticipant) return;
     sendModeMessage(mode);
@@ -314,9 +321,10 @@ function inferState() {
     userSpeaking = micLevel > 0.035;
     if (agentAudioLevel > 0.02) return "speaking";
     if (userSpeaking) return "listening";
-    // Not speaking, agent silent: stay in thinking until audio arrives,
-    // otherwise settle back to listening.
-    if (uiState === "thinking" || uiState === "speaking") return "thinking";
+    // Once agent audio ends, return to listening. The previous implementation
+    // converted speaking → thinking forever, leaving the UI apparently frozen.
+    if (uiState === "speaking") return "listening";
+    if (uiState === "thinking") return "thinking";
     return "listening";
 }
 

web/style.css

@@ -511,6 +511,7 @@ button {
 .controls {
     position: relative;
     z-index: 2;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -656,6 +657,7 @@ button {
 
 .connection-strip {
     width: min(340px, 100%);
+    flex-shrink: 0;
     margin-top: 1rem;
 }
 
@@ -685,6 +687,7 @@ button {
 
 .privacy-note {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     gap: 0.4rem;
     margin-top: 1.15rem;
@@ -1223,6 +1226,39 @@ body[data-mode="text"] .mic-meter {
 .task-error { margin-top: 0.5rem; color: #ffc2ba; background: rgba(255, 128, 111, 0.1); }
 
 /* ── Responsive ─────────────────────────────────────────────────────────── */
+@media (max-height: 760px) and (min-width: 881px) {
+    .workspace {
+        min-height: 540px;
+    }
+
+    .voice-console {
+        padding-top: 1.5rem;
+        padding-bottom: 1rem;
+    }
+
+    .console-intro h2 {
+        font-size: 1.65rem;
+    }
+
+    .console-intro p {
+        margin-top: 0.35rem;
+    }
+
+    .orb-stage {
+        min-height: 220px;
+        margin: -1rem 0;
+    }
+
+    .orb {
+        transform: scale(0.78);
+    }
+
+    .connection-strip,
+    .privacy-note {
+        margin-top: 0.65rem;
+    }
+}
+
 @media (max-width: 880px) {
     body {
         padding: calc(0.85rem + env(safe-area-inset-top))