@logboard/cli 1.0.0

package/views/logs.ejs

@@ -0,0 +1,754 @@
+<%- include('partials/head', { title: 'Logs' }) %>
+<%
+  // Server‑side helper: unescape common escape sequences for display
+  function unescapeLog(str) {
+    if (!str) return '';
+    return str
+      .replace(/\\n/g, '\n')
+      .replace(/\\r/g, '\r')
+      .replace(/\\t/g, '\t')
+      .replace(/\\"/g, '"')
+      .replace(/\\\\/g, '\\');
+  }
+
+  // Ensure fromTime and toTime have default values (if not provided)
+  var fromTime = selected.fromTime || '00:00';
+  var toTime   = selected.toTime || '23:59';
+  // For single date, ensure date has a value (today)
+  var singleDate = selected.date || (selected.fromDate ? '' : (new Date().toISOString().slice(0,10)));
+%>
+<style>
+  .time-range-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0 4px;border-top:1px solid var(--border);margin-top:8px;}
+  .date-range-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0 0;margin-top:4px;}
+  .log-stats-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface2);border-radius:var(--radius);margin-bottom:10px;border:1px solid var(--border);flex-wrap:wrap;}
+  .field-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
+  .field-pill{font-size:10px;padding:1px 7px;border-radius:3px;background:var(--surface3);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-family:'JetBrains Mono',monospace;}
+  .field-pill:hover{border-color:var(--accent);color:var(--accent-l);}
+  .field-pill .k{color:var(--text3);}
+  .trace-link{color:var(--accent-l);text-decoration:underline;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:11px;}
+  .modal-lg{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;backdrop-filter:blur(4px);}
+  .modal-lg.open{display:flex;}
+  .modal-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:min(720px,96vw);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;}
+  .modal-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13px;}
+  .modal-bdy{overflow-y:auto;padding:8px 0;}
+  .ctx-line{padding:5px 18px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.6;cursor:pointer;transition:background .1s;}
+  .ctx-line:hover{background:var(--surface2);}
+  .ctx-line.focus{background:rgba(99,102,241,.12);border-left:3px solid var(--accent);padding-left:15px;}
+  .ctx-line.level-error{border-left-color:var(--red);}
+  .ctx-line.level-warn{border-left-color:var(--yellow);}
+  .ss-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
+  .ss-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:14px;background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent-l);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;}
+  .ss-chip:hover{background:rgba(99,102,241,.25);}
+  .ss-chip .del{opacity:0;font-size:12px;margin-left:2px;line-height:1;}
+  .ss-chip:hover .del{opacity:.6;}
+  .mode-tabs{display:flex;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden;width:fit-content;}
+  .mode-tab{padding:5px 14px;font-size:11px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text3);transition:all .15s;}
+  .mode-tab.active{background:var(--accent);color:#fff;}
+  .time-picker-group{display:flex;align-items:center;gap:6px;background:var(--surface2);padding:2px 8px;border-radius:var(--radius);border:1px solid var(--border);}
+  .time-picker-group select{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:12px;color:var(--text);}
+  .quick-time-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
+  .quick-time-btn{padding:2px 8px;font-size:10px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;color:var(--text2);}
+  .quick-time-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-l);}
+  .log-json { white-space: pre-wrap; word-break: break-word; font-family: 'JetBrains Mono', monospace; font-size: 11px; margin: 0; background: var(--surface3); padding: 8px 12px; border-radius: 4px; }
+  .toast { position: fixed; bottom: 20px; right: 20px; z-index: 9999; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
+  .toast-info { background: #3b82f6; color: #fff; }
+  .toast-error { background: #ef4444; color: #fff; }
+  .toast-success { background: #22c55e; color: #fff; }
+</style>
+
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Logs</div>
+      <div class="header-actions">
+        <button class="btn btn-secondary btn-sm" onclick="openTraceModal()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><polyline points="21,21 16.65,16.65"/></svg>
+          Trace ID
+        </button>
+        <% if (selected.service && (selected.date || selected.fromDate)) { %>
+        <button class="btn btn-secondary btn-sm" onclick="saveSearch()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+          Save Search
+        </button>
+        <a href="/api/logs/download/<%= selected.service %>/<%= selected.date %>?format=txt<%= selected.level?'&level='+selected.level:'' %><%= selected.q?'&q='+encodeURIComponent(selected.q):'' %>" class="btn btn-secondary btn-sm">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          Download .txt
+        </a>
+        <% } %>
+      </div>
+    </header>
+
+    <div class="page-content">
+      <div class="ss-chips" id="ss-chips-bar" style="margin-bottom:8px;"></div>
+
+      <div class="card" style="margin-bottom:12px;">
+        <form method="GET" action="/logs" id="search-form">
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
+            <span style="font-size:11px;color:var(--text3);">Mode:</span>
+            <div class="mode-tabs">
+              <button type="button" class="mode-tab <%= !selected.fromDate ? 'active' : '' %>" onclick="setMode('single')">Single Date</button>
+              <button type="button" class="mode-tab <%= selected.fromDate ? 'active' : '' %>" onclick="setMode('range')">Date Range</button>
+            </div>
+          </div>
+
+          <div class="form-row" style="gap:10px;flex-wrap:wrap;">
+            <div class="form-group" style="min-width:160px;flex:1.5;margin:0">
+              <label class="form-label">Service</label>
+              <select name="service" class="form-select" onchange="this.form.submit()">
+                <option value="">— All Services —</option>
+                <% services.forEach(function(s){ %>
+                  <option value="<%= s.appName %>" <%= selected.service === s.appName ? 'selected' : '' %>><%= s.appName %></option>
+                <% }) %>
+              </select>
+            </div>
+
+            <!-- Single date mode -->
+            <div id="single-date-fields" style="display:<%= selected.fromDate ? 'none' : 'flex' %>;gap:10px;flex-wrap:wrap;">
+              <div class="form-group" style="min-width:140px;margin:0">
+                <label class="form-label">Date</label>
+                <input type="date" name="date" id="date-single" class="form-input" value="<%= singleDate %>" max="<%= today %>"/>
+              </div>
+            </div>
+
+            <!-- Date range mode -->
+            <div id="range-date-fields" style="display:<%= selected.fromDate ? 'flex' : 'none' %>;gap:10px;flex-wrap:wrap;">
+              <div class="form-group" style="min-width:130px;margin:0">
+                <label class="form-label">From Date</label>
+                <input type="date" name="fromDate" id="date-from" class="form-input" value="<%= selected.fromDate %>" max="<%= today %>"/>
+              </div>
+              <div class="form-group" style="min-width:130px;margin:0">
+                <label class="form-label">To Date</label>
+                <input type="date" name="toDate" id="date-to" class="form-input" value="<%= selected.toDate %>" max="<%= today %>"/>
+              </div>
+            </div>
+
+            <div class="form-group" style="min-width:120px;margin:0">
+              <label class="form-label">Level</label>
+              <select name="level" class="form-select">
+                <option value="">All Levels</option>
+                <option value="error" <%= selected.level === 'error' ? 'selected' : '' %>>Error</option>
+                <option value="warn"  <%= selected.level === 'warn' ? 'selected' : '' %>>Warn</option>
+                <option value="info"  <%= selected.level === 'info' ? 'selected' : '' %>>Info</option>
+                <option value="debug" <%= selected.level === 'debug' ? 'selected' : '' %>>Debug</option>
+              </select>
+            </div>
+
+            <div class="form-group" style="flex:2;min-width:180px;margin:0">
+              <label class="form-label" style="display:flex;align-items:center;gap:8px;">
+                Search
+                <label style="display:flex;align-items:center;gap:4px;font-weight:400;font-size:10px;color:var(--text3);cursor:pointer;">
+                  <input type="checkbox" id="regex-toggle" onchange="toggleRegex(this)"/> Regex
+                </label>
+              </label>
+              <div class="search-wrap">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input type="text" name="q" id="q-input" class="form-input search-input" placeholder="Search logs…" value="<%= selected.q %>"/>
+              </div>
+              <input type="hidden" name="regex" id="regex-flag" value="<%= selected.regex || '' %>"/>
+            </div>
+
+            <div class="form-group" style="display:flex;align-items:flex-end;gap:6px;margin:0">
+              <button type="submit" class="btn btn-primary">Search</button>
+              <a href="/logs" class="btn btn-secondary">Reset</a>
+            </div>
+          </div>
+
+          <!-- Time range row (only for single date mode) -->
+          <div id="time-range-row" class="time-range-row" style="<%= selected.fromDate ? 'display:none' : 'display:flex' %>">
+            <span style="font-size:11px;color:var(--text3);white-space:nowrap;">Time:</span>
+            <div class="time-picker-group">
+              <span style="font-size:11px;">From</span>
+              <select id="fromHour" class="form-select" style="width:70px;">
+                <% for(var i=0;i<=23;i++){ var h=i.toString().padStart(2,'0'); %>
+                <option value="<%=h%>" <%= fromTime.split(':')[0] === h ? 'selected' : '' %>><%=h%></option>
+                <% } %>
+              </select>
+              <span>:</span>
+              <select id="fromMinute" class="form-select" style="width:70px;">
+                <% [0,15,30,45].forEach(function(m){ var min=m.toString().padStart(2,'0'); %>
+                <option value="<%=min%>" <%= fromTime.split(':')[1] === min ? 'selected' : '' %>><%=min%></option>
+                <% }) %>
+              </select>
+            </div>
+            <span style="font-size:11px;color:var(--text3);">–</span>
+            <div class="time-picker-group">
+              <span style="font-size:11px;">To</span>
+              <select id="toHour" class="form-select" style="width:70px;">
+                <% for(var i=0;i<=23;i++){ var h=i.toString().padStart(2,'0'); %>
+                <option value="<%=h%>" <%= toTime.split(':')[0] === h ? 'selected' : '' %>><%=h%></option>
+                <% } %>
+              </select>
+              <span>:</span>
+              <select id="toMinute" class="form-select" style="width:70px;">
+                <% [0,15,30,45].forEach(function(m){ var min=m.toString().padStart(2,'0'); %>
+                <option value="<%=min%>" <%= toTime.split(':')[1] === min ? 'selected' : '' %>><%=min%></option>
+                <% }) %>
+              </select>
+            </div>
+            <input type="hidden" name="fromTime" id="fromTimeHidden" value="<%= fromTime %>"/>
+            <input type="hidden" name="toTime" id="toTimeHidden" value="<%= toTime %>"/>
+            <input type="hidden" name="tzOffset" id="tz-offset" value="0"/>
+            <div class="quick-time-group">
+              <span class="quick-time-btn" onclick="setQuickTime('00:00','23:59')">All day</span>
+              <span class="quick-time-btn" onclick="setQuickTime('06:00','12:00')">Morning</span>
+              <span class="quick-time-btn" onclick="setQuickTime('12:00','18:00')">Afternoon</span>
+              <span class="quick-time-btn" onclick="setQuickTime('18:00','23:59')">Evening</span>
+              <span class="quick-time-btn" onclick="setQuickTime('23:00','05:59')">Night*</span>
+            </div>
+            <span style="font-size:10px;color:var(--text3);">*crosses midnight (requires custom)</span>
+          </div>
+
+          <!-- Quick level chips (preserve all current filters) -->
+          <div class="chip-bar" style="margin-top:10px;padding-top:8px;border-top:1px solid var(--border);">
+            <span style="font-size:11px;color:var(--text3);font-weight:500;">Quick:</span>
+            <a href="#" class="chip error <%=selected.level==='error'?'active':''%>" onclick="setQuickFilter('error')"; return false;">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> Error
+            </a>
+            <a href="#" class="chip warn <%=selected.level==='warn'?'active':''%>" onclick="setQuickFilter('warn')"; return false;">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg> Warn
+            </a>
+            <a href="#" class="chip info <%=selected.level==='info'?'active':''%>" onclick="setQuickFilter('info')"; return false;">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> Info
+            </a>
+            <a href="#" class="chip debug <%=selected.level==='debug'?'active':''%>" onclick="setQuickFilter('debug')"; return false;">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg> Debug
+            </a>
+            <% if (selected.level) { %><a href="#" class="chip" onclick="clearLevelFilter(); return false;" style="color:var(--text3);">✕ Clear</a><% } %>
+          </div>
+        </form>
+      </div>
+
+      <!-- Results -->
+      <div class="card">
+        <% if (!selected.service) { %>
+          <div class="empty-state">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
+            <p>Select a service to view logs</p>
+          </div>
+        <% } else if (!results || !results.lines || !results.lines.length) { %>
+          <div class="empty-state">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            <p>No logs found for <strong><%= selected.service %></strong></p>
+          </div>
+        <% } else {
+          var lvlCounts={error:0,warn:0,info:0,debug:0,total:0};
+          results.lines.forEach(function(l){ try{var p=JSON.parse(l);var lv=(p.level||'info').toLowerCase();lvlCounts[lv]=(lvlCounts[lv]||0)+1;lvlCounts.total++;}catch(e){lvlCounts.total++;} });
+        %>
+          <div class="log-stats-bar">
+            <div class="ls-item"><strong style="color:var(--text)"><%= results.lines.length.toLocaleString() %></strong><span style="color:var(--text2)">lines</span></div>
+            <%if(lvlCounts.error>0){%><div class="ls-item"><span class="dot dot-red"></span><span style="color:var(--red)"><strong><%=lvlCounts.error%></strong> error<%=lvlCounts.error>1?'s':''%></span></div><%}%>
+            <%if(lvlCounts.warn>0){%><div class="ls-item"><span class="dot dot-yellow"></span><span style="color:var(--yellow)"><strong><%=lvlCounts.warn%></strong> warn</span></div><%}%>
+            <%if(selected.fromDate){%><div class="ls-item" style="color:var(--accent-l);font-size:11px;">📅 Range: <%=selected.fromDate%> → <%=selected.toDate%></div><%}%>
+            <div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
+              <label style="font-size:12px;color:var(--text3);display:flex;align-items:center;gap:5px;cursor:pointer;"><input type="checkbox" id="wrap-toggle" onchange="toggleWrap(this)"/> Wrap</label>
+              <% if(selected.service && selected.date && !selected.fromDate){ %>
+              <button class="btn btn-secondary btn-xs" onclick="viewClusters()">Clusters</button>
+              <% } %>
+            </div>
+          </div>
+
+          <div class="log-list" id="log-list">
+          <% results.lines.forEach(function(line, idx) {
+            var parsed=null,level='info',ts='',msg='',svc='',reqId='';
+            try{ parsed=JSON.parse(line); level=(parsed.level||'info').toLowerCase(); ts=parsed.ts?parsed.ts.replace('T',' ').slice(0,19):''; msg=parsed.message||parsed.msg||line; svc=parsed.appName||''; reqId=parsed.requestId||parsed.traceId||parsed.correlationId||''; }catch(e){ msg=line; }
+          %>
+          <div class="log-line level-<%= level %>" data-idx="<%= idx %>" onclick="toggleLine(this)">
+            <span class="level-icon <%= level %>">
+              <%if(level==='error'){%><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+              <%}else if(level==='warn'){%><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg>
+              <%}else if(level==='info'){%><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+              <%}else{%><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg><%}%>
+            </span>
+            <span class="log-ts"><%= ts %></span>
+            <span class="log-body" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><%= (msg||"").replace(/\n/g,"↵ ").replace(/\r/g,"").replace(/\t/g,"  ") %></span>
+            <%if(svc){%><span style="font-size:10px;color:var(--text3);white-space:nowrap;font-family:'JetBrains Mono',monospace;padding:1px 5px;background:var(--surface2);border-radius:3px;"><%=svc%></span><%}%>
+            <button class="icon-btn" style="padding:2px 4px;flex-shrink:0;" onclick="event.stopPropagation();showCtx('<%= selected.service||svc %>','<%= selected.date %>',<%=idx%>)" title="Context lines">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
+            </button>
+            <button class="icon-btn" style="padding:2px 4px;flex-shrink:0;" onclick="event.stopPropagation();bookmarkLine(<%=idx%>,'<%=level%>','<%= encodeURIComponent(msg.slice(0,200)) %>')" title="Bookmark">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            </button>
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="expand-icon" style="flex-shrink:0;color:var(--text3);transition:transform .15s;"><polyline points="6,9 12,15 18,9"/></svg>
+          </div>
+          <div class="log-expanded" style="display:none">
+            <pre class="log-json"><%= unescapeLog(line) %></pre>
+            <% if(reqId){ %>
+            <div style="padding:4px 0;"><span class="trace-link" onclick="traceId('<%= reqId %>')">🔗 Trace: <%= reqId.slice(0,36) %></span></div>
+            <% } %>
+            <% if(parsed && Object.keys(parsed).length>3){ %>
+            <div class="field-pills" onclick="event.stopPropagation()">
+              <% var SKIP=['ts','level','appName','message','msg','pid','host']; Object.entries(parsed).forEach(function(kv){ if(!SKIP.includes(kv[0])&&kv[1]!==null&&kv[1]!==undefined){ %>
+              <span class="field-pill" onclick="filterByField('<%= kv[0] %>','<%= String(kv[1]).replace(/'/g,"\\\'") %>'); "><span class="k"><%=kv[0]%>:</span> <%=typeof kv[1]==='object'?JSON.stringify(kv[1]):String(kv[1]).slice(0,60)%></span>
+              <% }}); %>
+            </div>
+            <% } %>
+          </div>
+          <% }); %>
+          </div>
+        <% } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Context Modal -->
+<div class="modal-lg" id="ctx-modal">
+  <div class="modal-inner">
+    <div class="modal-hdr">
+      <span>📄 Context Lines (click line to expand)</span>
+      <button class="icon-btn" onclick="closeModal('ctx-modal')">✕</button>
+    </div>
+    <div class="modal-bdy" id="ctx-body">Loading...</div>
+  </div>
+</div>
+
+<!-- Trace ID Modal -->
+<div class="modal-lg" id="trace-modal">
+  <div class="modal-inner">
+    <div class="modal-hdr">
+      <span>🔍 Trace ID Lookup</span>
+      <button class="icon-btn" onclick="closeModal('trace-modal')">✕</button>
+    </div>
+    <div class="modal-bdy" style="padding:12px 18px;">
+      <div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
+        <input type="text" id="trace-input" class="form-input" style="flex:2;min-width:200px;" placeholder="traceId / requestId / correlationId" autocomplete="off">
+        <input type="date" id="trace-date" class="form-input" style="width:140px;" placeholder="Date (optional)">
+        <button class="btn btn-primary" onclick="runTrace()">Search</button>
+      </div>
+      <div id="trace-body" style="border-top:1px solid var(--border);padding-top:12px;max-height:50vh;overflow-y:auto;"></div>
+    </div>
+  </div>
+</div>
+
+<!-- Cluster Modal -->
+<div class="modal-lg" id="cluster-modal">
+  <div class="modal-inner">
+    <div class="modal-hdr">
+      <span>🔬 Error Clusters</span>
+      <button class="icon-btn" onclick="closeModal('cluster-modal')">✕</button>
+    </div>
+    <div class="modal-bdy" id="cluster-body"></div>
+  </div>
+</div>
+
+<!-- Save Search Modal -->
+<div class="modal-lg" id="save-search-modal">
+  <div class="modal-inner">
+    <div class="modal-hdr">
+      <span>💾 Save Current Filters</span>
+      <button class="icon-btn" onclick="closeModal('save-search-modal')">✕</button>
+    </div>
+    <div class="modal-bdy" style="padding:12px 18px;">
+      <input type="text" id="ss-name" class="form-input" style="width:100%;margin-bottom:10px;" placeholder="Search name (e.g., Production Errors)">
+      <div id="ss-preview" style="font-size:11px;color:var(--text2);padding:8px;background:var(--surface2);border-radius:6px;margin-bottom:12px;"></div>
+      <div style="display:flex;gap:8px;justify-content:flex-end;">
+        <button class="btn btn-secondary" onclick="closeModal('save-search-modal')">Cancel</button>
+        <button class="btn btn-primary" onclick="doSaveSearch()">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Helper: update hidden time fields
+function updateHiddenTimes() {
+  const fromHour = document.getElementById('fromHour').value;
+  const fromMin  = document.getElementById('fromMinute').value;
+  const toHour   = document.getElementById('toHour').value;
+  const toMin    = document.getElementById('toMinute').value;
+  document.getElementById('fromTimeHidden').value = `${fromHour}:${fromMin}`;
+  document.getElementById('toTimeHidden').value   = `${toHour}:${toMin}`;
+}
+
+// Quick time preset
+function setQuickTime(fromStr, toStr) {
+  const [fromH, fromM] = fromStr.split(':');
+  const [toH, toM] = toStr.split(':');
+  document.getElementById('fromHour').value = fromH;
+  document.getElementById('fromMinute').value = fromM;
+  document.getElementById('toHour').value = toH;
+  document.getElementById('toMinute').value = toM;
+  updateHiddenTimes();
+}
+
+// Mode toggle (single date vs range)
+function setMode(m) {
+  const isSingle = (m === 'single');
+  const singleDiv = document.getElementById('single-date-fields');
+  const rangeDiv  = document.getElementById('range-date-fields');
+  const timeRow   = document.getElementById('time-range-row');
+  
+  if (isSingle) {
+    singleDiv.style.display = 'flex';
+    rangeDiv.style.display  = 'none';
+    timeRow.style.display   = 'flex';
+    // Clear range fields
+    document.getElementById('date-from').value = '';
+    document.getElementById('date-to').value   = '';
+    // Set single date to today if empty
+    const dateSingle = document.getElementById('date-single');
+    if (!dateSingle.value) {
+      const today = new Date().toISOString().slice(0,10);
+      dateSingle.value = today;
+    }
+    // Remove fromDate/toDate from URL by clearing hidden? Actual submission will not send because inputs are disabled? Actually they are text inputs, they will send empty strings. Better to set to empty.
+    // Force update hidden times to reflect current UI
+    updateHiddenTimes();
+  } else {
+    singleDiv.style.display = 'none';
+    rangeDiv.style.display  = 'flex';
+    timeRow.style.display   = 'none';
+    // Clear single date field
+    document.getElementById('date-single').value = '';
+    // Set default range if empty
+    const fromDate = document.getElementById('date-from');
+    const toDate = document.getElementById('date-to');
+    if (!fromDate.value && !toDate.value) {
+      const today = new Date().toISOString().slice(0,10);
+      fromDate.value = today;
+      toDate.value = today;
+    }
+    // Time fields not used but keep them default
+    document.getElementById('fromHour').value = '00';
+    document.getElementById('fromMinute').value = '00';
+    document.getElementById('toHour').value = '23';
+    document.getElementById('toMinute').value = '59';
+    updateHiddenTimes();
+  }
+  // Update active class on tabs
+  document.querySelectorAll('.mode-tab').forEach(tab => {
+    const isActive = (tab.textContent.trim() === (isSingle ? 'Single Date' : 'Date Range'));
+    tab.classList.toggle('active', isActive);
+  });
+}
+
+// Quick filter for level (preserves mode)
+function setQuickFilter(level) {
+  const service   = document.querySelector('select[name="service"]').value;
+  const q         = document.getElementById('q-input').value;
+  const regex     = document.getElementById('regex-flag').value;
+  const tzOffset  = new Date().getTimezoneOffset();
+  const isRange   = document.getElementById('range-date-fields').style.display === 'flex';
+  const fromDate  = document.getElementById('date-from')?.value || '';
+  const toDate    = document.getElementById('date-to')?.value   || '';
+  const date      = document.getElementById('date-single')?.value || '';
+  // Toggle: clicking the active level clears it
+  const current = new URLSearchParams(location.search).get('level');
+  const newLevel = (current === level) ? '' : level;
+  let url = '/logs?service=' + encodeURIComponent(service) + '&level=' + newLevel + '&q=' + encodeURIComponent(q);
+  if (isRange) {
+    url += '&fromDate=' + fromDate + '&toDate=' + toDate;
+  } else {
+    url += '&date=' + date + '&fromTime=' + (document.querySelector('[name="fromTime"]')?.value||'') + '&toTime=' + (document.querySelector('[name="toTime"]')?.value||'') + '&tzOffset=' + tzOffset;
+  }
+  if (regex) url += '&regex=1';
+  location.href = url;
+}
+
+function clearLevelFilter() {
+  const form = document.getElementById('search-form');
+  const service = document.querySelector('select[name="service"]').value;
+  const regex = document.getElementById('regex-flag').value;
+  const q = document.getElementById('q-input').value;
+  const tzOffset = new Date().getTimezoneOffset();
+  
+  const isRangeMode = document.getElementById('range-date-fields').style.display === 'flex';
+  let url = `/logs?service=${encodeURIComponent(service)}&q=${encodeURIComponent(q)}&regex=${regex}&tzOffset=${tzOffset}`;
+  
+  if (isRangeMode) {
+    const fromDate = document.getElementById('date-from').value;
+    const toDate = document.getElementById('date-to').value;
+    if (fromDate) url += `&fromDate=${fromDate}`;
+    if (toDate) url += `&toDate=${toDate}`;
+  } else {
+    const date = document.getElementById('date-single').value;
+    if (date) url += `&date=${date}`;
+    const fromTime = document.getElementById('fromTimeHidden').value;
+    const toTime = document.getElementById('toTimeHidden').value;
+    url += `&fromTime=${fromTime}&toTime=${toTime}`;
+  }
+  window.location.href = url;
+}
+
+// Regex toggle
+function toggleRegex(cb) {
+  document.getElementById('regex-flag').value = cb.checked ? '1' : '';
+  const inp = document.getElementById('q-input');
+  inp.placeholder = cb.checked ? 'Regex pattern, e.g. status: [45]\\d\\d' : 'Search logs…';
+  inp.style.fontFamily = cb.checked ? "'JetBrains Mono',monospace" : '';
+}
+
+// Log expand/collapse
+function toggleLine(el) {
+  const next = el.nextElementSibling;
+  if (!next) return;
+  const open = next.style.display === '';
+  next.style.display = open ? 'none' : '';
+  const icon = el.querySelector('.expand-icon');
+  if (icon) icon.style.transform = open ? '' : 'rotate(180deg)';
+}
+
+function toggleWrap(cb) {
+  document.querySelectorAll('.log-body').forEach(el => {
+    el.style.whiteSpace   = cb.checked ? 'pre-wrap' : 'nowrap';
+    el.style.overflow     = cb.checked ? 'visible' : 'hidden';
+    el.style.textOverflow = cb.checked ? 'clip' : 'ellipsis';
+  });
+}
+
+function filterByField(key, value) {
+  const currentQ = document.getElementById('q-input').value;
+  const newQuery = currentQ ? `${currentQ} ${key}:${value}` : `${key}:${value}`;
+  document.getElementById('q-input').value = newQuery;
+  document.getElementById('search-form').submit();
+}
+
+// Context modal
+async function showCtx(svc, date, idx) {
+  if (!svc || !date) { toast('Service or date missing', 'error'); return; }
+  openModal('ctx-modal');
+  const body = document.getElementById('ctx-body');
+  body.innerHTML = '<div style="text-align:center;padding:30px;color:var(--text3)">Loading…</div>';
+  try {
+    const r = await fetch('/api/logs/context/'+encodeURIComponent(svc)+'/'+date+'?lineIndex='+idx+'&n=10');
+    if (!r.ok) throw new Error('HTTP '+r.status);
+    const lines = await r.json();
+    if (!Array.isArray(lines)||!lines.length) { body.innerHTML='<div style="text-align:center;padding:30px;color:var(--text3)">No context</div>'; return; }
+    body.innerHTML = lines.map(item => {
+      let level='info', msg=item.line;
+      try { const p=JSON.parse(item.line); level=(p.level||'info').toLowerCase(); msg=p.message||item.line; } catch {}
+      const cls='ctx-line level-'+level+(item.isFocus?' focus':'');
+      return '<div class="'+cls+'" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display===\'none\'?\'block\':\'none\'">'
+        +'<span style="color:var(--text3);user-select:none;margin-right:10px;font-size:10px;">'+String(item.index).padStart(4,' ')+'</span>'
+        +escHtml(msg.slice(0,200))+'</div>'
+        +'<pre style="display:none;margin:0 18px 4px;background:var(--surface2);padding:8px 12px;border-radius:4px;font-size:11px;overflow-x:auto;white-space:pre-wrap;">'+escHtml(item.line)+'</pre>';
+    }).join('');
+  } catch(e) { body.innerHTML='<div style="text-align:center;padding:30px;color:var(--red)">Error: '+e.message+'</div>'; }
+}
+
+// Trace ID modal
+function openTraceModal() { 
+  document.getElementById('trace-input').value = '';
+  document.getElementById('trace-date').value = '';
+  document.getElementById('trace-body').innerHTML = '';
+  openModal('trace-modal'); 
+}
+
+function traceId(id) {
+  document.getElementById('trace-input').value = id;
+  openModal('trace-modal');
+  runTrace();
+}
+
+async function runTrace() {
+  const id   = document.getElementById('trace-input').value.trim();
+  const date = document.getElementById('trace-date').value;
+  if (!id) { toast('Enter a trace ID','error'); return; }
+  const body = document.getElementById('trace-body');
+  body.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text3)">Searching all services…</div>';
+  try {
+    const url = '/api/logs/trace?traceId='+encodeURIComponent(id)+(date?'&date='+date:'');
+    const r = await fetch(url);
+    if (!r.ok) throw new Error('HTTP '+r.status);
+    const d = await r.json();
+    if (!d.length) { body.innerHTML='<div style="text-align:center;padding:20px;color:var(--text3)">No logs found for trace ID: '+escHtml(id)+'</div>'; return; }
+    body.innerHTML = '<div style="font-size:12px;color:var(--text2);margin-bottom:10px;"><strong>'+d.length+'</strong> logs across '+[...new Set(d.map(l=>l._appName||l.appName))].length+' services</div>'
+      + d.map(l => {
+          const ts  = l.ts?l.ts.replace('T',' ').slice(0,19):'';
+          const svc = l._appName||l.appName||'';
+          const msg = l.message||l.msg||JSON.stringify(l);
+          const lv  = (l.level||'INFO').toLowerCase();
+          return '<div class="log-line level-'+lv+'" style="margin-bottom:2px;" onclick="toggleLine(this)">'
+            +'<span class="log-ts">'+ts+'</span>'
+            +(svc?'<span style="font-size:10px;color:var(--accent-l);font-family:monospace;padding:0 5px;background:var(--accent-dim);border-radius:3px;white-space:nowrap;">'+escHtml(svc)+'</span>':'')
+            +'<span class="log-body" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">'+escHtml(msg.slice(0,150))+'</span>'
+            +'<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="expand-icon" style="flex-shrink:0;color:var(--text3);transition:transform .15s;"><polyline points="6,9 12,15 18,9"/></svg></div>'
+            +'<div class="log-expanded" style="display:none"><pre class="log-json">'+escHtml(JSON.stringify(l,null,2))+'</pre></div>';
+        }).join('');
+  } catch(e) { body.innerHTML='<div style="color:var(--red);padding:20px">Error: '+e.message+'</div>'; }
+}
+
+// Clusters (only for single date mode)
+async function viewClusters() {
+  const svc  = '<%= selected.service %>';
+  const date = '<%= selected.date %>';
+  if (!svc || !date) { toast('Service and date required for clustering', 'error'); return; }
+  openModal('cluster-modal');
+  const body = document.getElementById('cluster-body');
+  body.innerHTML = '<div style="text-align:center;padding:30px;color:var(--text3)">Clustering errors…</div>';
+  try {
+    const r = await fetch('/api/logs/clusters/'+encodeURIComponent(svc)+'/'+date);
+    if (!r.ok) throw new Error('HTTP '+r.status);
+    const d = await r.json();
+    if (!d.length) { body.innerHTML='<div style="text-align:center;padding:20px;color:var(--text3)">No error clusters found</div>'; return; }
+    body.innerHTML = '<table style="width:100%;font-size:12px;border-collapse:collapse;">'
+      +'<thead><tr style="border-bottom:1px solid var(--border)"><th style="padding:6px 8px;text-align:left;color:var(--text3);font-size:10px;text-transform:uppercase">Pattern</th><th style="padding:6px 8px;text-align:right;color:var(--text3);font-size:10px;text-transform:uppercase">Count</th></tr></thead><tbody>'
+      + d.slice(0,30).map(c =>
+          '<tr style="border-bottom:1px solid var(--border)">'
+          +'<td style="padding:7px 8px;font-family:monospace;color:var(--text2);font-size:11px;">'+escHtml(c.pattern.slice(0,120))+'</td>'
+          +'<td style="padding:7px 8px;text-align:right;color:var(--red);font-weight:600;">'+c.count+'</td>'
+          +'</tr>'
+        ).join('')
+      + '</tbody></table>';
+  } catch(e) { body.innerHTML='<div style="color:var(--red);padding:20px">Error: '+e.message+'</div>'; }
+}
+
+// Bookmarks
+async function bookmarkLine(idx, level, encodedMsg) {
+  const svc = '<%= selected.service %>';
+  const dt  = '<%= selected.date %>';
+  if (!svc||!dt) { toast('Select a service and date first','error'); return; }
+  try {
+    const r = await fetch('/api/bookmarks', { method:'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({service:svc, date:dt, lineIndex:idx, line:decodeURIComponent(encodedMsg)}) });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error||'Bookmark failed','error'); return; }
+    toast('Bookmarked ⭐','success');
+  } catch(e) { toast('Network error','error'); }
+}
+
+// Saved searches
+async function loadSavedSearches() {
+  try {
+    const r = await fetch('/api/saved-searches');
+    if (!r.ok) throw new Error();
+    const d = await r.json();
+    const bar = document.getElementById('ss-chips-bar');
+    if (!d.length) { bar.innerHTML=''; return; }
+    bar.innerHTML = d.map(s =>
+      '<div class="ss-chip" onclick=\'applySavedSearch('+JSON.stringify(encodeURIComponent(JSON.stringify(s)))+')\'>'
+      +'<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>'
+      +escHtml(s.name)
+      +'<span class="del" onclick="event.stopPropagation();deleteSavedSearch(\''+s.id+'\',this)">✕</span>'
+      +'</div>'
+    ).join('');
+  } catch {}
+}
+
+function applySavedSearch(encoded) {
+  const s = JSON.parse(decodeURIComponent(encoded));
+  const p = new URLSearchParams();
+  if(s.service) p.set('service', s.service);
+  if(s.date)    p.set('date',    s.date);
+  if(s.level)   p.set('level',  s.level);
+  if(s.q)       p.set('q',      s.q);
+  if(s.fromDate)p.set('fromDate',s.fromDate);
+  if(s.toDate)  p.set('toDate',  s.toDate);
+  if(s.fromTime)p.set('fromTime',s.fromTime);
+  if(s.toTime)  p.set('toTime',  s.toTime);
+  location.href = '/logs?' + p.toString();
+}
+
+async function deleteSavedSearch(id, el) {
+  try {
+    const r = await fetch('/api/saved-searches/'+id, {method:'DELETE'});
+    if (r.ok) { 
+      const chip = el.closest('.ss-chip'); 
+      if(chip) chip.remove(); 
+      toast('Deleted','success');
+    } else {
+      toast('Delete failed','error');
+    }
+  } catch(e) { toast('Network error','error'); }
+}
+
+function saveSearch() {
+  const svc  = '<%= selected.service %>';
+  const date = '<%= selected.date %>';
+  const fromDate = '<%= selected.fromDate %>';
+  const toDate = '<%= selected.toDate %>';
+  let preview = [];
+  if(svc) preview.push('Service: '+svc);
+  if(date) preview.push('Date: '+date);
+  if(fromDate && toDate) preview.push('Range: '+fromDate+' → '+toDate);
+  if('<%= selected.level %>') preview.push('Level: <%= selected.level %>');
+  if('<%= selected.q %>') preview.push('Query: <%= selected.q %>');
+  document.getElementById('ss-preview').innerText = preview.join(' · ') || '(no filters)';
+  document.getElementById('ss-name').value = '';
+  openModal('save-search-modal');
+}
+
+async function doSaveSearch() {
+  const name = document.getElementById('ss-name').value.trim();
+  if (!name) { toast('Enter a name','error'); return; }
+  const body = {
+    name,
+    service:  '<%= selected.service %>',
+    date:     '<%= selected.date %>',
+    level:    '<%= selected.level %>',
+    q:        <%- JSON.stringify(selected.q || "") %>,
+    fromDate: '<%= selected.fromDate %>',
+    toDate:   '<%= selected.toDate %>',
+    fromTime: '<%= selected.fromTime %>',
+    toTime:   '<%= selected.toTime %>',
+  };
+  try {
+    const r = await fetch('/api/saved-searches', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error||'Save failed','error'); return; }
+    toast('Search saved!','success');
+    closeModal('save-search-modal');
+    loadSavedSearches();
+  } catch(e) { toast('Network error','error'); }
+}
+
+// Modal helpers
+function openModal(id)  { document.getElementById(id).classList.add('open'); }
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+
+// Close modals when clicking overlay
+document.querySelectorAll('.modal-lg').forEach(m => m.addEventListener('click', e => { if(e.target===m) m.classList.remove('open'); }));
+document.addEventListener('keydown', e => {
+  if (e.key==='Escape') document.querySelectorAll('.modal-lg.open').forEach(m=>m.classList.remove('open'));
+  if ((e.ctrlKey||e.metaKey) && e.key==='f') { e.preventDefault(); document.getElementById('q-input').focus(); }
+});
+
+function escHtml(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+function toast(msg, type='info') {
+  const div = document.createElement('div');
+  div.className = `toast toast-${type}`;
+  div.textContent = msg;
+  document.body.appendChild(div);
+  setTimeout(() => div.remove(), 3000);
+}
+
+// Initialisation
+document.addEventListener('DOMContentLoaded', () => {
+  // Set up event listeners for time dropdowns
+  const fromHour = document.getElementById('fromHour');
+  const fromMin = document.getElementById('fromMinute');
+  const toHour = document.getElementById('toHour');
+  const toMin = document.getElementById('toMinute');
+  if (fromHour && fromMin && toHour && toMin) {
+    fromHour.addEventListener('change', updateHiddenTimes);
+    fromMin.addEventListener('change', updateHiddenTimes);
+    toHour.addEventListener('change', updateHiddenTimes);
+    toMin.addEventListener('change', updateHiddenTimes);
+    updateHiddenTimes();
+  }
+
+  // Regex initialisation
+  if ('<%= selected.regex %>' === '1') {
+    const regexToggle = document.getElementById('regex-toggle');
+    if (regexToggle) {
+      regexToggle.checked = true;
+      toggleRegex({checked:true});
+    }
+  }
+
+  // Timezone offset on form submit
+  const searchForm = document.getElementById('search-form');
+  if (searchForm) {
+    searchForm.addEventListener('submit', () => {
+      document.getElementById('tz-offset').value = new Date().getTimezoneOffset();
+    });
+  }
+
+  // Load saved searches
+  loadSavedSearches();
+});
+</script>
+</body>
+</html>