memorix 0.6.4 → 0.7.0

package/dist/dashboard/static/app.js

@@ -31,6 +31,7 @@ const i18n = {
     nodes: 'nodes',
     edges: 'edges',
     clickNodeToView: 'Click a node to view details',
+    legend: 'Legend',
     noObservations: 'No observations',
     noRelations: 'No relations',
 
@@ -45,12 +46,21 @@ const i18n = {
     exportData: 'Export',
     deleteObs: 'Delete',
     deleteConfirm: 'Delete observation #%id%?',
+    batchCleanup: 'Cleanup',
+    selected: 'selected',
+    cancel: 'Cancel',
+    deleteSelected: 'Delete Selected',
+    batchDeleteConfirm: 'Delete %count% observations?',
     deleted: 'Deleted',
     narrative: 'Narrative',
     facts: 'Facts',
     concepts: 'Concepts',
     files: 'Files Modified',
     clickToExpand: 'Click to expand',
+    vectorSearch: 'Vector Search',
+    fulltextOnly: 'Fulltext Only',
+    enabled: 'Enabled',
+    typeDistribution: 'Type Distribution',
 
     // Retention
     memoryRetention: 'Memory Retention',
@@ -100,6 +110,7 @@ const i18n = {
     nodes: '个节点',
     edges: '条边',
     clickNodeToView: '点击节点查看详情',
+    legend: '图例',
     noObservations: '暂无观察',
     noRelations: '暂无关系',
 
@@ -114,12 +125,21 @@ const i18n = {
     exportData: '导出',
     deleteObs: '删除',
     deleteConfirm: '确认删除观察 #%id%？',
+    batchCleanup: '清理',
+    selected: '已选中',
+    cancel: '取消',
+    deleteSelected: '删除选中',
+    batchDeleteConfirm: '确认删除 %count% 条观察？',
     deleted: '已删除',
     narrative: '叙述',
     facts: '事实',
     concepts: '概念',
     files: '相关文件',
     clickToExpand: '点击展开',
+    vectorSearch: '向量搜索',
+    fulltextOnly: '仅全文搜索',
+    enabled: '已启用',
+    typeDistribution: '类型分布',
 
     // Retention
     memoryRetention: '记忆衰减',
@@ -386,6 +406,11 @@ async function loadDashboard() {
         <div class="stat-label">${t('nextId')}</div>
         <div class="stat-value">#${stats.nextId}</div>
       </div>
+      <div class="stat-card" data-accent="${stats.embedding?.enabled ? 'cyan' : 'amber'}">
+        <div class="stat-label">${t('vectorSearch')}</div>
+        <div class="stat-value" style="font-size: 18px;">${stats.embedding?.enabled ? '✓ ' + t('enabled') : t('fulltextOnly')}</div>
+        ${stats.embedding?.provider ? `<div style="font-size: 10px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono);">${stats.embedding.provider} (${stats.embedding.dimensions}d)</div>` : ''}
+      </div>
     </div>
 
     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
@@ -394,16 +419,23 @@ async function loadDashboard() {
           <span class="panel-title">${t('observationTypes')}</span>
         </div>
         <div class="panel-body">
-          ${typeEntries.length > 0 ? typeEntries.map(([type, count]) => `
-            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-              <span style="width: 20px; text-align: center;">${typeIcons[type] || '❓'}</span>
-              <span style="width: 120px; font-size: 12px; color: var(--text-secondary);">${type}</span>
-              <div style="flex: 1; height: 6px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden;">
-                <div style="width: ${(count / maxTypeCount) * 100}%; height: 100%; background: var(--type-${type}, var(--accent-cyan)); border-radius: 3px;"></div>
+          ${typeEntries.length > 0 ? `
+            <div style="display: flex; gap: 20px; align-items: flex-start;">
+              <canvas id="type-pie-chart" width="140" height="140" style="flex-shrink: 0;"></canvas>
+              <div style="flex: 1;">
+                ${typeEntries.map(([type, count]) => `
+                  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <span style="width: 18px; text-align: center; font-size: 13px;">${typeIcons[type] || '❓'}</span>
+                    <span style="width: 110px; font-size: 11px; color: var(--text-secondary);">${type}</span>
+                    <div style="flex: 1; height: 5px; background: rgba(128,128,128,0.1); border-radius: 3px; overflow: hidden;">
+                      <div style="width: ${(count / maxTypeCount) * 100}%; height: 100%; background: var(--type-${type}, var(--accent-cyan)); border-radius: 3px;"></div>
+                    </div>
+                    <span style="font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 22px; text-align: right;">${count}</span>
+                  </div>
+                `).join('')}
               </div>
-              <span style="font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); min-width: 24px; text-align: right;">${count}</span>
             </div>
-          `).join('') : `<p style="color: var(--text-muted); font-size: 13px;">${t('noObservationsYet')}</p>`}
+          ` : `<p style="color: var(--text-muted); font-size: 13px;">${t('noObservationsYet')}</p>`}
         </div>
       </div>
 
@@ -430,6 +462,55 @@ async function loadDashboard() {
       </div>
     </div>
   `;
+
+  // Render pie chart if data exists
+  if (typeEntries.length > 0) {
+    requestAnimationFrame(() => renderPieChart('type-pie-chart', typeEntries, typeIcons));
+  }
+}
+
+/** Draw a mini donut chart on a canvas */
+function renderPieChart(canvasId, entries, icons) {
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const dpr = window.devicePixelRatio || 1;
+  const size = 140;
+  canvas.width = size * dpr;
+  canvas.height = size * dpr;
+  canvas.style.width = size + 'px';
+  canvas.style.height = size + 'px';
+  ctx.scale(dpr, dpr);
+
+  const cx = size / 2, cy = size / 2, r = 54, inner = 34;
+  const total = entries.reduce((s, e) => s + e[1], 0);
+  const colors = [
+    '#06b6d4', '#a855f7', '#f59e0b', '#22c55e',
+    '#3b82f6', '#ef4444', '#ec4899', '#f97316', '#6366f1',
+  ];
+
+  let angle = -Math.PI / 2;
+  entries.forEach(([type, count], i) => {
+    const slice = (count / total) * Math.PI * 2;
+    ctx.beginPath();
+    ctx.moveTo(cx + inner * Math.cos(angle), cy + inner * Math.sin(angle));
+    ctx.arc(cx, cy, r, angle, angle + slice);
+    ctx.arc(cx, cy, inner, angle + slice, angle, true);
+    ctx.closePath();
+    ctx.fillStyle = colors[i % colors.length];
+    ctx.fill();
+    angle += slice;
+  });
+
+  // Center text
+  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim() || '#fff';
+  ctx.font = 'bold 20px system-ui';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(total, cx, cy - 6);
+  ctx.font = '10px system-ui';
+  ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#888';
+  ctx.fillText('total', cx, cy + 10);
 }
 
 // ============================================================
@@ -632,6 +713,11 @@ function renderGraph(graph) {
     for (const node of nodes) {
       const active = node === hoveredNode || node === selectedNode;
 
+      // Legend hover dimming
+      if (node._dimmed) {
+        ctx.globalAlpha = 0.15;
+      }
+
       // Glow + dashed ring
       if (active) {
         const pr = node.radius + 12 + Math.sin(pulsePhase * 3) * 3;
@@ -686,11 +772,91 @@ function renderGraph(graph) {
         ctx.fillText(String(node.observations.length), bx, by);
         ctx.textBaseline = 'alphabetic';
       }
+
+      // Reset alpha after dimming
+      ctx.globalAlpha = 1;
     }
 
     if (selectedNode && !animating) requestAnimationFrame(draw);
   }
 
+  // --- Knowledge Graph Legend ---
+  function buildLegend() {
+    let existing = container.querySelector('.graph-legend');
+    if (existing) existing.remove();
+
+    const legend = document.createElement('div');
+    legend.className = 'graph-legend';
+    legend.style.cssText = `
+      position: absolute; top: 12px; right: 12px; z-index: 10;
+      background: var(--bg-card);
+      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+      border: 1px solid var(--border-medium);
+      border-radius: 12px; padding: 12px 14px; min-width: 140px;
+      font-family: 'Inter', sans-serif; font-size: 11px;
+      color: var(--text-secondary);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+      transition: opacity 0.3s;
+    `;
+
+    // Type stats
+    const typeCount = {};
+    nodes.forEach(n => { typeCount[n.type] = (typeCount[n.type] || 0) + 1; });
+
+    // Title
+    const title = document.createElement('div');
+    title.style.cssText = 'font-weight: 600; font-size: 11px; margin-bottom: 8px; color: var(--text-primary); letter-spacing: 0.5px; text-transform: uppercase;';
+    title.textContent = t('legend') || 'Legend';
+    legend.appendChild(title);
+
+    // Type entries
+    Object.entries(typeCount)
+      .sort((a, b) => b[1] - a[1])
+      .forEach(([type, count]) => {
+        const row = document.createElement('div');
+        row.style.cssText = 'display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; cursor: pointer; transition: background 0.2s;';
+
+        const dot = document.createElement('span');
+        dot.style.cssText = `width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: ${typeColors[type] || '#666'}; box-shadow: 0 0 6px ${typeColors[type] || '#666'}44;`;
+
+        const label = document.createElement('span');
+        label.style.cssText = 'flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;';
+        label.textContent = type;
+
+        const badge = document.createElement('span');
+        badge.style.cssText = 'font-size: 10px; opacity: 0.6;';
+        badge.textContent = count;
+
+        row.appendChild(dot);
+        row.appendChild(label);
+        row.appendChild(badge);
+
+        // Hover to highlight same-type nodes
+        row.addEventListener('mouseenter', () => {
+          row.style.background = 'var(--bg-card-hover)';
+          nodes.forEach(n => { n._dimmed = n.type !== type; });
+          draw();
+        });
+        row.addEventListener('mouseleave', () => {
+          row.style.background = '';
+          nodes.forEach(n => { n._dimmed = false; });
+          draw();
+        });
+
+        legend.appendChild(row);
+      });
+
+    // Stats footer
+    const stats = document.createElement('div');
+    stats.style.cssText = 'margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: 10px; opacity: 0.5;';
+    stats.textContent = `${nodes.length} nodes · ${edges.length} edges`;
+    legend.appendChild(stats);
+
+    container.style.position = 'relative';
+    container.appendChild(legend);
+  }
+  buildLegend();
+
   function showDetail(node) {
     const panel = document.getElementById('graph-detail');
     if (!node) {
@@ -775,6 +941,85 @@ function renderGraph(graph) {
 let allObservations = [];
 let obsFilter = '';
 let obsTypeFilter = '';
+let batchMode = false;
+let selectedIds = new Set();
+
+// Low quality detection (same patterns as CLI cleanup)
+const LOW_QUALITY_OBS_PATTERNS = [
+  /^Session activity/i,
+  /^Updated \S+\.\w+$/i,
+  /^Created \S+\.\w+$/i,
+  /^Deleted \S+\.\w+$/i,
+  /^Modified \S+\.\w+$/i,
+  /^Ran command:/i,
+  /^Read file:/i,
+];
+function isLowQualityObs(title) {
+  return LOW_QUALITY_OBS_PATTERNS.some(p => p.test(title.trim()));
+}
+
+function renderBatchToolbar() {
+  const slot = document.getElementById('batch-toolbar-slot');
+  if (!slot) return;
+  if (!batchMode || selectedIds.size === 0) {
+    slot.innerHTML = '';
+    return;
+  }
+  slot.innerHTML = `
+    <div class="batch-toolbar">
+      <span class="batch-count">${selectedIds.size} ${t('selected') || 'selected'}</span>
+      <button class="batch-cancel-btn" onclick="exitBatchMode()">${t('cancel') || 'Cancel'}</button>
+      <button class="batch-delete-btn" onclick="batchDeleteSelected()">🗑️ ${t('deleteSelected') || 'Delete Selected'}</button>
+    </div>
+  `;
+}
+
+async function batchDeleteSelected() {
+  if (selectedIds.size === 0) return;
+  const msg = (t('batchDeleteConfirm') || 'Delete %count% observations?').replace('%count%', selectedIds.size);
+  if (!confirm(msg)) return;
+
+  const sep = selectedProject ? `?project=${encodeURIComponent(selectedProject)}` : '';
+  let deleted = 0;
+  for (const id of selectedIds) {
+    try {
+      const res = await fetch(`/api/observations/${id}${sep}`, { method: 'DELETE' });
+      const data = await res.json();
+      if (data.ok) deleted++;
+    } catch { /* ignore individual failures */ }
+  }
+
+  allObservations = allObservations.filter(o => !selectedIds.has(o.id));
+  selectedIds.clear();
+  batchMode = false;
+  renderObsList();
+  renderBatchToolbar();
+
+  // Update counter
+  const subtitle = document.querySelector('#page-observations .page-subtitle');
+  if (subtitle) subtitle.textContent = `${allObservations.length} ${t('observationsStored')}`;
+}
+
+function exitBatchMode() {
+  batchMode = false;
+  selectedIds.clear();
+  renderObsList();
+  renderBatchToolbar();
+}
+
+function toggleObsSelect(id) {
+  if (selectedIds.has(id)) {
+    selectedIds.delete(id);
+  } else {
+    selectedIds.add(id);
+  }
+  renderBatchToolbar();
+}
+
+// Make batch functions globally accessible
+window.exitBatchMode = exitBatchMode;
+window.batchDeleteSelected = batchDeleteSelected;
+window.toggleObsSelect = toggleObsSelect;
 
 async function loadObservations() {
   const container = document.getElementById('page-observations');
@@ -797,12 +1042,19 @@ async function loadObservations() {
         <h1 class="page-title">${t('observations')}</h1>
         <p class="page-subtitle">${allObservations.length} ${t('observationsStored')}</p>
       </div>
-      <button class="export-btn" id="btn-export" title="${t('exportData')}">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v8M4 7l4 4 4-4M2 12v2h12v-2"/></svg>
-        ${t('exportData')}
-      </button>
+      <div style="display:flex;gap:8px;">
+        <button class="export-btn" id="btn-batch-cleanup" title="${t('batchCleanup') || 'Batch Cleanup'}">
+          🧹 ${t('batchCleanup') || 'Cleanup'}
+        </button>
+        <button class="export-btn" id="btn-export" title="${t('exportData')}">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v8M4 7l4 4 4-4M2 12v2h12v-2"/></svg>
+          ${t('exportData')}
+        </button>
+      </div>
     </div>
 
+    <div id="batch-toolbar-slot"></div>
+
     <div class="search-bar">
       <input class="search-input" id="obs-search" type="text" placeholder="${t('searchObservations')}" />
       <button class="filter-btn active" data-type="" id="filter-all">${t('all')}</button>
@@ -818,6 +1070,22 @@ async function loadObservations() {
     window.open(`/api/export${sep}`, '_blank');
   });
 
+  // Batch cleanup: enter batch mode, auto-select low-quality observations
+  document.getElementById('btn-batch-cleanup').addEventListener('click', () => {
+    batchMode = !batchMode;
+    if (batchMode) {
+      // Auto-select low quality ones
+      selectedIds.clear();
+      allObservations.forEach(obs => {
+        if (isLowQualityObs(obs.title || '')) selectedIds.add(obs.id);
+      });
+    } else {
+      selectedIds.clear();
+    }
+    renderObsList();
+    renderBatchToolbar();
+  });
+
   document.getElementById('obs-search').addEventListener('input', (e) => {
     obsFilter = e.target.value.toLowerCase();
     renderObsList();
@@ -865,26 +1133,32 @@ function renderObsList() {
     return;
   }
 
-  list.innerHTML = filtered.map(obs => `
-    <div class="obs-card" data-obs-id="${obs.id}">
+  list.innerHTML = filtered.map(obs => {
+    const isLow = isLowQualityObs(obs.title || '');
+    const isSelected = selectedIds.has(obs.id);
+    const hl = (text) => obsFilter ? escapeHtml(text).replace(new RegExp(`(${escapeHtml(obsFilter).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'), '<mark>$1</mark>') : escapeHtml(text);
+    return `
+    <div class="obs-card${isLow ? ' low-quality' : ''}" data-obs-id="${obs.id}">
       <div class="obs-card-header" onclick="toggleObsDetail(${obs.id})">
+        ${batchMode ? `<input type="checkbox" class="obs-checkbox" ${isSelected ? 'checked' : ''} onclick="event.stopPropagation(); toggleObsSelect(${obs.id}); this.checked = !this.checked;" />` : ''}
         <span class="obs-card-id">#${obs.id}</span>
         <span class="type-badge" data-type="${obs.type || 'unknown'}">
           ${typeIcons[obs.type] || '❓'} ${obs.type || 'unknown'}
         </span>
-        <span class="obs-card-title">${escapeHtml(obs.title || t('untitled'))}</span>
+        ${isLow ? '<span class="low-quality-badge">low quality</span>' : ''}
+        <span class="obs-card-title">${hl(obs.title || t('untitled'))}</span>
         <span class="obs-expand-icon">▼</span>
       </div>
       <div class="obs-card-meta">
-        <span>📁 ${escapeHtml(obs.entityName || 'unknown')}</span>
+        <span>📁 ${hl(obs.entityName || 'unknown')}</span>
         ${obs.createdAt ? `<span>🕐 ${formatTime(obs.createdAt)}</span>` : ''}
         ${obs.accessCount ? `<span>👁 ${obs.accessCount}</span>` : ''}
       </div>
       <div class="obs-detail" id="obs-detail-${obs.id}" style="display:none;">
-        ${obs.narrative ? `<div class="obs-detail-section"><label>${t('narrative')}</label><div class="obs-card-narrative">${escapeHtml(obs.narrative)}</div></div>` : ''}
-        ${obs.facts && obs.facts.length > 0 ? `<div class="obs-detail-section"><label>${t('facts')}</label><div class="obs-card-facts">${obs.facts.map(f => `<span class="fact-tag">${escapeHtml(f)}</span>`).join('')}</div></div>` : ''}
-        ${obs.concepts && obs.concepts.length > 0 ? `<div class="obs-detail-section"><label>${t('concepts')}</label><div class="obs-card-facts">${obs.concepts.map(c => `<span class="fact-tag concept-tag">${escapeHtml(c)}</span>`).join('')}</div></div>` : ''}
-        ${obs.filesModified && obs.filesModified.length > 0 ? `<div class="obs-detail-section"><label>${t('files')}</label><div class="obs-card-facts">${obs.filesModified.map(f => `<span class="fact-tag file-tag">${escapeHtml(f)}</span>`).join('')}</div></div>` : ''}
+        ${obs.narrative ? `<div class="obs-detail-section"><label>${t('narrative')}</label><div class="obs-card-narrative">${hl(obs.narrative)}</div></div>` : ''}
+        ${obs.facts && obs.facts.length > 0 ? `<div class="obs-detail-section"><label>${t('facts')}</label><div class="obs-card-facts">${obs.facts.map(f => `<span class="fact-tag">${hl(f)}</span>`).join('')}</div></div>` : ''}
+        ${obs.concepts && obs.concepts.length > 0 ? `<div class="obs-detail-section"><label>${t('concepts')}</label><div class="obs-card-facts">${obs.concepts.map(c => `<span class="fact-tag concept-tag">${hl(c)}</span>`).join('')}</div></div>` : ''}
+        ${obs.filesModified && obs.filesModified.length > 0 ? `<div class="obs-detail-section"><label>${t('files')}</label><div class="obs-card-facts">${obs.filesModified.map(f => `<span class="fact-tag file-tag">${hl(f)}</span>`).join('')}</div></div>` : ''}
         <div class="obs-detail-actions">
           <button class="delete-btn" onclick="deleteObs(${obs.id}, event)">
             <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1M6 7v5M10 7v5M3 4l1 9a1 1 0 001 1h6a1 1 0 001-1l1-9"/></svg>
@@ -893,7 +1167,8 @@ function renderObsList() {
         </div>
       </div>
     </div>
-  `).join('');
+  `;
+  }).join('');
 }
 
 // ============================================================
@@ -991,9 +1266,30 @@ function toggleObsDetail(id) {
   const card = detail?.closest('.obs-card');
   if (!detail || !card) return;
 
-  const isOpen = detail.style.display !== 'none';
-  detail.style.display = isOpen ? 'none' : 'block';
-  card.classList.toggle('expanded', !isOpen);
+  const isOpen = card.classList.contains('expanded');
+
+  if (isOpen) {
+    // Collapse with animation
+    detail.style.maxHeight = detail.scrollHeight + 'px';
+    requestAnimationFrame(() => {
+      detail.style.maxHeight = '0';
+      detail.style.opacity = '0';
+    });
+    setTimeout(() => { detail.style.display = 'none'; }, 300);
+    card.classList.remove('expanded');
+  } else {
+    // Expand with animation
+    detail.style.display = 'block';
+    detail.style.maxHeight = '0';
+    detail.style.opacity = '0';
+    requestAnimationFrame(() => {
+      detail.style.maxHeight = detail.scrollHeight + 'px';
+      detail.style.opacity = '1';
+    });
+    // Remove max-height constraint after animation
+    setTimeout(() => { detail.style.maxHeight = 'none'; }, 300);
+    card.classList.add('expanded');
+  }
 
   // Rotate expand icon
   const icon = card.querySelector('.obs-expand-icon');

package/dist/dashboard/static/style.css

@@ -1158,24 +1158,113 @@ body {
   color: var(--text-secondary);
 }
 
-/* Observation Detail Section */
+/* Observation Detail Section — smooth expand/collapse */
 .obs-detail {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--border-subtle);
-  animation: slideDown 0.2s ease;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
+/* Batch action toolbar */
+.batch-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  margin-bottom: 12px;
+  animation: fadeIn 0.2s ease;
+}
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.batch-toolbar .batch-count {
+  font-size: 12px;
+  color: var(--text-secondary);
+  flex: 1;
+}
+
+.batch-toolbar button {
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid;
+}
+
+.batch-toolbar .batch-delete-btn {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--accent-red);
+}
+
+.batch-toolbar .batch-delete-btn:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: var(--accent-red);
+}
+
+.batch-toolbar .batch-cancel-btn {
+  background: transparent;
+  border-color: var(--border-medium);
+  color: var(--text-secondary);
+}
+
+.batch-toolbar .batch-cancel-btn:hover {
+  border-color: var(--text-secondary);
+  color: var(--text-primary);
+}
+
+/* Low quality indicator */
+.obs-card.low-quality {
+  border-left: 3px solid var(--accent-amber);
+  opacity: 0.7;
+}
+
+.obs-card.low-quality:hover {
+  opacity: 1;
+}
+
+.low-quality-badge {
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--accent-amber);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Batch select checkbox */
+.obs-checkbox {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--border-medium);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.obs-checkbox:checked {
+  background: var(--accent-cyan);
+  border-color: var(--accent-cyan);
+}
+
+.obs-checkbox:checked::after {
+  content: '✓';
+  display: block;
+  text-align: center;
+  font-size: 11px;
+  color: #000;
+  line-height: 14px;
+  font-weight: bold;
 }
 
 .obs-detail-section {
@@ -1194,6 +1283,7 @@ body {
 
 .obs-detail-section .obs-card-narrative {
   -webkit-line-clamp: unset;
+  line-clamp: unset;
   white-space: pre-wrap;
   max-height: none;
 }
@@ -1242,4 +1332,17 @@ body {
   background: rgba(239, 68, 68, 0.1);
   border-color: var(--accent-red);
   opacity: 1;
+}
+
+/* Search highlight */
+mark {
+  background: rgba(245, 158, 11, 0.25);
+  color: inherit;
+  padding: 1px 2px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+[data-theme="light"] mark {
+  background: rgba(245, 158, 11, 0.35);
 }