From 911df888730c50898becedd85c1ce5ca1ef4eff4 Mon Sep 17 00:00:00 2001
From: Rock Lambros <rocklambros@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:47:18 -0600
Subject: [PATCH] Add date/time column display and datetime range filter to
 dashboard

Show full date+time (YYYY-MM-DD HH:MM:SS.mmm) in the event table
instead of time-only, and add start/end datetime-local inputs to the
toolbar for client-side filtering of events by date range.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 openclaw_security/dashboard/dashboard.html | 27 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/openclaw_security/dashboard/dashboard.html b/openclaw_security/dashboard/dashboard.html
index 3b9e2bc..f7e3091 100644
--- a/openclaw_security/dashboard/dashboard.html
+++ b/openclaw_security/dashboard/dashboard.html
@@ -130,7 +130,7 @@
       color: var(--text-muted);
     }
 
-    .toolbar select, .toolbar input[type="text"] {
+    .toolbar select, .toolbar input[type="text"], .toolbar input[type="datetime-local"] {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 6px;
@@ -138,9 +138,10 @@
       font-size: 0.8rem;
       padding: 0.4rem 0.6rem;
       font-family: 'JetBrains Mono', monospace;
+      color-scheme: dark;
     }
 
-    .toolbar select:focus, .toolbar input[type="text"]:focus {
+    .toolbar select:focus, .toolbar input[type="text"]:focus, .toolbar input[type="datetime-local"]:focus {
       outline: none;
       border-color: var(--accent);
     }
@@ -496,6 +497,10 @@ <h1>OpenClaw <span>Security</span></h1>
       <option value="message.before">message.before</option>
     </select>
     <input type="text" id="filterSearch" placeholder="Search session, tool..." style="width: 180px;">
+    <label>From</label>
+    <input type="datetime-local" id="filterStart" step="1">
+    <label>To</label>
+    <input type="datetime-local" id="filterEnd" step="1">
     <div class="spacer"></div>
     <span style="font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;" id="eventCount">0 events</span>
     <label style="display: flex; align-items: center; gap: 0.4rem; cursor: pointer;">
@@ -507,7 +512,7 @@ <h1>OpenClaw <span>Security</span></h1>
     <table>
       <thead>
         <tr>
-          <th>Time</th>
+          <th>Date and Time</th>
           <th>Action</th>
           <th>Stage</th>
           <th>Tool</th>
@@ -551,6 +556,8 @@ <h2>
   const filterActionChecks = document.querySelectorAll('input[name="filterAction"]');
   const filterStage = document.getElementById('filterStage');
   const filterSearch = document.getElementById('filterSearch');
+  const filterStart = document.getElementById('filterStart');
+  const filterEnd = document.getElementById('filterEnd');
   const autoScroll = document.getElementById('autoScroll');
 
   let allEvents = [];
@@ -568,8 +575,10 @@ <h2>
   // ── Rendering ─────────────────────────────────
   function formatTime(ts) {
     const d = new Date(ts * 1000);
-    return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    const date = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+    const time = d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
       + '.' + String(d.getMilliseconds()).padStart(3, '0');
+    return date + ' ' + time;
   }
 
   function badgeClass(action) {
@@ -592,6 +601,14 @@ <h2>
       const haystack = [ev.session_id, ev.tool_name, ...ev.reasons].join(' ').toLowerCase();
       if (!haystack.includes(q)) return false;
     }
+    if (filterStart.value) {
+      const startTs = new Date(filterStart.value).getTime() / 1000;
+      if (ev.timestamp < startTs) return false;
+    }
+    if (filterEnd.value) {
+      const endTs = new Date(filterEnd.value).getTime() / 1000;
+      if (ev.timestamp > endTs) return false;
+    }
     return true;
   }
 
@@ -682,6 +699,8 @@ <h2>
   filterActionChecks.forEach(cb => { cb.onchange = renderAll; });
   filterStage.onchange = renderAll;
   filterSearch.oninput = renderAll;
+  filterStart.onchange = renderAll;
+  filterEnd.onchange = renderAll;
 
   // ── Load history ──────────────────────────────
   async function loadHistory() {