From bf393380a9622749dc69771b5bfff466d28dc3c2 Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Tue, 18 Nov 2025 19:59:13 +0530
Subject: [PATCH] SimpleChatTCRV:UICleanup: limit border-radius, SlidingWindow
 info

Allow AutoCreated Object Properties Editing UI to be themed to an
extent by assigning a id to the top level element, which is based
on the legend specified.

Use the same to add inline padding as well as adjust border radius
wrt the elements within, for the Settings ui. And min height and
border width wrt input, select and buttons within.

Similarly for the default Usage,Restore and SettingsInfo summary
titles, avoid border-radius.

Show the string representation of the sliding window selected.

Add some padding to system prompt input.
---
 tools/server/public_simplechat/readme.md      |  1 +
 tools/server/public_simplechat/simplechat.css | 15 +++++++++++
 tools/server/public_simplechat/simplechat.js  | 27 ++++++++++++++-----
 tools/server/public_simplechat/ui.mjs         |  3 +++
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index 29871ae451..1e497215e5 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/tools/server/public_simplechat/readme.md
@@ -808,6 +808,7 @@ Cleanup in general
   * make the scrollbars more subtle and in the background.
   * allow user input textarea to grow vertically to some extent.
   * make things rounded across board by default. add some padding to toolcall details block.
+  * allow Auto ObjPropsEdit UI to be themed by assigning id to top level block.
 
 
 #### ToDo
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index c3a1621214..f75fb95e65 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -25,8 +25,13 @@ body {
     background-color: lightblue;
 }
 
+#system-in {
+    padding-inline: 0.5rem;
+}
+
 .role-system {
     background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%);
+    border-radius: 0.1vmin;
 }
 .role-user {
     background: linear-gradient(135deg, #D0F0FF 0%, var(--background-color) 100%);
@@ -195,6 +200,16 @@ button {
 [class^=SectionObjPropsInfoL] {
     margin-left: 2vmin;
 }
+#ObjPropsEdit-Settings * {
+    border-radius: 0.2rem;
+    padding-inline: 0.5rem;
+}
+#ObjPropsEdit-Settings button, #ObjPropsEdit-Settings select, #ObjPropsEdit-Settings input {
+    border-radius: 0.2rem;
+    padding-inline: 0.5rem;
+    min-height: 2vmin;
+    border-width: thin;
+}
 
 
 * {
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index e06d1b0318..1f53d0c7f2 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -435,9 +435,9 @@ class ChatMessageEx {
 
 
 /**
- * @param {number} iRecentUserMsgCnt
+ * @param {string} sRecentUserMsgCnt
  */
-function usage_note(iRecentUserMsgCnt) {
+function usage_note(sRecentUserMsgCnt) {
     let sUsageNote = `
     <details>
     <summary id="UsageNote" class="role-system">Usage Note</summary>
@@ -455,7 +455,7 @@ function usage_note(iRecentUserMsgCnt) {
         </ul>
     <li> Use image button for vision models, submitting or switching session clears same </li>
     <li> Clicking main title, toggles chat session buttons and system prompt </li>
-    <li> ContextWindow = [System, Last[${iRecentUserMsgCnt}] User Query/Resp, Cur Query].</li>
+    <li> ContextWindow = [System, ${sRecentUserMsgCnt} User Query/Resp, Cur Query].</li>
         <ul class="ul2">
         <li> ChatHistInCtxt, MaxTokens, ModelCtxt window to expand</li>
         </ul>
@@ -1381,7 +1381,7 @@ class MultiChatUI {
             this.scroll_el_into_view(this.elLastChatMessage)
         } else {
             if (bClear) {
-                this.elDivChat.innerHTML = usage_note(this.me.chatProps.iRecentUserMsgCnt-1);
+                this.elDivChat.innerHTML = usage_note(this.me.get_sRecentUserMsgCnt());
                 this.me.setup_load(this.elDivChat, chat);
                 this.me.show_info(this.elDivChat, bShowInfoAll);
             }
@@ -1844,7 +1844,7 @@ export class Me {
             bTrimGarbage: true,
         };
         /** @type {Object<string, number>} */
-        this.sRecentUserMsgCnt = {
+        this.sRecentUserMsgCntDict = {
             "Full": -1,
             "Last0": 1,
             "Last1": 2,
@@ -1972,12 +1972,25 @@ export class Me {
                 elParent.appendChild(sel.div);
             }
             if (propWithPath == ":chatProps:iRecentUserMsgCnt") {
-                let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCnt, this.chatProps.iRecentUserMsgCnt, (val)=>{
-                    this.chatProps.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val];
+                let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCntDict, this.chatProps.iRecentUserMsgCnt, (val)=>{
+                    this.chatProps.iRecentUserMsgCnt = this.sRecentUserMsgCntDict[val];
                 });
                 elParent.appendChild(sel.div);
             }
         })
     }
 
+    get_sRecentUserMsgCnt() {
+        let sRecentUserMsgCnt = Object.keys(this.sRecentUserMsgCntDict).find((key)=>{
+            if (this.sRecentUserMsgCntDict[key] == this.chatProps.iRecentUserMsgCnt) {
+                return true
+            }
+            return false
+        });
+        if (sRecentUserMsgCnt) {
+            return sRecentUserMsgCnt;
+        }
+        return "Unknown";
+    }
+
 }
diff --git a/tools/server/public_simplechat/ui.mjs b/tools/server/public_simplechat/ui.mjs
index d03d8f0088..9605208bad 100644
--- a/tools/server/public_simplechat/ui.mjs
+++ b/tools/server/public_simplechat/ui.mjs
@@ -310,6 +310,9 @@ export function ui_show_obj_props_edit(elParent, propsTreeRoot, oObj, lProps, sL
         "number": "number",
     };
     let elFS = document.createElement("fieldset");
+    if (propsTreeRoot == "") {
+        elFS.id = `ObjPropsEdit-${sLegend.replaceAll(' ', '')}`
+    }
     let elLegend = document.createElement("legend");
     elLegend.innerText = sLegend;
     elFS.appendChild(elLegend);