agent-discover 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.2] - 2026-04-12
+
+### Changed
+
+- **Time picker redesigned** — replaced native `datetime-local` inputs in the filter bar with a popover dropdown. Default view shows preset time ranges (Last 15 min, 1h, 6h, 24h, 7d, 30d, All time). "Custom range" section at the bottom opens labeled From/To datetime pickers inside the popover. The button label updates to show the selected range (e.g. "Last 1 hour" or "2026-04-12 10:00 – 14:00").
+- **Filter bar layout** — search bar is now full-width on its own row with descriptive placeholder. Server, status, and time picker sit on the second row. Title + Clear All on top row.
+- **Hash-based tab routing** — active tab is persisted in the URL hash (`#servers`, `#browse`, `#logs`). Refreshing the page restores the last-viewed tab.
+
 ## [1.3.1] - 2026-04-12
 
 ### Added

package/agent-desk-plugin.json

@@ -2,7 +2,7 @@
   "id": "agent-discover",
   "name": "Discover",
   "icon": "explore",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "MCP server registry — browse, install, configure, monitor",
   "ui": "./dist/ui/app.js",
   "css": "./dist/ui/styles.css",

package/dist/ui/app.js

@@ -78,26 +78,37 @@
   // Tab navigation
   // -------------------------------------------------------------------------
 
+  function switchTab(tab) {
+    currentTab = tab;
+    var navItems = AD._root.querySelectorAll('.nav-item');
+    navItems.forEach(function (n) {
+      n.classList.remove('active');
+      if (n.dataset.tab === tab) n.classList.add('active');
+    });
+    AD._root.querySelectorAll('.tab-panel').forEach(function (p) {
+      p.classList.remove('active');
+    });
+    AD._root.getElementById('tab-' + tab).classList.add('active');
+    if (tab === 'logs') renderLogs();
+    try {
+      history.replaceState(null, '', '#' + tab);
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
   function initTabs() {
     var navItems = AD._root.querySelectorAll('.nav-item');
     navItems.forEach(function (item) {
       item.addEventListener('click', function () {
-        var tab = this.dataset.tab;
-        currentTab = tab;
-
-        navItems.forEach(function (n) {
-          n.classList.remove('active');
-        });
-        this.classList.add('active');
-
-        AD._root.querySelectorAll('.tab-panel').forEach(function (p) {
-          p.classList.remove('active');
-        });
-        AD._root.getElementById('tab-' + tab).classList.add('active');
-
-        if (tab === 'logs') renderLogs();
+        switchTab(this.dataset.tab);
       });
     });
+
+    var hash = location.hash.replace('#', '');
+    if (hash && AD._root.getElementById('tab-' + hash)) {
+      switchTab(hash);
+    }
   }
 
   // -------------------------------------------------------------------------
@@ -1212,8 +1223,7 @@
     var serverSel = AD._root.getElementById('log-filter-server');
     var statusSel = AD._root.getElementById('log-filter-status');
     var searchInput = AD._root.getElementById('log-filter-search');
-    var fromInput = AD._root.getElementById('log-filter-from');
-    var toInput = AD._root.getElementById('log-filter-to');
+
     if (serverSel)
       serverSel.addEventListener('change', function () {
         logFilter.server = this.value;
@@ -1229,16 +1239,84 @@
         logFilter.search = this.value;
         renderLogs();
       });
-    if (fromInput)
-      fromInput.addEventListener('change', function () {
-        logFilter.from = this.value;
+
+    initTimePicker();
+  }
+
+  function initTimePicker() {
+    var btn = AD._root.getElementById('log-time-btn');
+    var dropdown = AD._root.getElementById('log-time-dropdown');
+    var label = AD._root.getElementById('log-time-label');
+    var applyBtn = AD._root.getElementById('log-time-apply');
+    var fromInput = AD._root.getElementById('log-time-from');
+    var toInput = AD._root.getElementById('log-time-to');
+    if (!btn || !dropdown) return;
+
+    btn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      dropdown.classList.toggle('open');
+    });
+
+    document.addEventListener('click', function (e) {
+      if (!dropdown.contains(e.target) && e.target !== btn && !btn.contains(e.target)) {
+        dropdown.classList.remove('open');
+      }
+    });
+
+    var presetBtns = dropdown.querySelectorAll('.log-time-presets button');
+    presetBtns.forEach(function (pb) {
+      pb.addEventListener('click', function () {
+        var minutes = parseInt(this.dataset.minutes, 10);
+        presetBtns.forEach(function (b) {
+          b.classList.remove('active');
+        });
+        this.classList.add('active');
+        if (minutes === 0) {
+          logFilter.from = '';
+          logFilter.to = '';
+          if (label) label.textContent = 'All time';
+        } else {
+          logFilter.from = new Date(Date.now() - minutes * 60000).toISOString();
+          logFilter.to = '';
+          if (label) label.textContent = this.textContent;
+        }
+        if (fromInput) fromInput.value = '';
+        if (toInput) toInput.value = '';
+        dropdown.classList.remove('open');
         renderLogs();
       });
-    if (toInput)
-      toInput.addEventListener('change', function () {
-        logFilter.to = this.value;
+    });
+
+    if (applyBtn) {
+      applyBtn.addEventListener('click', function () {
+        var f = fromInput ? fromInput.value : '';
+        var t = toInput ? toInput.value : '';
+        var fd = f ? new Date(f) : null;
+        var td = t ? new Date(t) : null;
+        logFilter.from = fd ? fd.toISOString() : '';
+        logFilter.to = td ? td.toISOString() : '';
+        presetBtns.forEach(function (b) {
+          b.classList.remove('active');
+        });
+        function fmtShort(d) {
+          return (
+            d.getFullYear() +
+            '-' +
+            String(d.getMonth() + 1).padStart(2, '0') +
+            '-' +
+            String(d.getDate()).padStart(2, '0') +
+            ' ' +
+            String(d.getHours()).padStart(2, '0') +
+            ':' +
+            String(d.getMinutes()).padStart(2, '0')
+          );
+        }
+        var rangeLabel = (fd ? fmtShort(fd) : '...') + ' \u2013 ' + (td ? fmtShort(td) : 'now');
+        if (label) label.textContent = rangeLabel;
+        dropdown.classList.remove('open');
         renderLogs();
       });
+    }
   }
 
   function fetchLogs() {

package/dist/ui/index.html

@@ -154,18 +154,24 @@
         </section>
 
         <section class="tab-panel" id="tab-logs">
-          <div class="panel-header">
-            <h2 class="section-title">Call Logs</h2>
+          <div class="log-header">
+            <div class="log-header-top">
+              <h2 class="section-title">Call Logs</h2>
+              <button class="btn-clear-logs" data-action="clear-logs">
+                <span class="material-symbols-outlined" style="font-size: 14px">delete_sweep</span>
+                Clear All
+              </button>
+            </div>
+            <div class="log-filter-search-wrap">
+              <span class="material-symbols-outlined" style="font-size: 16px">search</span>
+              <input
+                type="text"
+                id="log-filter-search"
+                placeholder="Search server, tool, args, response..."
+                autocomplete="off"
+              />
+            </div>
             <div class="log-filters">
-              <div class="log-filter-search-wrap">
-                <span class="material-symbols-outlined" style="font-size: 14px">search</span>
-                <input
-                  type="text"
-                  id="log-filter-search"
-                  placeholder="Search logs..."
-                  autocomplete="off"
-                />
-              </div>
               <select id="log-filter-server">
                 <option value="">All servers</option>
               </select>
@@ -174,12 +180,38 @@
                 <option value="success">Success</option>
                 <option value="fail">Failed</option>
               </select>
-              <input type="datetime-local" id="log-filter-from" title="From" />
-              <input type="datetime-local" id="log-filter-to" title="To" />
-              <button class="btn-clear-logs" data-action="clear-logs">
-                <span class="material-symbols-outlined" style="font-size: 14px">delete_sweep</span>
-                Clear All
-              </button>
+              <div class="log-time-picker" id="log-time-picker">
+                <button class="log-time-btn" id="log-time-btn">
+                  <span class="material-symbols-outlined" style="font-size: 14px">schedule</span>
+                  <span id="log-time-label">All time</span>
+                  <span class="material-symbols-outlined" style="font-size: 14px">expand_more</span>
+                </button>
+                <div class="log-time-dropdown" id="log-time-dropdown">
+                  <div class="log-time-presets">
+                    <button data-minutes="15">Last 15 min</button>
+                    <button data-minutes="60">Last 1 hour</button>
+                    <button data-minutes="360">Last 6 hours</button>
+                    <button data-minutes="1440">Last 24 hours</button>
+                    <button data-minutes="10080">Last 7 days</button>
+                    <button data-minutes="43200">Last 30 days</button>
+                    <button data-minutes="0" class="active">All time</button>
+                  </div>
+                  <div class="log-time-custom">
+                    <div class="log-time-custom-label">Custom range</div>
+                    <div class="log-time-custom-fields">
+                      <div class="log-time-field">
+                        <label>From</label>
+                        <input type="datetime-local" id="log-time-from" />
+                      </div>
+                      <div class="log-time-field">
+                        <label>To</label>
+                        <input type="datetime-local" id="log-time-to" />
+                      </div>
+                      <button class="log-time-apply" id="log-time-apply">Apply</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div id="logs-list" class="logs-table-wrap">

package/dist/ui/styles.css

@@ -1111,54 +1111,207 @@ body {
    Logs tab
    --------------------------------------------------------------------------- */
 
+.log-header {
+  padding: 16px 24px 12px;
+}
+
+.log-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.log-filter-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 10px;
+  height: 36px;
+  margin-bottom: 8px;
+}
+
+.log-filter-search-wrap .material-symbols-outlined {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.log-filter-search-wrap input {
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  font-family: var(--font-mono);
+  color: var(--text);
+  width: 100%;
+}
+
+.log-filter-search-wrap input::placeholder {
+  color: var(--text-dim);
+}
+
 .log-filters {
   display: flex;
   gap: 8px;
   align-items: center;
-  flex-wrap: wrap;
 }
 
-.log-filters select,
-.log-filters input[type='datetime-local'] {
+.log-filters select {
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 5px 10px;
+  padding: 6px 10px;
   font-size: 12px;
   font-family: var(--font-mono);
   color: var(--text);
+  height: 32px;
 }
 
-.log-filters input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  filter: invert(0.7);
+.log-time-picker {
+  position: relative;
 }
 
-.log-filter-search-wrap {
+.log-time-btn {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 4px 8px;
+  padding: 0 10px;
+  height: 32px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
 }
 
-.log-filter-search-wrap .material-symbols-outlined {
-  color: var(--text-dim);
+.log-time-btn:hover {
+  border-color: var(--accent);
 }
 
-.log-filter-search-wrap input {
+.log-time-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-3);
+  z-index: 100;
+  min-width: 220px;
+  overflow: hidden;
+}
+
+.log-time-dropdown.open {
+  display: block;
+}
+
+.log-time-presets {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.log-time-presets button {
   background: none;
   border: none;
-  outline: none;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-family: var(--font-sans);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.log-time-presets button:hover {
+  background: var(--bg-hover);
+}
+
+.log-time-presets button.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.log-time-custom {
+  border-top: 1px solid var(--border);
+  padding: 10px 12px;
+}
+
+.log-time-custom-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+  font-family: var(--font-sans);
+}
+
+.log-time-custom-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.log-time-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.log-time-field label {
+  font-size: 11px;
+  color: var(--text-muted);
+  width: 34px;
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+}
+
+.log-time-field input {
+  flex: 1;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 5px 8px;
   font-size: 12px;
   font-family: var(--font-mono);
   color: var(--text);
-  width: 140px;
 }
 
-.log-filter-search-wrap input::placeholder {
-  color: var(--text-dim);
+.log-time-field input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.log-time-field input::-webkit-calendar-picker-indicator {
+  filter: invert(0.7);
+  cursor: pointer;
+}
+
+.log-time-apply {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 4px;
+}
+
+.log-time-apply:hover {
+  background: var(--accent-hover);
 }
 
 .logs-table {

package/dist/ui/template.js

@@ -100,15 +100,21 @@ AD._template = function () {
     '</div>' +
     '</section>' +
     '<section class="tab-panel" id="tab-logs">' +
-    '<div class="panel-header">' +
+    '<div class="log-header">' +
+    '<div class="log-header-top">' +
     '<h2 class="section-title">Call Logs</h2>' +
+    '<button class="btn-clear-logs" data-action="clear-logs"><span class="material-symbols-outlined" style="font-size:14px">delete_sweep</span> Clear All</button>' +
+    '</div>' +
+    '<div class="log-filter-search-wrap"><span class="material-symbols-outlined" style="font-size:16px">search</span><input type="text" id="log-filter-search" placeholder="Search server, tool, args, response..." autocomplete="off" /></div>' +
     '<div class="log-filters">' +
-    '<div class="log-filter-search-wrap"><span class="material-symbols-outlined" style="font-size:14px">search</span><input type="text" id="log-filter-search" placeholder="Search logs..." autocomplete="off" /></div>' +
     '<select id="log-filter-server"><option value="">All servers</option></select>' +
     '<select id="log-filter-status"><option value="">All</option><option value="success">Success</option><option value="fail">Failed</option></select>' +
-    '<input type="datetime-local" id="log-filter-from" title="From" />' +
-    '<input type="datetime-local" id="log-filter-to" title="To" />' +
-    '<button class="btn-clear-logs" data-action="clear-logs"><span class="material-symbols-outlined" style="font-size:14px">delete_sweep</span> Clear All</button>' +
+    '<div class="log-time-picker" id="log-time-picker">' +
+    '<button class="log-time-btn" id="log-time-btn"><span class="material-symbols-outlined" style="font-size:14px">schedule</span><span id="log-time-label">All time</span><span class="material-symbols-outlined" style="font-size:14px">expand_more</span></button>' +
+    '<div class="log-time-dropdown" id="log-time-dropdown">' +
+    '<div class="log-time-presets"><button data-minutes="15">Last 15 min</button><button data-minutes="60">Last 1 hour</button><button data-minutes="360">Last 6 hours</button><button data-minutes="1440">Last 24 hours</button><button data-minutes="10080">Last 7 days</button><button data-minutes="43200">Last 30 days</button><button data-minutes="0" class="active">All time</button></div>' +
+    '<div class="log-time-custom"><div class="log-time-custom-label">Custom range</div><div class="log-time-custom-fields"><div class="log-time-field"><label>From</label><input type="datetime-local" id="log-time-from" /></div><div class="log-time-field"><label>To</label><input type="datetime-local" id="log-time-to" /></div><button class="log-time-apply" id="log-time-apply">Apply</button></div></div>' +
+    '</div></div>' +
     '</div>' +
     '</div>' +
     '<div id="logs-list" class="logs-table-wrap">' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-discover",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "mcpName": "io.github.keshrath/agent-discover",
   "description": "MCP server registry and marketplace — discover, install, activate, and manage MCP tools on demand",
   "type": "module",