@logboard/cli 1.0.0

package/views/live.ejs

@@ -0,0 +1,299 @@
+<%- include('partials/head', { title: 'Live Stream' }) %>
+<style>
+  .live-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
+  .conn-indicator { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
+  #stream-box { flex:1; overflow-y:auto; padding:8px 4px; font-family:'JetBrains Mono',monospace; font-size:12px; }
+  .stream-line { display:flex; align-items:flex-start; gap:8px; padding:5px 10px; border-radius:4px; cursor:pointer; transition:background .1s; border-left:3px solid transparent; }
+  .stream-line:hover { background:var(--surface2); }
+  .stream-line.level-error { border-left-color:var(--red);    background:rgba(239,68,68,.04); }
+  .stream-line.level-warn  { border-left-color:var(--yellow); background:rgba(245,158,11,.04); }
+  .stream-line.level-info  { border-left-color:var(--blue); }
+  .stream-line.level-debug { border-left-color:var(--gray); opacity:.7; }
+  .stream-ts  { color:var(--text3); white-space:nowrap; font-size:11px; padding-top:2px; min-width:155px; }
+  .stream-svc { color:var(--accent-l); white-space:nowrap; font-size:11px; min-width:80px; max-width:100px; overflow:hidden; text-overflow:ellipsis; padding-top:2px; }
+  .stream-msg { flex:1; word-break:break-all; color:var(--text); }
+  .stream-exp { display:none; padding:6px 10px 8px; background:var(--surface3); border-radius:4px; margin:0 10px 4px; }
+  .stream-exp pre { font-size:11px; white-space:pre-wrap; word-break:break-all; color:var(--text); }
+  #count-badge { background:var(--accent-dim); color:var(--accent-l); padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
+  #err-badge   { background:rgba(239,68,68,.15); color:var(--red); padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
+  /* Level icon in stream lines */
+  .slvl-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:3px; flex-shrink:0; margin-top:1px; }
+  .slvl-icon.error { background:rgba(239,68,68,.15); }
+  .slvl-icon.warn  { background:rgba(245,158,11,.15); }
+  .slvl-icon.info  { background:rgba(59,130,246,.15); }
+  .slvl-icon.debug { background:rgba(107,114,128,.15); }
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Live Stream</div>
+      <div class="header-actions">
+        <div class="conn-indicator">
+          <span class="dot dot-gray dot-pulse" id="conn-dot"></span>
+          <span id="conn-label">Connecting…</span>
+        </div>
+        <span id="count-badge">0 logs</span>
+        <span id="err-badge" style="display:none">0 errors</span>
+      </div>
+    </header>
+
+    <!-- Toolbar -->
+    <div class="live-toolbar">
+      <!-- Level chips -->
+      <div class="chip-bar" style="margin-bottom:0;flex-wrap:nowrap;">
+        <span style="font-size:11px;color:var(--text3);white-space:nowrap;">Filter:</span>
+        <span class="chip active" id="chip-all"   onclick="setLevel('')">All</span>
+        <span class="chip error"  id="chip-error" onclick="setLevel('error')">
+          <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
+        </span>
+        <span class="chip warn"   id="chip-warn"  onclick="setLevel('warn')">
+          <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"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+          Warn
+        </span>
+        <span class="chip info"   id="chip-info"  onclick="setLevel('info')">
+          <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
+        </span>
+        <span class="chip debug"  id="chip-debug" onclick="setLevel('debug')">
+          <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
+        </span>
+      </div>
+
+      <div style="flex:1"></div>
+
+      <!-- Service filter -->
+      <select id="svc-filter" class="form-select" style="width:160px;" onchange="applyFilters()">
+        <option value="">All Services</option>
+        <% services.forEach(function(s) { %>
+        <option value="<%= s.appName %>"><%= s.appName %></option>
+        <% }) %>
+      </select>
+
+      <!-- Keyword search -->
+      <div class="search-wrap" style="width:200px;">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input id="kw-filter" type="text" class="form-input search-input" placeholder="Keyword filter…" oninput="applyFilters()"/>
+      </div>
+
+      <button id="scroll-btn" class="btn btn-secondary btn-sm" onclick="toggleScroll()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23,18 13.5,8.5 8.5,13.5 1,6"/><polyline points="17,18 23,18 23,12"/></svg>
+        Auto-scroll ON
+      </button>
+      <button id="pause-btn" class="btn btn-secondary btn-sm" onclick="togglePause()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+        Pause
+      </button>
+      <button class="btn btn-secondary btn-sm" onclick="clearStream()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v2"/></svg>
+        Clear
+      </button>
+    </div>
+
+    <!-- Stream box -->
+    <div id="stream-box">
+      <div class="empty-state" id="empty-hint">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49"/><path d="M7.76 7.76a6 6 0 0 0 0 8.49"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
+        <p>Waiting for live logs…</p>
+        <p style="font-size:11px;margin-top:4px;">Send logs via the ingest API to see them here in real time</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+const MAX_LINES  = 1000;
+let paused       = false;
+let autoScroll   = true;
+let levelFilter  = '';
+let svcFilter    = '';
+let kwFilter     = '';
+let totalCount   = 0;
+let errCount     = 0;
+const pendingBuf = [];
+
+const box      = document.getElementById('stream-box');
+const connDot  = document.getElementById('conn-dot');
+const connLbl  = document.getElementById('conn-label');
+const countEl  = document.getElementById('count-badge');
+const errEl    = document.getElementById('err-badge');
+
+const LEVEL_ICONS = {
+  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>`,
+  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"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+  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>`,
+  debug: `<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>`,
+};
+
+// ── SSE ────────────────────────────────────────────────────────────────────
+let es;
+function connect() {
+  es = new EventSource('/api/logs/stream', { withCredentials: true });
+  es.onopen = () => { setConn('green','Live'); };
+  es.addEventListener('connected', () => setConn('green','Connected'));
+  es.onmessage = (e) => {
+    if (paused) { pendingBuf.push(e.data); if (pendingBuf.length > 500) pendingBuf.shift(); return; }
+    addLine(e.data);
+  };
+  es.onerror = () => {
+    setConn('red','Reconnecting…');
+    es.close();
+    setTimeout(connect, 3000);
+  };
+}
+
+function setConn(color, label) {
+  connDot.className = 'dot dot-' + color + (color === 'green' ? ' dot-pulse' : '');
+  connLbl.textContent = label;
+}
+
+connect();
+
+// ── Add line ───────────────────────────────────────────────────────────────
+function addLine(raw) {
+  const hint = document.getElementById('empty-hint');
+  if (hint) hint.remove();
+
+  let parsed = null, level = 'info', ts = '', svc = '', msg = '';
+  try {
+    parsed = JSON.parse(raw);
+    level  = (parsed.level || 'info').toLowerCase();
+    ts     = parsed.ts ? parsed.ts.replace('T',' ').slice(0,19) : new Date().toISOString().replace('T',' ').slice(0,19);
+    svc    = parsed.appName || '';
+    msg    = parsed.message || parsed.msg || raw;
+  } catch { msg = raw; }
+
+  totalCount++;
+  if (level === 'error') { errCount++; errEl.style.display=''; errEl.textContent = errCount + ' errors'; }
+  countEl.textContent = totalCount.toLocaleString() + ' logs';
+
+  const wrap = document.createElement('div');
+  wrap.className = 'stream-pair';
+
+  const div = document.createElement('div');
+  div.className = `stream-line level-${level}`;
+  div.dataset.raw   = raw;
+  div.dataset.level = level;
+  div.dataset.svc   = svc.toLowerCase();
+
+  div.innerHTML =
+    `<span class="slvl-icon ${level}">${LEVEL_ICONS[level]||LEVEL_ICONS.debug}</span>` +
+    `<span class="stream-ts">${ts}</span>` +
+    (svc ? `<span class="stream-svc">${escHtml(svc)}</span>` : '') +
+    `<span class="stream-msg">${escHtml(String(msg).replace(/\n/g,"↵ ").replace(/\r/g,"").replace(/\t/g,"  "))}</span>`;
+
+  const expDiv = document.createElement('div');
+  expDiv.className = 'stream-exp';
+  expDiv.innerHTML = `<pre>${escHtml(parsed ? JSON.stringify(parsed, null, 2) : raw)}</pre>`;
+
+  div.onclick = () => {
+    const open = expDiv.style.display === '';
+    expDiv.style.display = open ? 'none' : '';
+  };
+
+  wrap.appendChild(div);
+  wrap.appendChild(expDiv);
+  wrap.style.display = shouldShow(level, svc.toLowerCase(), raw) ? '' : 'none';
+  box.appendChild(wrap);
+
+  // Trim old
+  while (box.children.length > MAX_LINES * 2) box.removeChild(box.firstChild);
+  if (autoScroll) box.scrollTop = box.scrollHeight;
+}
+
+// ── Filters ────────────────────────────────────────────────────────────────
+function shouldShow(level, svc, raw) {
+  if (levelFilter && level !== levelFilter) return false;
+  if (svcFilter   && svc !== svcFilter.toLowerCase()) return false;
+  // keyword: dimming handled in applyFilters, not hide
+  return true;
+}
+
+function applyFilters() {
+  kwFilter  = document.getElementById('kw-filter').value.trim().toLowerCase();
+  svcFilter = document.getElementById('svc-filter').value;
+  box.querySelectorAll('.stream-pair').forEach(wrap => {
+    const line = wrap.querySelector('.stream-line');
+    if (!line) return;
+    const lv  = line.dataset.level || 'info';
+    const sv  = line.dataset.svc   || '';
+    const raw = line.dataset.raw   || '';
+    const matchLevel = !levelFilter || lv === levelFilter;
+    const matchSvc   = !svcFilter   || sv === svcFilter.toLowerCase();
+    const matchKw    = !kwFilter    || raw.toLowerCase().includes(kwFilter);
+    // Hide if level/svc don't match; dim if keyword doesn't match
+    if (!matchLevel || !matchSvc) { wrap.style.display = 'none'; return; }
+    wrap.style.display = '';
+    wrap.style.opacity = (!kwFilter || matchKw) ? '1' : '0.25';
+    // Highlight matching text in message
+    const msgEl = line.querySelector('.stream-msg');
+    if (msgEl) {
+      const orig = msgEl.dataset.orig || msgEl.textContent;
+      msgEl.dataset.orig = orig;
+      if (kwFilter && matchKw) {
+        const re = new RegExp('(' + kwFilter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
+        msgEl.innerHTML = orig.replace(re, '<mark style="background:rgba(245,158,11,.4);border-radius:2px;padding:0 1px;">$1</mark>');
+      } else {
+        msgEl.textContent = orig;
+      }
+    }
+  });
+}
+
+function setLevel(lvl) {
+  levelFilter = lvl;
+  // Update chip states
+  ['all','error','warn','info','debug'].forEach(k => {
+    const chip = document.getElementById('chip-' + k);
+    if (!chip) return;
+    const isActive = (k === (lvl || 'all'));
+    chip.classList.toggle('active', isActive);
+  });
+  applyFilters();
+}
+
+// ── Controls ───────────────────────────────────────────────────────────────
+function togglePause() {
+  paused = !paused;
+  const btn = document.getElementById('pause-btn');
+  if (paused) {
+    btn.innerHTML = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5,3 19,12 5,21 5,3"/></svg> Resume`;
+    btn.style.borderColor = 'var(--yellow)';
+    btn.style.color = 'var(--yellow)';
+  } else {
+    btn.innerHTML = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause`;
+    btn.style.borderColor = '';
+    btn.style.color = '';
+    pendingBuf.forEach(addLine);
+    pendingBuf.length = 0;
+  }
+}
+
+function toggleScroll() {
+  autoScroll = !autoScroll;
+  const btn = document.getElementById('scroll-btn');
+  const icon = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23,18 13.5,8.5 8.5,13.5 1,6"/><polyline points="17,18 23,18 23,12"/></svg>`;
+  btn.innerHTML = icon + (autoScroll ? ' Auto-scroll ON' : ' Auto-scroll OFF');
+  btn.style.color = autoScroll ? '' : 'var(--text3)';
+}
+
+function clearStream() {
+  box.innerHTML = `<div class="empty-state" id="empty-hint"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49"/><path d="M7.76 7.76a6 6 0 0 0 0 8.49"/></svg><p>Stream cleared</p></div>`;
+  totalCount = errCount = 0;
+  countEl.textContent = '0 logs';
+  errEl.style.display = 'none';
+}
+
+function escHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', e => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); clearStream(); }
+  if (e.key === ' ' && e.target === document.body) { e.preventDefault(); togglePause(); }
+});
+</script>
+</body></html>

package/views/login.ejs

@@ -0,0 +1,64 @@
+<%- include('partials/head', { title: 'Login' }) %>
+<div class="login-bg">
+  <div class="login-card">
+    <div class="login-logo">
+      <img src="/public/logo.png" alt="LogBoard"/>
+      <span>LogBoard</span>
+    </div>
+    <% if (error) { %><div class="login-error"><%= error %></div><% } %>
+    <div id="login-error" class="login-error" style="display:none;"></div>
+    <div class="form-group">
+      <label class="form-label">Username</label>
+      <input type="text" id="un" class="form-input" placeholder="admin" autocomplete="username" autofocus/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Password</label>
+      <input type="password" id="pw" class="form-input" placeholder="••••••••" autocomplete="current-password"/>
+    </div>
+    <div class="form-group" id="totp-group" style="display:none;">
+      <label class="form-label">2FA Code</label>
+      <input type="text" id="totp" class="form-input" placeholder="000000" maxlength="6" style="font-family:'JetBrains Mono',monospace;letter-spacing:4px;text-align:center;"/>
+    </div>
+    <button class="btn btn-primary w-full" id="login-btn" onclick="doLogin()" style="width:100%;justify-content:center;padding:10px;">
+      Sign In
+    </button>
+    <div style="margin-top:20px;padding:12px;background:var(--surface2);border-radius:var(--radius);font-size:11px;color:var(--text3);line-height:1.7;">
+      Default: <code style="color:var(--accent-l)">admin / admin123</code><br>
+      Run <code style="color:var(--accent-l)">npm run setup</code> to initialise.
+    </div>
+  </div>
+</div>
+<script>
+async function doLogin(){
+  const errEl=document.getElementById('login-error');
+  const btn=document.getElementById('login-btn');
+  errEl.style.display='none';
+  btn.disabled=true; btn.textContent='Signing in…';
+  try{
+    const r=await fetch('/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:document.getElementById('un').value,password:document.getElementById('pw').value,token:document.getElementById('totp').value||undefined})});
+    const d=await r.json();
+    if(!r.ok){
+      if(d.error==='2FA token required'){document.getElementById('totp-group').style.display='';document.getElementById('totp').focus();btn.disabled=false;btn.textContent='Sign In';return;}
+      errEl.textContent=d.error||'Login failed'; errEl.style.display=''; btn.disabled=false; btn.textContent='Sign In'; return;
+    }
+    location.href = d.redirect || '/dashboard';
+  }catch(e){errEl.textContent='Network error';errEl.style.display='';btn.disabled=false;btn.textContent='Sign In';}
+}
+document.addEventListener('keydown',e=>{if(e.key==='Enter')doLogin();});
+// Add register link
+(function(){
+  const card = document.querySelector('.login-card,.card');
+  if(card){
+    const p = document.createElement('p');
+    p.className = 'login-register-link';
+    p.innerHTML = "Don't have an account? <a href='/register'>Create an organisation →</a>";
+    card.appendChild(p);
+  }
+})();
+</script>
+<style>
+.login-register-link{text-align:center;margin-top:18px;font-size:13px;color:var(--text3);}
+.login-register-link a{color:var(--accent-l);font-weight:500;text-decoration:none;}
+.login-register-link a:hover{text-decoration:underline;}
+</style>
+</body></html>