From ae68ee18500a0c635ddace53ff0f1d03a19e8862 Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Thu, 20 Nov 2025 14:27:57 +0530
Subject: [PATCH] SimpleChatTCRV:UIClean:Free up vertical space

move sessions buttons div to heading block

and move program name to the default block added to chat div, if
there is no chat in a given chat session.

cleanup the default block helpers to follow a common pattern.

also make the chat message bubbles/blocks bit more prominently box
shadowy
---
 tools/server/public_simplechat/index.html     |  7 +++---
 tools/server/public_simplechat/readme.md      |  1 +
 tools/server/public_simplechat/simplechat.css | 18 +++++++++++----
 tools/server/public_simplechat/simplechat.js  | 23 +++++++++++++++----
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index 617d9b6094..91e69d269a 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -24,16 +24,15 @@
         <div class="samecolumn" id="fullbody">
 
             <div class="sameline" id="heading">
-                <div class="heading flex-grow" > <b> SimpleChat </b> </div>
-                <div class="flex-nogrow">
-                    <button id="sessionsprompts" title="chat sessions, system prompts">&#x1F4AC;</button>
+                <div id="sessions-div" class="flex-grow"></div>
+                <div id="icons-div" class="flex-nogrow">
+                    <button id="sessionsprompts" title="system prompts">&#x2728;</button>
                     <button id="clearchat" title="clear current chat">&#x1F9F9;</button>
                     <button id="settings" title="change settings">&#x2699;</button>
                 </div>
             </div>
 
             <div id="sessionsprompts-div" class="visibility-visible">
-                <div id="sessions-div" class="sameline"></div>
                 <hr>
                 <div class="sameline role-system">
                     <label for="system-in">System</label>
diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index e8246a5aaa..e48a032b29 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/tools/server/public_simplechat/readme.md
@@ -834,6 +834,7 @@ Cleanup in general
   * ensure full props hierarchy is accounted for when setting the id of elements.
 * Chat button to toggle sessions buttons and system prompt.
 * Use unix date format markers wrt sys_date_time toolcall, also add w (day of week).
+* Free up the useful vertical space by merging chat sessions buttons/tabs into heading
 
 
 #### ToDo
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 682414753a..bcb736d2bb 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -20,6 +20,9 @@ body {
     background: linear-gradient(135deg, var(--background-color) 0%, lightblue 100%);
     margin: 0;
 }
+#sessions-div {
+    overflow: auto;
+}
 
 .session-selected {
     background-color: lightblue;
@@ -54,12 +57,19 @@ body {
     background: linear-gradient(135deg, lightpink 0%, transparent 100%);
 }
 
-#UsageNote {
+#DefaultUsage {
     margin: 0.0vmin;
 }
-.restore-details {
+#DefaultRestore {
     margin: 0.0vmin;
 }
+#DefaultInfo {
+    margin: 0.0vmin;
+}
+#DefaultTitle {
+    font-size: xx-small;
+    text-align: end;
+}
 
 .chat-message {
     display: flex;
@@ -68,10 +78,10 @@ body {
     border: none;
     padding: 0.4vmin;
     padding-left: 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
 }
 .chat-message:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
 }
 .chat-message-role {
     border: none;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 30779b26a0..bbd009b8b7 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -439,8 +439,8 @@ class ChatMessageEx {
  */
 function usage_note(sRecentUserMsgCnt) {
     let sUsageNote = `
-    <details>
-    <summary id="UsageNote" class="role-system">Usage Note</summary>
+    <details id="DefaultUsage">
+    <summary class="role-system">Usage Note</summary>
     <ul class="ul1">
     <li> Clicking chat icon, toggles chat session buttons and system prompt block </li>
     <li> System prompt above, helps control ai response characteristics.</li>
@@ -1394,6 +1394,7 @@ class MultiChatUI {
                 this.elDivChat.innerHTML = usage_note(this.me.get_sRecentUserMsgCnt());
                 this.me.setup_load(this.elDivChat, chat);
                 this.me.show_info(this.elDivChat, bShowInfoAll);
+                this.me.show_title(this.elDivChat);
             }
         }
         return true
@@ -1925,7 +1926,7 @@ export class Me {
     setup_load(div, chat) {
         let tag = `Me:Load:${chat.chatId}`;
         let elRestore = document.createElement("details")
-        elRestore.className = "restore-details"
+        elRestore.id = "DefaultRestore"
         elRestore.hidden = true
         elRestore.open = true
         elRestore.innerHTML += '<summary class="role-system">Restore</summary>\n';
@@ -1961,6 +1962,17 @@ export class Me {
         })
     }
 
+    /**
+     * Show the title of this program
+     * @param {HTMLDivElement} elDiv
+     */
+    show_title(elDiv) {
+        let elTitle = document.createElement("div");
+        elTitle.id = "DefaultTitle";
+        elTitle.appendChild(document.createTextNode("SimpleChat"))
+        elDiv.appendChild(elTitle)
+    }
+
     /**
      * Show the configurable parameters info in the passed Div element.
      * @param {HTMLDivElement} elDiv
@@ -1971,12 +1983,15 @@ export class Me {
         if (!bAll) {
             props = [ "baseURL", "modelInfo", "tools", "chatProps" ];
         }
+        let elInfo = document.createElement("div")
+        elInfo.id = "DefaultInfo"
+        elDiv.appendChild(elInfo)
         fetch(`${this.baseURL}/props`).then(resp=>resp.json()).then(json=>{
             this.modelInfo = {
                 modelPath: json["model_path"],
                 ctxSize: json["default_generation_settings"]["n_ctx"]
             }
-            ui.ui_show_obj_props_info(elDiv, this, props, "Current Settings/Info (dev console document[gMe])", "", { toplegend: 'role-system' })
+            ui.ui_show_obj_props_info(elInfo, this, props, "Current Settings/Info (dev console document[gMe])", "", { toplegend: 'role-system' })
         }).catch(err=>console.log(`WARN:ShowInfo:${err}`))
     }