From f33e2afdf720da1a4dd8a3151ffb07e0f7ad06d1 Mon Sep 17 00:00:00 2001
From: koko210Serve <koko.yordanov@proton.me>
Date: Sat, 2 May 2026 15:19:10 +0300
Subject: [PATCH] frontend: new Prompt History section HTML + CSS

- Replace single <pre> Last Prompt with rich Prompt History viewer
- Add source filter buttons (All/Cat/Fallback), history dropdown selector
- Add metadata bar, copy-to-clipboard button, middle-truncation toggle
- Add collapsible section CSS classes for expandable subsections
---
 bot/static/css/style.css | 45 ++++++++++++++++++++++++++++++
 bot/static/index.html    | 60 ++++++++++++++++++++++++++++++----------
 2 files changed, 90 insertions(+), 15 deletions(-)

diff --git a/bot/static/css/style.css b/bot/static/css/style.css
index 395068c..a13d57c 100644
--- a/bot/static/css/style.css
+++ b/bot/static/css/style.css
@@ -441,6 +441,51 @@ h1, h3 {
   color: #ddd;
 }
 
+/* Prompt History Section */
+#prompt-history-section.collapsed #prompt-history-body {
+  display: none;
+}
+#prompt-history-toggle {
+  user-select: none;
+  transition: color 0.2s;
+}
+#prompt-history-toggle:hover {
+  color: #4CAF50;
+}
+#prompt-metadata span {
+  white-space: nowrap;
+}
+#prompt-metadata .prompt-meta-label {
+  color: #666;
+}
+#prompt-metadata .prompt-meta-value {
+  color: #ccc;
+}
+#prompt-display pre {
+  margin: 0;
+}
+.prompt-subsection-header {
+  cursor: pointer;
+  user-select: none;
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  background: #2a2a2a;
+  margin: 0.5rem 0 0.25rem 0;
+  font-size: 0.82rem;
+  color: #aaa;
+  transition: background 0.15s;
+}
+.prompt-subsection-header:hover {
+  background: #333;
+  color: #ddd;
+}
+.prompt-subsection-body.collapsed {
+  display: none;
+}
+#prompt-truncate-toggle {
+  accent-color: #4CAF50;
+}
+
 /* Mood Activities Editor */
 .act-mood-row {
   margin-bottom: 0.5rem;
diff --git a/bot/static/index.html b/bot/static/index.html
index d5118ad..c2e166b 100644
--- a/bot/static/index.html
+++ b/bot/static/index.html
@@ -543,23 +543,53 @@
         </div>
       </div>
 
-      <div class="section">
-        <h3>Last Prompt</h3>
-        <div style="margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem;">
-          <label style="font-size: 0.9rem; color: #aaa;">Source:</label>
-          <div style="display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #444;">
-            <button id="prompt-src-cat" class="prompt-source-btn active" onclick="switchPromptSource('cat')"
-              style="padding: 0.4rem 1rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
-              🐱 Cheshire Cat
-            </button>
-            <button id="prompt-src-fallback" class="prompt-source-btn" onclick="switchPromptSource('fallback')"
-              style="padding: 0.4rem 1rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
-              🤖 Bot Fallback
-            </button>
+      <div class="section" id="prompt-history-section">
+        <div class="prompt-history-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
+          <h3 style="margin: 0; cursor: pointer;" onclick="togglePromptHistoryCollapse()" id="prompt-history-toggle">
+            ▼ Prompt History
+          </h3>
+          <button onclick="loadPromptHistory()" title="Refresh" style="background: none; border: 1px solid #444; color: #aaa; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">🔄</button>
+        </div>
+        <div id="prompt-history-body">
+          <!-- Source filter + history selector row -->
+          <div style="margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
+            <label style="font-size: 0.9rem; color: #aaa;">Source:</label>
+            <div style="display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #444;">
+              <button id="prompt-src-all" class="prompt-source-btn active" onclick="switchPromptSource('all')"
+                style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
+                All
+              </button>
+              <button id="prompt-src-cat" class="prompt-source-btn" onclick="switchPromptSource('cat')"
+                style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
+                🐱 Cat
+              </button>
+              <button id="prompt-src-fallback" class="prompt-source-btn" onclick="switchPromptSource('fallback')"
+                style="padding: 0.4rem 0.8rem; border: none; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;">
+                🤖 Fallback
+              </button>
+            </div>
+            <select id="prompt-history-select" onchange="selectPromptEntry(this.value)" style="background: #2a2a2a; color: #ddd; border: 1px solid #444; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.85rem; min-width: 280px;">
+              <option value="">-- No prompts yet --</option>
+            </select>
+          </div>
+
+          <!-- Metadata bar -->
+          <div id="prompt-metadata" style="margin-bottom: 0.5rem; font-size: 0.82rem; color: #888; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem;"></div>
+
+          <!-- Toolbar: copy + truncate toggle -->
+          <div style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 1rem;">
+            <button onclick="copyPromptToClipboard()" title="Copy full prompt to clipboard" style="background: #333; border: 1px solid #555; color: #aaa; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.8rem;">📋 Copy</button>
+            <label style="font-size: 0.82rem; color: #aaa; cursor: pointer; display: flex; align-items: center; gap: 0.3rem;">
+              <input type="checkbox" id="prompt-truncate-toggle" onchange="toggleMiddleTruncation()">
+              Truncate from middle
+            </label>
+          </div>
+
+          <!-- Prompt display subsections -->
+          <div id="prompt-display" style="max-height: 60vh; overflow-y: auto;">
+            <pre id="last-prompt" style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.75rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0;"></pre>
           </div>
         </div>
-        <div id="prompt-cat-info" style="margin-bottom: 0.5rem; font-size: 0.85rem; color: #aaa;"></div>
-        <pre id="last-prompt" style="white-space: pre-wrap; word-break: break-word;"></pre>
       </div>
     </div>