Enha: move backlog

components/room.html

@@ -48,18 +48,19 @@
     <!-- Right Panel -->
     {{template "teamlist" .Room.RedTeam}}
   </div>
-  <hr />
-  <div id="systembox" style="overflow-y: auto; max-height: 100px;">
-    Server says: <br>
+  <hr/>
+  <div id="systembox" class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
+    bot thought: <br>
     <ul>
     {{range .Room.LogJournal}} 
     <li>{{.Username}}: {{.Entry}}</li>
     {{end}}
     </ul>
   </div>
-  <div sse-swap="journal_{{.Room.ID}}">
-    bot thoughts
-  <div>
+  <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}">
+  {{template "actionhistory" .Room.ActionHistory}}
+  </div>
+  <hr/>
   <div id="cardtable">
     {{template "cardtable" .Room}}
   </div>
@@ -77,9 +78,6 @@
       <button hx-get="/renotify-bot" hx-swap="none" class="bg-gray-100 text-black px-1 py-1 rounded">Btn in case llm call failed</button>
     {{end}}
   </div>
-  <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}">
-  {{template "actionhistory" .Room.ActionHistory}}
-  </div>
   {{if not .Room.IsRunning}}
   <div id="exitbtn">
           <button button id="exit-room-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/exit" hx-target="#ancestor">Exit Room</button>