From 50532ca5ec79e35dd60027de83eedf77436fe4f6 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Thu, 12 Mar 2026 07:18:52 -0600
Subject: [PATCH] Move chat bar response above input with expandable panel and
 dismiss

---
 convey/static/app.css     | 53 ++++++++++++++++++++++++++-----
 convey/templates/app.html | 65 ++++++++++++++++++++++++++++++---------
 2 files changed, 95 insertions(+), 23 deletions(-)

diff --git a/convey/static/app.css b/convey/static/app.css
index a8ea5dd6e..360b736b3 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;
   display: flex;
-  flex-direction: row;
+  min-height: var(--app-bar-height);
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
   border-radius: 12px;
   border: 1px solid var(--facet-border, #e0e0e0);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
@@ -1034,6 +1031,47 @@ body.menu-all .menu-bar {
   border-radius: 12px;
 }
 
+.chat-bar-input-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 0 16px;
+  min-height: var(--app-bar-height);
+}
+
+.chat-bar-response-panel {
+  position: relative;
+  padding: 12px 16px;
+  padding-right: 36px;
+  border-bottom: 1px solid var(--facet-border, #e0e0e0);
+  width: 100%;
+}
+
+.chat-bar-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #999;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.chat-bar-dismiss:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #666;
+}
+
 /* Chat Bar Elements */
 .chat-bar-input {
   flex: 1;
@@ -1105,12 +1143,11 @@ body.menu-all .menu-bar {
 }
 
 .chat-bar-response {
-  flex: 1;
   font-size: 13px;
   color: #666;
-  white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  max-height: 5em;
+  line-height: 1.4;
   position: relative;
   z-index: 1;
 }
diff --git a/convey/templates/app.html b/convey/templates/app.html
index fa1f36661..1d5df94f1 100644
--- a/convey/templates/app.html
+++ b/convey/templates/app.html
@@ -68,15 +68,20 @@
 
 <!-- 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" style="display: none;">
+    <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>
+  <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,11 +99,31 @@
   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';
 
   if (!chatBarInput || !chatBarForm) return;
 
+  // --- Panel visibility helpers ---
+  function showPanel() {
+    if (chatBarPanel) chatBarPanel.style.display = '';
+  }
+  function hidePanel() {
+    if (chatBarPanel) chatBarPanel.style.display = 'none';
+    if (chatBarThinking) chatBarThinking.style.display = 'none';
+    if (chatBarResponse) chatBarResponse.style.display = 'none';
+    if (chatBarDismiss) chatBarDismiss.style.display = 'none';
+  }
+
+  // --- Dismiss button ---
+  if (chatBarDismiss) {
+    chatBarDismiss.addEventListener('click', () => {
+      hidePanel();
+    });
+  }
+
   // --- Auto-resize textarea ---
   chatBarInput.addEventListener('input', () => {
     chatBarInput.style.height = 'auto';
@@ -122,6 +147,8 @@
     if (saved && saved.response && !isChatApp && chatBarResponse) {
       chatBarResponse.textContent = saved.response;
       chatBarResponse.style.display = '';
+      if (chatBarDismiss) chatBarDismiss.style.display = '';
+      showPanel();
     }
   } catch {}
 
@@ -147,12 +174,10 @@
         chatBarSend.style.display = 'none';
       }
       chatBarInput.disabled = true;
-      if (chatBarThinking) {
-        chatBarThinking.style.display = '';
-      }
-      if (chatBarResponse) {
-        chatBarResponse.style.display = 'none';
-      }
+      if (chatBarThinking) chatBarThinking.style.display = '';
+      if (chatBarResponse) chatBarResponse.style.display = 'none';
+      if (chatBarDismiss) chatBarDismiss.style.display = 'none';
+      showPanel();
 
       try {
         const r = await fetch('/api/triage', {
@@ -170,7 +195,13 @@
           const data = await r.json();
           if (chatBarResponse) {
             chatBarResponse.textContent = data.response || '';
-            chatBarResponse.style.display = data.response ? '' : 'none';
+            if (data.response) {
+              chatBarResponse.style.display = '';
+              if (chatBarDismiss) chatBarDismiss.style.display = '';
+            } else {
+              chatBarResponse.style.display = 'none';
+              hidePanel();
+            }
           }
 
           // Save to localStorage
@@ -184,11 +215,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