Sync from GitHub via hub-sync

web/css/app.css

@@ -1,4 +1,506 @@
-:root{
-  --bg:#f8f9fa;--surface:#ffffff;--line:#dfe4e1;--muted:#4e616a;--muted2:#6b7680;--primary:#012d1d;--primary2:#06452e;--soft:#ecf8f1;--soft2:#f3f6f5;--danger:#ba1a1a;--orange:#f59e0b;--blue:#3b82f6;--purple:#a855f7;
+:root {
+  --bg: #f8f9fa;
+  --surface: #ffffff;
+  --line: #dfe4e1;
+  --muted: #4e616a;
+  --muted2: #6b7680;
+  --primary: #012d1d;
+  --primary2: #06452e;
+  --soft: #ecf8f1;
+  --soft2: #f3f6f5;
+  --danger: #ba1a1a;
+  --orange: #f59e0b;
+  --blue: #3b82f6;
+  --purple: #a855f7;
 }
-*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#17201c;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.mono,.label{font-family:"Space Grotesk",Inter,sans-serif}.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 420,'GRAD' 0,'opsz' 24}.topbar{height:64px;background:#fff;border-bottom:1px solid #e7ece9;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50}.brand{font-weight:800;color:var(--primary);font-size:20px;letter-spacing:-.02em}.nav{display:flex;gap:20px;align-items:center}.nav a{color:#64736c;text-decoration:none;font-weight:650;font-size:14px;padding:22px 0 18px;border-bottom:2px solid transparent}.nav a.active,.nav a:hover{color:var(--primary);border-color:var(--primary)}.avatar{width:34px;height:34px;border-radius:999px;border:2px solid #d9e2dd;background:linear-gradient(135deg,#d8efe1,#f0f5f2);display:grid;place-items:center;color:var(--primary);font-weight:800}.shell{max-width:1440px;margin:0 auto;padding:32px}.grid{display:grid;gap:24px}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px rgba(1,45,29,.035)}.card.pad{padding:22px}.label{text-transform:uppercase;font-size:12px;letter-spacing:.08em;font-weight:800;color:var(--muted)}.stat{font-family:"Space Grotesk";font-size:44px;line-height:1;color:var(--primary);font-weight:700}.sub{color:var(--muted2);font-size:14px}.good{color:#057347}.muted{color:var(--muted2)}.main-grid{grid-template-columns:7fr 3fr}.live-frame{position:relative;overflow:hidden;background:#07110d;border-radius:12px}.live-frame img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.live-badge{position:absolute;top:16px;left:16px}.dot{width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block}.pulse{animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.35}}.side-list{padding:22px}.det-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.det-left{display:flex;align-items:center;gap:12px}.det-dot{width:8px;height:8px;border-radius:50%;background:#10b981}.det-count{font-family:"Space Grotesk";font-size:24px;font-weight:700}.chart{height:260px;display:flex;align-items:end;gap:8px;padding:24px 18px 8px;background-image:radial-gradient(#dfe4e1 1px,transparent 1px);background-size:24px 24px}.bar{flex:1;background:#b8efd2;border-radius:4px 4px 0 0;min-height:4px;transition:.2s}.bar.hot{background:#059669}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.toolbar{display:flex;gap:10px;align-items:center}.input{border:1px solid #d8e0db;background:#fff;border-radius:10px;padding:12px 14px;font:inherit;outline:none}.input:focus{border-color:#0a6b45;box-shadow:0 0 0 3px rgba(5,115,71,.08)}.btn{border:1px solid #cfd8d3;border-radius:10px;background:#fff;color:#24352e;padding:10px 14px;font-weight:750;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center}.btn:hover{background:#f2f7f4}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.danger{border-color:#f0b7b7;color:#a40000}.table{width:100%;border-collapse:collapse}.table th{text-align:left;background:#f1f4f3;color:#51625b;font-family:"Space Grotesk";font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:14px 18px}.table td{padding:16px 18px;border-top:1px solid #ecf0ee;vertical-align:middle}.thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#e8efeb;border:1px solid #dce5e0}.thumb.sm{width:52px;height:52px}.log-row{cursor:pointer}.log-row:hover{background:#f6fbf8}.confbar{width:90px;height:7px;background:#dfe8e3;border-radius:99px;overflow:hidden}.confbar span{display:block;height:100%;background:#057347}.pager{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f3f6f5;border-top:1px solid #dfe4e1}.detail-grid{grid-template-columns:2fr 1fr}.hero-img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#07110d;border-radius:12px}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric{display:flex;gap:14px;align-items:center;padding:18px}.iconbox{width:48px;height:48px;border-radius:999px;background:#eaf8f0;display:grid;place-items:center;color:#057347}.break-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid #edf1ef}.dropzone{border:1px dashed #aab8b0;background:#fbfdfc;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}.notice{background:#fff8e8;border:1px solid #f5d08a;color:#7a4d00;border-radius:10px;padding:12px 14px;font-size:13px}.loading{opacity:.6;pointer-events:none}.hide{display:none!important}.empty{padding:28px;text-align:center;color:#6d7a74}.mobile-only{display:none}@media(max-width:900px){.nav{display:none}.shell{padding:18px 14px 86px}.stats,.main-grid,.detail-grid,.metric-grid{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}.topbar{padding:0 16px}.table{min-width:760px}.mobile-only{display:block}.desktop-only{display:none}}
+
+* {
+  box-sizing: border-box
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: #17201c;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
+}
+
+.mono,
+.label {
+  font-family: "Space Grotesk", Inter, sans-serif
+}
+
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 420, 'GRAD' 0, 'opsz' 24
+}
+
+.topbar {
+  height: 64px;
+  background: #fff;
+  border-bottom: 1px solid #e7ece9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+  position: sticky;
+  top: 0;
+  z-index: 50
+}
+
+.brand {
+  font-weight: 800;
+  color: var(--primary);
+  font-size: 20px;
+  letter-spacing: -.02em
+}
+
+.nav {
+  display: flex;
+  gap: 20px;
+  align-items: center
+}
+
+.nav a {
+  color: #64736c;
+  text-decoration: none;
+  font-weight: 650;
+  font-size: 14px;
+  padding: 22px 0 18px;
+  border-bottom: 2px solid transparent
+}
+
+.nav a.active,
+.nav a:hover {
+  color: var(--primary);
+  border-color: var(--primary)
+}
+
+.avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 2px solid #d9e2dd;
+  background: linear-gradient(135deg, #d8efe1, #f0f5f2);
+  display: grid;
+  place-items: center;
+  color: var(--primary);
+  font-weight: 800
+}
+
+.shell {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 32px
+}
+
+.grid {
+  display: grid;
+  gap: 24px
+}
+
+.stats {
+  grid-template-columns: repeat(3, minmax(0, 1fr))
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: 0 2px 6px rgba(1, 45, 29, .035)
+}
+
+.card.pad {
+  padding: 22px
+}
+
+.label {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: .08em;
+  font-weight: 800;
+  color: var(--muted)
+}
+
+.stat {
+  font-family: "Space Grotesk";
+  font-size: 44px;
+  line-height: 1;
+  color: var(--primary);
+  font-weight: 700
+}
+
+.sub {
+  color: var(--muted2);
+  font-size: 14px
+}
+
+.good {
+  color: #057347
+}
+
+.muted {
+  color: var(--muted2)
+}
+
+.main-grid {
+  grid-template-columns: 7fr 3fr
+}
+
+.live-frame {
+  position: relative;
+  overflow: hidden;
+  background: #07110d;
+  border-radius: 12px
+}
+
+.live-frame img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(0, 0, 0, .55);
+  backdrop-filter: blur(8px);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, .15);
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: .04em
+}
+
+.live-badge {
+  position: absolute;
+  top: 16px;
+  left: 16px
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ef4444;
+  display: inline-block
+}
+
+.pulse {
+  animation: pulse 1.5s infinite
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .35
+  }
+}
+
+.side-list {
+  padding: 22px
+}
+
+.det-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 0
+}
+
+.det-left {
+  display: flex;
+  align-items: center;
+  gap: 12px
+}
+
+.det-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981
+}
+
+.det-count {
+  font-family: "Space Grotesk";
+  font-size: 24px;
+  font-weight: 700
+}
+
+.chart {
+  height: 260px;
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  padding: 24px 18px 8px;
+  background-image: radial-gradient(#dfe4e1 1px, transparent 1px);
+  background-size: 24px 24px
+}
+
+.bar {
+  flex: 1;
+  background: #b8efd2;
+  border-radius: 4px 4px 0 0;
+  min-height: 4px;
+  transition: .2s
+}
+
+.bar.hot {
+  background: #059669
+}
+
+.section-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  margin-bottom: 16px
+}
+
+.toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center
+}
+
+.input {
+  border: 1px solid #d8e0db;
+  background: #fff;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font: inherit;
+  outline: none
+}
+
+.input:focus {
+  border-color: #0a6b45;
+  box-shadow: 0 0 0 3px rgba(5, 115, 71, .08)
+}
+
+.btn {
+  border: 1px solid #cfd8d3;
+  border-radius: 10px;
+  background: #fff;
+  color: #24352e;
+  padding: 10px 14px;
+  font-weight: 750;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center
+}
+
+.btn:hover {
+  background: #f2f7f4
+}
+
+.btn.primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary)
+}
+
+.btn.danger {
+  border-color: #f0b7b7;
+  color: #a40000
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse
+}
+
+.table th {
+  text-align: left;
+  background: #f1f4f3;
+  color: #51625b;
+  font-family: "Space Grotesk";
+  font-size: 12px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  padding: 14px 18px
+}
+
+.table td {
+  padding: 16px 18px;
+  border-top: 1px solid #ecf0ee;
+  vertical-align: middle
+}
+
+.thumb {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: #e8efeb;
+  border: 1px solid #dce5e0
+}
+
+.thumb.sm {
+  width: 52px;
+  height: 52px
+}
+
+.log-row {
+  cursor: pointer
+}
+
+.log-row:hover {
+  background: #f6fbf8
+}
+
+.confbar {
+  width: 90px;
+  height: 7px;
+  background: #dfe8e3;
+  border-radius: 99px;
+  overflow: hidden
+}
+
+.confbar span {
+  display: block;
+  height: 100%;
+  background: #057347
+}
+
+.pager {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #f3f6f5;
+  border-top: 1px solid #dfe4e1
+}
+
+.detail-grid {
+  grid-template-columns: 2fr 1fr
+}
+
+.hero-img {
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: contain;
+  background: #07110d;
+  border-radius: 12px
+}
+
+.metric-grid {
+  grid-template-columns: repeat(2, 1fr)
+}
+
+.metric {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding: 18px
+}
+
+.iconbox {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: #eaf8f0;
+  display: grid;
+  place-items: center;
+  color: #057347
+}
+
+.break-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-top: 1px solid #edf1ef
+}
+
+.dropzone {
+  border: 1px dashed #aab8b0;
+  background: #fbfdfc;
+  border-radius: 14px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px
+}
+
+.notice {
+  background: #fff8e8;
+  border: 1px solid #f5d08a;
+  color: #7a4d00;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-size: 13px
+}
+
+.loading {
+  opacity: .6;
+  pointer-events: none
+}
+
+.hide {
+  display: none !important
+}
+
+.empty {
+  padding: 28px;
+  text-align: center;
+  color: #6d7a74
+}
+
+.mobile-only {
+  display: none
+}
+
+@media(max-width:900px) {
+  .nav {
+    display: none
+  }
+
+  .shell {
+    padding: 18px 14px 86px
+  }
+
+  .stats,
+  .main-grid,
+  .detail-grid,
+  .metric-grid {
+    grid-template-columns: 1fr
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch
+  }
+
+  .topbar {
+    padding: 0 16px
+  }
+
+  .table {
+    min-width: 760px
+  }
+
+  .mobile-only {
+    display: block
+  }
+
+  .desktop-only {
+    display: none
+  }
+}
+
+.identification-cell {
+  max-width: 340px;
+}
+
+.type-name {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

web/js/api.js

@@ -13,57 +13,102 @@ const API = {
   }
 };
 
-function fmtNum(n){ 
-  return Number(n || 0).toLocaleString(); 
+function fmtNum(n){
+  return Number(n || 0).toLocaleString();
 }
 
-function pad2(n){ 
-  return String(n || 0).padStart(2,'0'); 
+function pad2(n){
+  return String(n || 0).padStart(2, '0');
 }
 
-function fmtDate(ms, fallback=''){
+function fmtDate(ms, fallback = ''){
   if(!ms) return fallback || '-';
+
   const d = new Date(Number(ms));
+
   return d.toLocaleString([], {
-    year:'numeric',
-    month:'short',
-    day:'2-digit',
-    hour:'2-digit',
-    minute:'2-digit'
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
   });
 }
 
-function fmtTime(ms){ 
-  if(!ms) return '-'; 
+function fmtTime(ms){
+  if(!ms) return '-';
+
   return new Date(Number(ms)).toLocaleTimeString([], {
-    hour:'2-digit',
-    minute:'2-digit'
-  }); 
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+function isUnknownType(type){
+  return String(type || '').trim().toLowerCase() === 'unknown_pest';
+}
+
+function knownTypesFromData(item){
+  const data = item?.data || [];
+
+  return data
+    .filter(row => !isUnknownType(row.type))
+    .sort((a, b) => Number(b.count || 0) - Number(a.count || 0))
+    .map(row => row.type)
+    .filter(Boolean);
 }
 
 function primaryType(item){
   const data = item?.data || [];
+
   if(!data.length) return 'No pest';
 
-  return [...data].sort((a,b)=>(b.count||0)-(a.count||0))[0].type || 'unknown_pest';
+  const sorted = [...data].sort((a, b) => Number(b.count || 0) - Number(a.count || 0));
+  const top = sorted[0];
+
+  if(!top) return 'No pest';
+
+  const knownTypes = knownTypesFromData(item);
+
+  // Main rule:
+  // If unknown_pest is the highest count, show the known pest names instead.
+  if(isUnknownType(top.type) && knownTypes.length){
+    return knownTypes.join(', ');
+  }
+
+  return top.type || 'unknown_pest';
+}
+
+function primaryTypeTitle(item){
+  const data = item?.data || [];
+
+  if(!data.length) return 'No pest';
+
+  const knownTypes = knownTypesFromData(item);
+  const sorted = [...data].sort((a, b) => Number(b.count || 0) - Number(a.count || 0));
+  const top = sorted[0];
+
+  if(top && isUnknownType(top.type) && knownTypes.length){
+    return knownTypes.join(', ');
+  }
+
+  return top?.type || 'unknown_pest';
 }
 
 function avgConfidence(item){
-  // Preferred: API compact log field
-  if (item && item.avg_confidence !== undefined && item.avg_confidence !== null) {
+  if(item && item.avg_confidence !== undefined && item.avg_confidence !== null){
     return Number(item.avg_confidence || 0);
   }
 
-  // Fallback: detail response has detections
   const dets = item?.detections || [];
 
   if(!dets.length) return 0;
 
-  return dets.reduce((s,d)=>s + Number(d.confidence || 0), 0) / dets.length;
+  return dets.reduce((s, d) => s + Number(d.confidence || 0), 0) / dets.length;
 }
 
 function topConfidence(item){
-  if (item && item.top_confidence !== undefined && item.top_confidence !== null) {
+  if(item && item.top_confidence !== undefined && item.top_confidence !== null){
     return Number(item.top_confidence || 0);
   }
 
@@ -74,12 +119,12 @@ function topConfidence(item){
   return Math.max(...dets.map(d => Number(d.confidence || 0)));
 }
 
-function confidenceText(v){ 
-  return `${Math.round(Number(v || 0) * 100)}%`; 
+function confidenceText(v){
+  return `${Math.round(Number(v || 0) * 100)}%`;
 }
 
 function imgFallback(e){
-  e.target.src='data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(`
+  e.target.src = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
     <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
       <rect width="100%" height="100%" fill="#e9efec"/>
       <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#52655d" font-family="Arial" font-size="22">No image</text>
@@ -87,24 +132,25 @@ function imgFallback(e){
   `);
 }
 
-function setText(id, value){ 
-  const el = document.getElementById(id); 
-  if(el) el.textContent = value; 
+function setText(id, value){
+  const el = document.getElementById(id);
+  if(el) el.textContent = value;
 }
 
-function setImg(id, src){ 
-  const el = document.getElementById(id); 
-  if(el){ 
-    el.src = src || ''; 
-    el.onerror = imgFallback; 
-  } 
+function setImg(id, src){
+  const el = document.getElementById(id);
+
+  if(el){
+    el.src = src || '';
+    el.onerror = imgFallback;
+  }
 }
 
-function escapeHtml(s){ 
+function escapeHtml(s){
   return String(s ?? '').replace(/[&<>"]/g, c => ({
-    '&':'&amp;',
-    '<':'&lt;',
-    '>':'&gt;',
-    '"':'&quot;'
-  }[c])); 
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;'
+  }[c]));
 }

web/js/dashboard.js

@@ -1,117 +1,179 @@
 let dashboardCache = null;
-async function loadDashboard() {
-  const dash = await API.get("/api/dashboard");
+
+async function loadDashboard(){
+  const dash = await API.get('/api/dashboard');
+
   dashboardCache = dash;
+
   const s = dash.summary || {};
   const chart = dash.chart || {};
-  setText("todayPests", fmtNum(s.today_pests));
-  setText("biodiversity", fmtNum((s.top_pests || []).length));
+
+  setText('todayPests', fmtNum(s.today_pests));
+  setText('biodiversity', fmtNum((s.top_pests || []).length));
+
   const avg = (s.last_7_days_pests || 0) / 7;
-  setText("dailyAvg", Math.round(avg));
+  setText('dailyAvg', Math.round(avg));
+
   const top = (s.top_pests || [])[0];
-  setText(
-    "topToday",
-    top ? `${fmtNum(top.count)} ${top.type} total` : "No detections yet",
-  );
-  setText("monthInfo", `${fmtNum(s.last_7_days_pests)} pests in last 7 days`);
+  setText('topToday', top ? `${fmtNum(top.count)} ${top.type} total` : 'No detections yet');
+  setText('monthInfo', `${fmtNum(s.last_7_days_pests)} pests in last 7 days`);
+
   renderLive(dash.live_camera_stream?.latest);
   renderChart(chart.hourly_today || []);
   renderRecent(dash.logs || []);
 }
-async function loadLatest() {
-  try {
-    const r = await API.get("/api/live/latest");
+
+async function loadLatest(){
+  try{
+    const r = await API.get('/api/live/latest');
     renderLive(r.latest);
-  } catch (e) {
+  }catch(e){
     console.warn(e);
   }
 }
-function renderLive(item) {
-  const list = document.getElementById("liveList");
-  if (!item) {
-    setImg("liveImage", "");
+
+function renderLive(item){
+  const list = document.getElementById('liveList');
+
+  if(!item){
+    setImg('liveImage', '');
     list.innerHTML = '<div class="empty">No live detection yet</div>';
     return;
   }
-  setImg("liveImage", item.annotated_image || item.original_image);
-  document.getElementById("openLatest").href = `/ui/logs/${item.id}`;
+
+  setImg('liveImage', item.annotated_image || item.original_image);
+
+  document.getElementById('openLatest').href = `/ui/logs/${item.id}`;
+
   const data = item.data || [];
   const total = item.total || 0;
-  setText("updateAge", fmtTime(item.timestamp_ms));
+
+  setText('updateAge', fmtTime(item.timestamp_ms));
+
   list.innerHTML = data.length
-    ? data
-        .map(
-          (d, i) =>
-            `<div class="det-row"><div class="det-left"><span class="det-dot" style="background:${["#10b981", "#f59e0b", "#3b82f6", "#a855f7", "#ef4444"][i % 5]}"></span><span>${escapeHtml(d.type)}</span></div><span class="det-count">${pad2(d.count)}</span></div>`,
-        )
-        .join("")
+    ? data.map((d, i) => `
+      <div class="det-row">
+        <div class="det-left">
+          <span
+            class="det-dot"
+            style="background:${['#10b981', '#f59e0b', '#3b82f6', '#a855f7', '#ef4444'][i % 5]}"
+          ></span>
+          <span>${escapeHtml(d.type)}</span>
+        </div>
+        <span class="det-count">${pad2(d.count)}</span>
+      </div>
+    `).join('')
     : '<div class="empty">No pest in latest frame</div>';
+
   const pct = Math.min(100, Math.round((total / 25) * 100));
-  setText("loadPct", pct + "%");
-  document.getElementById("loadBar").style.width = pct + "%";
+
+  setText('loadPct', pct + '%');
+  document.getElementById('loadBar').style.width = pct + '%';
 }
-function renderChart(rows) {
-  const el = document.getElementById("hourlyChart");
-  const max = Math.max(1, ...rows.map((r) => r.total || 0));
-  el.innerHTML = rows
-    .map(
-      (r, i) =>
-        `<div title="${r.hour}: ${r.total}" class="bar ${r.total === max ? "hot" : ""}" style="height:${Math.max(4, (r.total / max) * 92)}%"></div>`,
-    )
-    .join("");
+
+function renderChart(rows){
+  const el = document.getElementById('hourlyChart');
+  const max = Math.max(1, ...rows.map(r => r.total || 0));
+
+  el.innerHTML = rows.map(r => `
+    <div
+      title="${r.hour}: ${r.total}"
+      class="bar ${r.total === max ? 'hot' : ''}"
+      style="height:${Math.max(4, (r.total / max) * 92)}%"
+    ></div>
+  `).join('');
 }
-function renderRecent(logs) {
-  const root = document.getElementById("recentLogs");
-  setText("logCount", `Showing ${logs.length} latest entries`);
-  if (!logs.length) {
+
+function renderRecent(logs){
+  const root = document.getElementById('recentLogs');
+
+  setText('logCount', `Showing ${logs.length} latest entries`);
+
+  if(!logs.length){
     root.innerHTML = '<div class="empty">No logs found</div>';
     return;
   }
-  root.innerHTML = logs
-    .map((item) => {
-      const type = primaryType(item);
-      const conf = avgConfidence(item);
-      return `<div class="log-row" onclick="location.href='/ui/logs/${item.id}'" style="display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f3f1"><img class="thumb" src="${item.annotated_image || item.original_image || ""}" onerror="imgFallback(event)"><div style="margin-left:16px;flex:1"><b style="color:var(--primary)">${escapeHtml(type)}</b><div class="sub">Avg confidence ${confidenceText(conf)} · Total ${item.total||0}</div></div><div class="desktop-only sub" style="min-width:180px">${fmtDate(item.timestamp_ms, item.datatime)}</div><span class="material-symbols-outlined muted">chevron_right</span></div>`;
-    })
-    .join("");
+
+  root.innerHTML = logs.map(item => {
+    const type = primaryType(item);
+    const typeTitle = primaryTypeTitle(item);
+    const conf = avgConfidence(item);
+
+    return `
+      <div
+        class="log-row"
+        onclick="location.href='/ui/logs/${item.id}'"
+        style="display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f3f1"
+      >
+        <img
+          class="thumb"
+          src="${item.annotated_image || item.original_image || ''}"
+          onerror="imgFallback(event)"
+        >
+
+        <div style="margin-left:16px;flex:1;min-width:0">
+          <b
+            class="type-name"
+            title="${escapeHtml(typeTitle)}"
+            style="color:var(--primary)"
+          >
+            ${escapeHtml(type)}
+          </b>
+          <div class="sub">Avg confidence ${confidenceText(conf)} · Total ${item.total || 0}</div>
+        </div>
+
+        <div class="desktop-only sub" style="min-width:180px">
+          ${fmtDate(item.timestamp_ms, item.datatime)}
+        </div>
+
+        <span class="material-symbols-outlined muted">chevron_right</span>
+      </div>
+    `;
+  }).join('');
 }
-document.getElementById("searchBox").addEventListener("input", async (e) => {
+
+document.getElementById('searchBox').addEventListener('input', async e => {
   const q = e.target.value.trim();
-  if (!q) {
+
+  if(!q){
     renderRecent(dashboardCache?.logs || []);
     return;
   }
-  const r = await API.get(
-    `/api/logs?page=1&page_size=10&search=${encodeURIComponent(q)}`,
-  );
+
+  const r = await API.get(`/api/logs?page=1&page_size=10&search=${encodeURIComponent(q)}`);
+
   renderRecent(r.items || []);
 });
-document.getElementById("uploadBtn").addEventListener("click", async () => {
-  const file = document.getElementById("uploadInput").files[0];
-  if (!file) {
-    setText("uploadStatus", "Choose image first.");
+
+document.getElementById('uploadBtn').addEventListener('click', async () => {
+  const file = document.getElementById('uploadInput').files[0];
+
+  if(!file){
+    setText('uploadStatus', 'Choose image first.');
     return;
   }
-  document.body.classList.add("loading");
-  setText("uploadStatus", "Analyzing image...");
-  try {
-    const r = await API.postImage("/api/analyze", file);
-    setText(
-      "uploadStatus",
-      `Saved. Total detected: ${r.total}. Opening detail...`,
-    );
-    setTimeout(() => (location.href = `/ui/logs/${r.id}`), 700);
-  } catch (e) {
-    setText("uploadStatus", "Failed: " + e.message);
-  } finally {
-    document.body.classList.remove("loading");
+
+  document.body.classList.add('loading');
+  setText('uploadStatus', 'Analyzing image...');
+
+  try{
+    const r = await API.postImage('/api/analyze', file);
+    setText('uploadStatus', `Saved. Total detected: ${r.total}. Opening detail...`);
+
+    setTimeout(() => location.href = `/ui/logs/${r.id}`, 700);
+  }catch(e){
+    setText('uploadStatus', 'Failed: ' + e.message);
+  }finally{
+    document.body.classList.remove('loading');
   }
 });
-loadDashboard().catch((e) => {
+
+loadDashboard().catch(e => {
   console.error(e);
   document.body.insertAdjacentHTML(
-    "afterbegin",
-    `<div class="notice">Dashboard error: ${escapeHtml(e.message)}</div>`,
+    'afterbegin',
+    `<div class="notice">Dashboard error: ${escapeHtml(e.message)}</div>`
   );
 });
-setInterval(loadLatest, 5000);
+
+setInterval(loadLatest, 5000);

web/js/logs.js

@@ -1,12 +1,107 @@
-let page=1,pageSize=10,last=null;
+let page = 1;
+let pageSize = 10;
+let last = null;
+
 async function loadLogs(){
-  const q=document.getElementById('search').value.trim(); const p=document.getElementById('pestType').value.trim();
-  const url=`/api/logs?page=${page}&page_size=${pageSize}${q?`&search=${encodeURIComponent(q)}`:''}${p?`&pest_type=${encodeURIComponent(p)}`:''}`;
-  const r=await API.get(url); last=r; renderLogs(r.items||[]); setText('pageInfo',`Showing page ${r.page} of ${r.total_pages} · ${r.total_items} records`); document.getElementById('prevBtn').disabled=!r.has_prev; document.getElementById('nextBtn').disabled=!r.has_next;
+  const q = document.getElementById('search').value.trim();
+  const p = document.getElementById('pestType').value.trim();
+
+  const url = `/api/logs?page=${page}&page_size=${pageSize}${q ? `&search=${encodeURIComponent(q)}` : ''}${p ? `&pest_type=${encodeURIComponent(p)}` : ''}`;
+
+  const r = await API.get(url);
+
+  last = r;
+
+  renderLogs(r.items || []);
+
+  setText(
+    'pageInfo',
+    `Showing page ${r.page} of ${r.total_pages} · ${r.total_items} records`
+  );
+
+  document.getElementById('prevBtn').disabled = !r.has_prev;
+  document.getElementById('nextBtn').disabled = !r.has_next;
 }
+
 function renderLogs(items){
-  const tb=document.getElementById('logTable');
-  if(!items.length){ tb.innerHTML='<tr><td colspan="6"><div class="empty">No logs found</div></td></tr>'; return; }
-  tb.innerHTML=items.map(item=>{ const type=primaryType(item); const conf=avgConfidence(item); return `<tr class="log-row" onclick="location.href='/ui/logs/${item.id}'"><td><img class="thumb sm" src="${item.annotated_image||item.original_image||''}" onerror="imgFallback(event)"></td><td><b style="color:var(--primary)">${escapeHtml(type)}</b><div class="sub">${escapeHtml(item.id||'')}</div></td><td><div style="display:flex;align-items:center;gap:10px"><div class="confbar"><span style="width:${Math.round(conf*100)}%"></span></div><b>${confidenceText(conf)}</b></div></td><td>${item.total||0}</td><td>${fmtDate(item.timestamp_ms,item.datatime)}</td><td style="text-align:right"><span class="material-symbols-outlined muted">open_in_new</span></td></tr>`; }).join('');
+  const tb = document.getElementById('logTable');
+
+  if(!items.length){
+    tb.innerHTML = '<tr><td colspan="6"><div class="empty">No logs found</div></td></tr>';
+    return;
+  }
+
+  tb.innerHTML = items.map(item => {
+    const type = primaryType(item);
+    const typeTitle = primaryTypeTitle(item);
+    const conf = avgConfidence(item);
+
+    return `
+      <tr class="log-row" onclick="location.href='/ui/logs/${item.id}'">
+        <td>
+          <img
+            class="thumb sm"
+            src="${item.annotated_image || item.original_image || ''}"
+            onerror="imgFallback(event)"
+          >
+        </td>
+
+        <td class="identification-cell">
+          <b
+            class="type-name"
+            title="${escapeHtml(typeTitle)}"
+            style="color:var(--primary)"
+          >
+            ${escapeHtml(type)}
+          </b>
+          <div class="sub">${escapeHtml(item.id || '')}</div>
+        </td>
+
+        <td>
+          <div style="display:flex;align-items:center;gap:10px">
+            <div class="confbar">
+              <span style="width:${Math.round(conf * 100)}%"></span>
+            </div>
+            <b>${confidenceText(conf)}</b>
+          </div>
+        </td>
+
+        <td>${item.total || 0}</td>
+
+        <td>${fmtDate(item.timestamp_ms, item.datatime)}</td>
+
+        <td style="text-align:right">
+          <span class="material-symbols-outlined muted">open_in_new</span>
+        </td>
+      </tr>
+    `;
+  }).join('');
 }
-document.getElementById('filterBtn').onclick=()=>{page=1;loadLogs().catch(alert)}; document.getElementById('search').addEventListener('keydown',e=>{if(e.key==='Enter'){page=1;loadLogs().catch(alert)}}); document.getElementById('prevBtn').onclick=()=>{if(last?.has_prev){page--;loadLogs().catch(alert)}}; document.getElementById('nextBtn').onclick=()=>{if(last?.has_next){page++;loadLogs().catch(alert)}}; loadLogs().catch(e=>alert(e.message));
+
+document.getElementById('filterBtn').onclick = () => {
+  page = 1;
+  loadLogs().catch(alert);
+};
+
+document.getElementById('search').addEventListener('keydown', e => {
+  if(e.key === 'Enter'){
+    page = 1;
+    loadLogs().catch(alert);
+  }
+});
+
+document.getElementById('prevBtn').onclick = () => {
+  if(last?.has_prev){
+    page--;
+    loadLogs().catch(alert);
+  }
+};
+
+document.getElementById('nextBtn').onclick = () => {
+  if(last?.has_next){
+    page++;
+    loadLogs().catch(alert);
+  }
+};
+
+loadLogs().catch(e => alert(e.message));