From e52f759fddd70730860e3fcf9170a70382c84293 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Thu, 12 Mar 2026 07:20:00 -0600
Subject: [PATCH] Move chat bar response into panel

Restructure the universal app bar so triage thinking and response content render in a dismissible panel above the shared input row. Update the inline app template script to show and hide the panel during submit, restore saved responses into the panel, and keep chat-app mode isolated from the non-chat triage UI. Update app-bar styling to use a column layout with a response panel separator, dismiss control, and dedicated input row spacing.
---
 convey/static/app.css     | 69 ++++++++++++++++++++++++++++++++++-----
 convey/templates/app.html | 57 +++++++++++++++++++++++++++-----
 2 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/convey/static/app.css b/convey/static/app.css
index a8ea5dd6e..6c4dffe5e 100644
--- a/convey/static/app.css
+++ b/convey/static/app.css
@@ -995,13 +995,10 @@ body.menu-all .menu-bar {
   transform: translateX(-50%);
   width: 80%;
   z-index: var(--z-bars);
-  height: var(--app-bar-height);
-  padding: 0 16px;
+  min-height: var(--app-bar-height);
+  padding: 0;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
+  flex-direction: column;
   border-radius: 12px;
   border: 1px solid var(--facet-border, #e0e0e0);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
@@ -1034,6 +1031,60 @@ body.menu-all .menu-bar {
   border-radius: 12px;
 }
 
+/* Response panel (above input row) */
+.chat-bar-response-panel {
+  max-height: 0;
+  overflow: hidden;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+  transition: max-height 0.2s ease, padding 0.2s ease;
+}
+
+.chat-bar-response-panel.chat-bar-panel-open {
+  max-height: 200px;
+  padding: 12px 16px 0;
+}
+
+.chat-bar-separator {
+  height: 1px;
+  background: var(--facet-border, #e0e0e0);
+  margin: 12px -16px 0;
+}
+
+.chat-bar-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #999;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.chat-bar-dismiss:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: #666;
+}
+
+/* Input row */
+.chat-bar-input-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  min-height: var(--app-bar-height);
+}
+
 /* Chat Bar Elements */
 .chat-bar-input {
   flex: 1;
@@ -1105,12 +1156,12 @@ body.menu-all .menu-bar {
 }
 
 .chat-bar-response {
-  flex: 1;
   font-size: 13px;
+  line-height: 1.5;
   color: #666;
-  white-space: nowrap;
+  max-height: 5em;
   overflow: hidden;
-  text-overflow: ellipsis;
+  padding-right: 28px;
   position: relative;
   z-index: 1;
 }
diff --git a/convey/templates/app.html b/convey/templates/app.html
index fa1f36661..53762bd42 100644
--- a/convey/templates/app.html
+++ b/convey/templates/app.html
@@ -68,15 +68,21 @@
 
 <!-- Chat Bar (universal) -->
 <div class="app-bar">
-  <form id="chatInputForm" style="display: contents;">
-    <textarea id="chatMessageInput" class="chat-bar-input" rows="1" placeholder="{{ chat_bar_placeholder|default('Send a message...') }}"></textarea>
-    <button type="submit" class="chat-bar-send" title="Send" style="display: none;">↑</button>
-  </form>
-  <div class="chat-bar-thinking" style="display: none;">
-    <span class="chat-bar-thinking-dot"></span>
-    Thinking…
+  <div class="chat-bar-response-panel">
+    <div class="chat-bar-thinking" style="display: none;">
+      <span class="chat-bar-thinking-dot"></span>
+      Thinking…
+    </div>
+    <div class="chat-bar-response" style="display: none;"></div>
+    <button class="chat-bar-dismiss" style="display: none;" title="Dismiss">✕</button>
+    <div class="chat-bar-separator"></div>
+  </div>
+  <div class="chat-bar-input-row">
+    <form id="chatInputForm" style="display: contents;">
+      <textarea id="chatMessageInput" class="chat-bar-input" rows="1" placeholder="{{ chat_bar_placeholder|default('Send a message...') }}"></textarea>
+      <button type="submit" class="chat-bar-send" title="Send" style="display: none;">↑</button>
+    </form>
   </div>
-  <div class="chat-bar-response" style="display: none;"></div>
 </div>
 
 <!-- Main Content -->
@@ -94,9 +100,18 @@
   const chatBarThinking = document.querySelector('.chat-bar-thinking');
   const chatBarResponse = document.querySelector('.chat-bar-response');
   const chatBarSend = document.querySelector('.chat-bar-send');
+  const chatBarPanel = document.querySelector('.chat-bar-response-panel');
+  const chatBarDismiss = document.querySelector('.chat-bar-dismiss');
   const isChatApp = window.location.pathname.startsWith('/app/chat');
   const STORAGE_KEY = 'solstone:chatBarState';
 
+  function showPanel() {
+    if (chatBarPanel) chatBarPanel.classList.add('chat-bar-panel-open');
+  }
+  function hidePanel() {
+    if (chatBarPanel) chatBarPanel.classList.remove('chat-bar-panel-open');
+  }
+
   if (!chatBarInput || !chatBarForm) return;
 
   // --- Auto-resize textarea ---
@@ -122,9 +137,21 @@
     if (saved && saved.response && !isChatApp && chatBarResponse) {
       chatBarResponse.textContent = saved.response;
       chatBarResponse.style.display = '';
+      if (chatBarDismiss) chatBarDismiss.style.display = '';
+      showPanel();
     }
   } catch {}
 
+  // --- Dismiss response panel ---
+  if (chatBarDismiss) {
+    chatBarDismiss.addEventListener('click', () => {
+      hidePanel();
+      if (chatBarThinking) chatBarThinking.style.display = 'none';
+      if (chatBarResponse) chatBarResponse.style.display = 'none';
+      chatBarDismiss.style.display = 'none';
+    });
+  }
+
   // --- Non-chat app: triage submit ---
   if (!isChatApp) {
     // Enter to submit, shift+enter for newline
@@ -153,6 +180,10 @@
       if (chatBarResponse) {
         chatBarResponse.style.display = 'none';
       }
+      if (chatBarDismiss) {
+        chatBarDismiss.style.display = 'none';
+      }
+      showPanel();
 
       try {
         const r = await fetch('/api/triage', {
@@ -172,6 +203,12 @@
             chatBarResponse.textContent = data.response || '';
             chatBarResponse.style.display = data.response ? '' : 'none';
           }
+          if (data.response && chatBarDismiss) {
+            chatBarDismiss.style.display = '';
+          }
+          if (!data.response) {
+            hidePanel();
+          }
 
           // Save to localStorage
           localStorage.setItem(STORAGE_KEY, JSON.stringify({
@@ -184,11 +221,15 @@
         } else if (chatBarResponse) {
           chatBarResponse.textContent = 'Something went wrong. Try again.';
           chatBarResponse.style.display = '';
+          if (chatBarDismiss) chatBarDismiss.style.display = '';
+          showPanel();
         }
       } catch (err) {
         if (chatBarResponse) {
           chatBarResponse.textContent = 'Connection error. Try again.';
           chatBarResponse.style.display = '';
+          if (chatBarDismiss) chatBarDismiss.style.display = '';
+          showPanel();
         }
       } finally {
         if (chatBarThinking) {
-- 
2.51.2