feat(tui): changed prompt focus setting to allow interactive / popup during streaming

Author: Kuberwastaken

src-rust/crates/core/src/share_export/template.css

@@ -212,48 +212,139 @@ nav {
 
 /* Tool calls / tool results / thinking — collapsible details */
 details.tool-call, details.tool-result, details.thinking {
-  margin: 0.7em 0;
+  margin: 0.8em 0;
   border: 1px solid var(--surface-border);
-  border-radius: 6px;
-  background: rgba(0, 0, 0, 0.35);
-  font-size: 0.82rem;
+  border-radius: 8px;
+  background: rgba(10, 10, 10, 0.5);
+  font-size: 0.85rem;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+details.tool-call {
+  border-color: rgba(233, 30, 99, 0.2);
+  background: linear-gradient(to right, rgba(233, 30, 99, 0.02), rgba(0, 0, 0, 0.2));
+}
+details.tool-call:hover {
+  border-color: rgba(233, 30, 99, 0.4);
+  box-shadow: 0 0 12px rgba(233, 30, 99, 0.05);
+}
+details.tool-result {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.01);
+}
+details.tool-result:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+details.tool-result.error {
+  border-color: rgba(255, 95, 86, 0.3);
+  background: rgba(255, 95, 86, 0.02);
+}
+details.tool-result.error:hover {
+  border-color: rgba(255, 95, 86, 0.5);
+  box-shadow: 0 0 12px rgba(255, 95, 86, 0.05);
+}
+details.thinking {
+  border-color: rgba(255, 255, 255, 0.06);
+  border-style: dashed;
+  background: transparent;
 }
+details.thinking:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
 details > summary {
   cursor: pointer;
-  padding: 0.55rem 0.9rem;
-  color: var(--text-secondary);
+  padding: 0.6rem 0.95rem;
+  color: var(--text-primary);
   user-select: none;
   list-style: none;
   font-family: var(--font-mono);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.6rem;
+  transition: background 0.2s;
+}
+details > summary:hover {
+  background: rgba(255, 255, 255, 0.02);
 }
 details > summary::-webkit-details-marker { display: none; }
-details[open] > summary { border-bottom: 1px solid var(--surface-border); }
-details.tool-call > summary::before {
-  content: '▸'; color: var(--accent); margin-right: 0.1rem;
-  transition: transform 0.15s;
+details[open] > summary {
+  border-bottom: 1px solid var(--surface-border);
+  background: rgba(255, 255, 255, 0.01);
 }
-details.tool-call[open] > summary::before { transform: rotate(90deg); }
-details.tool-call > summary .tool-name {
+
+/* Rotation arrow */
+details > summary::before {
+  content: '▸';
+  display: inline-block;
+  color: var(--text-muted);
+  transition: transform 0.15s ease, color 0.15s ease;
+  font-size: 0.75rem;
+  margin-right: 0.1rem;
+}
+details[open] > summary::before {
+  transform: rotate(90deg);
+  color: var(--text-secondary);
+}
+details.tool-call[open] > summary::before {
   color: var(--accent);
-  font-weight: 500;
 }
-details.tool-result > summary::before {
-  content: '↳'; color: var(--text-muted); margin-right: 0.1rem;
+details.tool-result.error[open] > summary::before {
+  color: var(--error);
+}
+
+/* Badges styling */
+.badge {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  user-select: none;
+}
+.badge.tool-badge {
+  background: rgba(233, 30, 99, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(233, 30, 99, 0.25);
+}
+.badge.result-badge {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.badge.result-badge.error {
+  background: rgba(255, 95, 86, 0.1);
+  color: var(--error);
+  border: 1px solid rgba(255, 95, 86, 0.25);
 }
-details.tool-result.error { border-color: var(--error); }
-details.tool-result.error > summary { color: var(--error); }
-details.thinking { background: rgba(255, 255, 255, 0.015); font-style: italic; }
-details.thinking > summary::before {
-  content: '◈'; color: var(--text-muted); margin-right: 0.1rem;
+.badge.thinking-badge {
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Label details */
+details.tool-call > summary .tool-name {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+details.tool-result > summary .result-label {
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+details.tool-result.error > summary .result-label {
+  color: var(--error);
 }
 
 details > .body {
-  padding: 0.7rem 0.9rem;
+  padding: 0.8rem 1rem;
   font-family: var(--font-mono);
-  font-size: 0.78rem;
+  font-size: 0.8rem;
+  background: rgba(0, 0, 0, 0.2);
 }
 details > .body pre {
   white-space: pre-wrap;
@@ -265,7 +356,8 @@ details > .body pre {
   border: none;
   padding: 0;
   color: var(--text-secondary);
-  font-size: 0.78rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
 }
 
 /* Local shell command output (! command) — terminal style */

src-rust/crates/core/src/share_export/template.js

@@ -194,7 +194,17 @@
     var d = document.createElement('details');
     d.className = 'tool-call';
     var s = document.createElement('summary');
-    s.innerHTML = '▸ <span class="tool-name">' + escapeHtml(block.name || 'tool') + '</span>';
+    
+    var badge = document.createElement('span');
+    badge.className = 'badge tool-badge';
+    badge.textContent = 'tool call';
+    s.appendChild(badge);
+    
+    var nameSpan = document.createElement('span');
+    nameSpan.className = 'tool-name';
+    nameSpan.textContent = block.name || 'tool';
+    s.appendChild(nameSpan);
+    
     d.appendChild(s);
     var b = document.createElement('div'); b.className = 'body';
     var pre = document.createElement('pre');
@@ -211,7 +221,17 @@
     d.className = 'tool-result' + (isError ? ' error' : '');
     d.open = isError;
     var s = document.createElement('summary');
-    s.textContent = isError ? '✗ tool result (error)' : '↳ tool result';
+    
+    var badge = document.createElement('span');
+    badge.className = 'badge result-badge' + (isError ? ' error' : '');
+    badge.textContent = isError ? 'error' : 'result';
+    s.appendChild(badge);
+    
+    var labelSpan = document.createElement('span');
+    labelSpan.className = 'result-label';
+    labelSpan.textContent = 'tool output';
+    s.appendChild(labelSpan);
+    
     d.appendChild(s);
     var b = document.createElement('div'); b.className = 'body';
     var text;
@@ -234,7 +254,12 @@
     var d = document.createElement('details');
     d.className = 'thinking';
     var s = document.createElement('summary');
-    s.textContent = '💭 thinking';
+    
+    var badge = document.createElement('span');
+    badge.className = 'badge thinking-badge';
+    badge.textContent = 'thinking';
+    s.appendChild(badge);
+    
     d.appendChild(s);
     var b = document.createElement('div'); b.className = 'body';
     var pre = document.createElement('pre');

src-rust/crates/tui/src/app.rs

@@ -4114,15 +4114,17 @@ impl App {
                 self.prompt_input.cursor = self.prompt_input.text.len();
                 self.sync_legacy_prompt_fields();
             }
-            KeyCode::Tab if !self.is_streaming => {
+            KeyCode::Tab => {
                 if !self.prompt_input.suggestions.is_empty() {
-                    // Accept slash-command suggestion
+                    // Accept slash-command suggestion. Allowed while streaming
+                    // so the typeahead popup is interactive even when a turn
+                    // is in flight — Enter then queues the completed command.
                     if self.prompt_input.suggestion_index.is_none() {
                         self.prompt_input.suggestion_index = Some(0);
                     }
                     self.prompt_input.accept_suggestion();
                     self.refresh_prompt_input();
-                } else if self.prompt_input.is_empty() {
+                } else if !self.is_streaming && self.prompt_input.is_empty() {
                     // Cycle agent mode: build → plan → explore → build
                     self.cycle_agent_mode();
                     self.rustle_look_down();

src-rust/crates/tui/src/render.rs

@@ -383,6 +383,12 @@ pub fn render_app(frame: &mut Frame, app: &App) {
 
     let prompt_focused =
         !app.is_streaming && app.permission_request.is_none() && !app.history_search_overlay.visible;
+    // Suggestions popup tracks whether the prompt accepts input, not whether
+    // it is the focused widget. Text entry is allowed during streaming so the
+    // user can queue the next message, so the typeahead popup must follow
+    // that same affordance.
+    let suggestions_visible =
+        app.permission_request.is_none() && !app.history_search_overlay.visible;
     let status_visible = should_render_status_row(app);
     // One blank separator row above the status/input area when status is active,
     // matching the visual breathing room in the TS layout.
@@ -404,7 +410,7 @@ pub fn render_app(frame: &mut Frame, app: &App) {
     } else {
         0
     };
-    let suggestions_height = if prompt_focused && !app.prompt_input.suggestions.is_empty() {
+    let suggestions_height = if suggestions_visible && !app.prompt_input.suggestions.is_empty() {
         app.prompt_input.suggestions.len().min(5) as u16
     } else {
         0