@composy/log-viewer-core 0.0.1 → 0.0.2

package/dist/index.js

@@ -2,13 +2,13 @@
 * ***********************************
 * @composy/log-viewer-core v0.0.1 *
 * Built with rollup               *
-* Build time: 2024-08-17 11:33:32 *
+* Build time: 2024-10-12 17:29:20 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignLogViewer = {}));
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignLogViewerCore = {}));
 })(this, function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/types/index.ts
@@ -45,21 +45,25 @@
 			this.listeners = /* @__PURE__ */ new Map();
 		}
 		on(event, callback) {
+			if (!event || typeof callback !== "function") return () => void 0;
 			if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
 			this.listeners.get(event).add(callback);
 			return () => this.off(event, callback);
 		}
 		off(event, callback) {
-			this.listeners.get(event)?.delete(callback);
+			const listeners = this.listeners.get(event);
+			if (!listeners) return;
+			listeners.delete(callback);
+			if (listeners.size === 0) this.listeners.delete(event);
 		}
 		emit(event, ...args) {
-			this.listeners.get(event)?.forEach((cb) => {
-				try {
-					cb(...args);
-				} catch (e) {
-					console.error(`[LogViewer] Event handler error (${event}):`, e);
-				}
-			});
+			const listeners = this.listeners.get(event);
+			if (!listeners) return;
+			for (const cb of [...listeners]) try {
+				cb(...args);
+			} catch (e) {
+				console.error(`[LogViewer] Event handler error (${event}):`, e);
+			}
 		}
 		removeAllListeners(event) {
 			if (event) this.listeners.delete(event);
@@ -73,39 +77,44 @@
 		* 对日志条目进行多维筛选
 		*/
 		filter(entries, config) {
-			let result = entries;
-			if (config.user) {
-				const keyword = config.user.toLowerCase();
-				result = result.filter((e) => e.user.toLowerCase().includes(keyword) || e.userId && e.userId.toLowerCase().includes(keyword));
+			let result = Array.isArray(entries) ? entries.slice() : [];
+			const normalizedConfig = config || {};
+			if (normalizedConfig.user?.trim()) {
+				const keyword = normalizedConfig.user.trim().toLowerCase();
+				result = result.filter((e) => e.user?.toLowerCase().includes(keyword) || e.userId?.toLowerCase().includes(keyword));
 			}
-			if (config.action) {
-				const actions = Array.isArray(config.action) ? config.action : [config.action];
-				result = result.filter((e) => actions.includes(e.action));
+			if (normalizedConfig.action) {
+				const actions = Array.isArray(normalizedConfig.action) ? normalizedConfig.action : [normalizedConfig.action];
+				if (actions.length > 0) result = result.filter((e) => actions.includes(e.action));
 			}
-			if (config.module) {
-				const mod = config.module.toLowerCase();
-				result = result.filter((e) => e.module.toLowerCase().includes(mod));
+			if (normalizedConfig.module?.trim()) {
+				const mod = normalizedConfig.module.trim().toLowerCase();
+				result = result.filter((e) => e.module?.toLowerCase().includes(mod));
 			}
-			if (config.ip) {
-				const ip = config.ip.toLowerCase();
-				result = result.filter((e) => e.ip && e.ip.toLowerCase().includes(ip));
+			if (normalizedConfig.ip?.trim()) {
+				const ip = normalizedConfig.ip.trim().toLowerCase();
+				result = result.filter((e) => e.ip?.toLowerCase().includes(ip));
 			}
-			if (config.timeRange) {
-				const [start, end] = config.timeRange;
+			if (normalizedConfig.timeRange) {
+				const [start, end] = normalizedConfig.timeRange;
 				const startTime = new Date(start).getTime();
 				const endTime = new Date(end).getTime();
-				result = result.filter((e) => {
-					const t = new Date(e.timestamp).getTime();
-					return t >= startTime && t <= endTime;
-				});
+				if (Number.isFinite(startTime) && Number.isFinite(endTime)) {
+					const lower = Math.min(startTime, endTime);
+					const upper = Math.max(startTime, endTime);
+					result = result.filter((e) => {
+						const t = new Date(e.timestamp).getTime();
+						return Number.isFinite(t) && t >= lower && t <= upper;
+					});
+				}
 			}
-			if (config.keyword) {
-				const kw = config.keyword.toLowerCase();
+			if (normalizedConfig.keyword?.trim()) {
+				const kw = normalizedConfig.keyword.trim().toLowerCase();
 				result = result.filter((e) => {
 					return [
-						e.user,
+						e.user || "",
 						e.action,
-						e.module,
+						e.module || "",
 						e.detail || "",
 						e.ip || "",
 						e.id
@@ -118,13 +127,13 @@
 		* 获取所有唯一操作人
 		*/
 		getUniqueUsers(entries) {
-			return [...new Set(entries.map((e) => e.user))].sort();
+			return [...new Set(entries.map((e) => e.user).filter(Boolean))].sort();
 		}
 		/**
 		* 获取所有唯一模块
 		*/
 		getUniqueModules(entries) {
-			return [...new Set(entries.map((e) => e.module))].sort();
+			return [...new Set(entries.map((e) => e.module).filter(Boolean))].sort();
 		}
 		/**
 		* 获取所有唯一操作类型
@@ -137,11 +146,12 @@
 	//#region src/utils/index.ts
 	let _uid = 0;
 	function uid(prefix = "lv") {
-		return `${prefix}-${++_uid}-${Math.random().toString(36).slice(2, 8)}`;
+		const random = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID().slice(0, 8) : Math.random().toString(36).slice(2, 8);
+		return `${prefix}-${++_uid}-${random}`;
 	}
 	function formatDate(value, fmt = "YYYY-MM-DD HH:mm:ss") {
 		const d = value instanceof Date ? value : new Date(value);
-		if (isNaN(d.getTime())) return String(value);
+		if (Number.isNaN(d.getTime())) return String(value);
 		const pad = (n) => String(n).padStart(2, "0");
 		const year = String(d.getFullYear());
 		const month = pad(d.getMonth() + 1);
@@ -154,6 +164,7 @@
 	function formatRelativeTime(value) {
 		const d = value instanceof Date ? value : new Date(value);
 		const diff = Date.now() - d.getTime();
+		if (!Number.isFinite(diff) || diff < 0) return formatDate(d);
 		if (diff < 6e4) return "刚刚";
 		if (diff < 36e5) return `${Math.floor(diff / 6e4)} \u5206\u949F\u524D`;
 		if (diff < 864e5) return `${Math.floor(diff / 36e5)} \u5C0F\u65F6\u524D`;
@@ -172,15 +183,58 @@
 	}
 	function debounce(fn, delay) {
 		let timer = null;
+		const wait = Number.isFinite(delay) && delay > 0 ? delay : 0;
 		return ((...args) => {
 			if (timer) clearTimeout(timer);
-			timer = setTimeout(() => fn(...args), delay);
+			timer = setTimeout(() => {
+				timer = null;
+				fn(...args);
+			}, wait);
 		});
 	}
 	function deepClone(obj) {
 		if (obj === null || typeof obj !== "object") return obj;
+		if (typeof structuredClone === "function") try {
+			return structuredClone(obj);
+		} catch {}
+		const seen = /* @__PURE__ */ new WeakMap();
+		const clone = (value) => {
+			if (value === null || typeof value !== "object") return value;
+			if (seen.has(value)) return seen.get(value);
+			if (value instanceof Date) return new Date(value.getTime());
+			if (value instanceof RegExp) return new RegExp(value.source, value.flags);
+			if (value instanceof Map) {
+				const result2 = /* @__PURE__ */ new Map();
+				seen.set(value, result2);
+				value.forEach((mapValue, key) => result2.set(clone(key), clone(mapValue)));
+				return result2;
+			}
+			if (value instanceof Set) {
+				const result2 = /* @__PURE__ */ new Set();
+				seen.set(value, result2);
+				value.forEach((setValue) => result2.add(clone(setValue)));
+				return result2;
+			}
+			if (Array.isArray(value)) {
+				const result2 = [];
+				seen.set(value, result2);
+				value.forEach((item) => result2.push(clone(item)));
+				return result2;
+			}
+			const result = Object.create(Object.getPrototypeOf(value));
+			seen.set(value, result);
+			for (const key of Reflect.ownKeys(value)) {
+				const descriptor = Object.getOwnPropertyDescriptor(value, key);
+				if (!descriptor || !("value" in descriptor)) continue;
+				Object.defineProperty(result, key, {
+					...descriptor,
+					value: clone(descriptor.value)
+				});
+			}
+			return result;
+		};
 		try {
-			return JSON.parse(JSON.stringify(obj));
+			return clone(obj);
 		} catch {
 			return obj;
 		}
@@ -188,13 +242,73 @@
 	function formatValue(val) {
 		if (val === null || val === void 0) return "-";
 		if (typeof val === "object") try {
-			return JSON.stringify(val, null, 2);
+			return JSON.stringify(val, (_key, value) => {
+				if (typeof value === "bigint") return `${value}n`;
+				return value;
+			}, 2);
 		} catch {
 			return String(val);
 		}
 		return String(val);
 	}
 	//#endregion
+	//#region src/renderers/DiffRenderer.ts
+	var DiffRenderer = class {
+		/**
+		* 渲染详情面板（包含 diff 表格和 metadata）
+		*/
+		renderDetail(entry) {
+			const container = document.createElement("div");
+			container.className = "lv-detail";
+			if (entry.changes && entry.changes.length > 0) container.appendChild(this.renderDiffTable(entry.changes));
+			if (entry.metadata && Object.keys(entry.metadata).length > 0) {
+				const meta = document.createElement("div");
+				meta.className = "lv-metadata";
+				meta.textContent = formatValue(entry.metadata);
+				container.appendChild(meta);
+			}
+			return container;
+		}
+		/**
+		* 渲染 Diff 表格
+		*/
+		renderDiffTable(changes) {
+			const table = document.createElement("table");
+			table.className = "lv-diff-table";
+			const thead = document.createElement("thead");
+			const headerRow = document.createElement("tr");
+			for (const label of [
+				"字段",
+				"变更前",
+				"变更后"
+			]) {
+				const th = document.createElement("th");
+				th.textContent = label;
+				headerRow.appendChild(th);
+			}
+			thead.appendChild(headerRow);
+			table.appendChild(thead);
+			const tbody = document.createElement("tbody");
+			for (const change of changes) {
+				const tr = document.createElement("tr");
+				const tdField = document.createElement("td");
+				tdField.textContent = change.label || change.field;
+				tr.appendChild(tdField);
+				const tdOld = document.createElement("td");
+				tdOld.className = "lv-diff-old";
+				tdOld.textContent = formatValue(change.oldValue);
+				tr.appendChild(tdOld);
+				const tdNew = document.createElement("td");
+				tdNew.className = "lv-diff-new";
+				tdNew.textContent = formatValue(change.newValue);
+				tr.appendChild(tdNew);
+				tbody.appendChild(tr);
+			}
+			table.appendChild(tbody);
+			return table;
+		}
+	};
+	//#endregion
 	//#region src/renderers/TimelineRenderer.ts
 	const ANOMALY_LABELS = {
 		"off-hours": "非工作时间",
@@ -202,29 +316,53 @@
 		"high-frequency": "高频操作",
 		none: ""
 	};
+	const ANOMALY_LABELS_EN = {
+		"off-hours": "Off hours",
+		sensitive: "Sensitive",
+		"high-frequency": "High frequency",
+		none: ""
+	};
+	const ACTION_LABELS_EN = {
+		create: "Create",
+		update: "Update",
+		delete: "Delete",
+		query: "Query",
+		login: "Login",
+		logout: "Logout",
+		export: "Export",
+		import: "Import",
+		approve: "Approve",
+		reject: "Reject",
+		other: "Other"
+	};
 	var TimelineRenderer = class {
 		/**
 		* 渲染时间线
 		*/
-		render(entries, expandedIds) {
+		render(entries, expandedIds, options = {}) {
 			const container = document.createElement("div");
 			container.className = "lv-timeline";
 			if (entries.length === 0) {
-				container.innerHTML = `<div class="lv-empty"><div class="lv-empty-icon">--</div><div>\u6682\u65E0\u65E5\u5FD7\u8BB0\u5F55</div></div>`;
+				const emptyIcon = document.createElement("div");
+				emptyIcon.className = "lv-empty-icon";
+				emptyIcon.textContent = "--";
+				const emptyText = document.createElement("div");
+				emptyText.textContent = options.locale === "en-US" ? "No log entries" : "暂无日志记录";
+				container.append(emptyIcon, emptyText);
 				container.className = "";
 				return container;
 			}
-			for (const entry of entries) container.appendChild(this.renderItem(entry, expandedIds.has(entry.id)));
+			for (const entry of entries) container.appendChild(this.renderItem(entry, expandedIds.has(entry.id), options));
 			return container;
 		}
 		/**
 		* 渲染单条时间线条目
 		*/
-		renderItem(entry, expanded) {
+		renderItem(entry, expanded, options = {}) {
 			const item = document.createElement("div");
 			item.className = "lv-timeline-item";
 			item.setAttribute("data-id", entry.id);
-			const isAnomaly = entry.anomaly && entry.anomaly !== "none";
+			const isAnomaly = options.showAnomalyBadge !== false && entry.anomaly && entry.anomaly !== "none";
 			const dot = document.createElement("div");
 			dot.className = `lv-timeline-dot${isAnomaly ? " lv-timeline-dot--anomaly" : ""}`;
 			item.appendChild(dot);
@@ -241,9 +379,8 @@
 			user.textContent = entry.user;
 			header.appendChild(user);
 			const actionTag = document.createElement("span");
-			actionTag.className = "lv-action-tag";
-			actionTag.textContent = ACTION_LABELS[entry.action] || entry.action;
-			actionTag.style.backgroundColor = ACTION_COLORS[entry.action] || "#8c8c8c";
+			actionTag.className = `lv-action-tag lv-action-tag--${Object.keys(ACTION_LABELS).includes(entry.action) ? entry.action : "other"}`;
+			actionTag.textContent = (options.locale === "en-US" ? ACTION_LABELS_EN[entry.action] : ACTION_LABELS[entry.action]) || entry.action;
 			header.appendChild(actionTag);
 			const moduleBadge = document.createElement("span");
 			moduleBadge.className = "lv-timeline-module";
@@ -255,10 +392,10 @@
 				ip.textContent = entry.ip;
 				header.appendChild(ip);
 			}
-			if (isAnomaly) {
+			if (options.showAnomalyBadge !== false && isAnomaly) {
 				const badge = document.createElement("span");
 				badge.className = "lv-anomaly-badge";
-				badge.textContent = ANOMALY_LABELS[entry.anomaly];
+				badge.textContent = (options.locale === "en-US" ? ANOMALY_LABELS_EN[entry.anomaly] : ANOMALY_LABELS)[entry.anomaly] || entry.anomaly;
 				header.appendChild(badge);
 			}
 			card.appendChild(header);
@@ -268,9 +405,11 @@
 				detail.textContent = entry.detail;
 				card.appendChild(detail);
 			}
-			if (entry.changes && entry.changes.length > 0) {
-				const hint = document.createElement("div");
+			if (options.showDiff !== false && entry.changes && entry.changes.length > 0) {
+				const hint = document.createElement("button");
+				hint.type = "button";
 				hint.className = "lv-timeline-expand-hint";
+				hint.setAttribute("aria-expanded", String(expanded));
 				hint.textContent = expanded ? "[ 收起变更详情 ]" : `[ \u67E5\u770B\u53D8\u66F4\u8BE6\u60C5 (${entry.changes.length} \u4E2A\u5B57\u6BB5) ]`;
 				card.appendChild(hint);
 			}
@@ -283,86 +422,48 @@
 		renderPagination(page, pageSize, total) {
 			const container = document.createElement("div");
 			container.className = "lv-pagination";
-			const totalPages = Math.ceil(total / pageSize);
+			const safePageSize = Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : 1;
+			const safeTotal = Number.isFinite(total) && total > 0 ? Math.floor(total) : 0;
+			const safePage = Number.isFinite(page) && page > 0 ? Math.floor(page) : 1;
+			const totalPages = Math.ceil(safeTotal / safePageSize);
 			if (totalPages <= 1) return container;
 			const prev = document.createElement("button");
+			prev.type = "button";
 			prev.className = "lv-pagination-btn";
 			prev.textContent = "<";
-			prev.disabled = page <= 1;
-			prev.setAttribute("data-page", String(page - 1));
+			prev.disabled = safePage <= 1;
+			prev.setAttribute("aria-label", "Previous page");
+			prev.setAttribute("data-page", String(safePage - 1));
 			container.appendChild(prev);
 			const maxVisible = 7;
-			let startPage = Math.max(1, page - Math.floor(maxVisible / 2));
+			let startPage = Math.max(1, safePage - Math.floor(maxVisible / 2));
 			const endPage = Math.min(totalPages, startPage + maxVisible - 1);
 			if (endPage - startPage < maxVisible - 1) startPage = Math.max(1, endPage - maxVisible + 1);
 			for (let i = startPage; i <= endPage; i++) {
 				const btn = document.createElement("button");
-				btn.className = `lv-pagination-btn${i === page ? " lv-pagination-btn--active" : ""}`;
+				btn.type = "button";
+				btn.className = `lv-pagination-btn${i === safePage ? " lv-pagination-btn--active" : ""}`;
 				btn.textContent = String(i);
 				btn.setAttribute("data-page", String(i));
+				if (i === safePage) btn.setAttribute("aria-current", "page");
 				container.appendChild(btn);
 			}
 			const next = document.createElement("button");
+			next.type = "button";
 			next.className = "lv-pagination-btn";
 			next.textContent = ">";
-			next.disabled = page >= totalPages;
-			next.setAttribute("data-page", String(page + 1));
+			next.disabled = safePage >= totalPages;
+			next.setAttribute("aria-label", "Next page");
+			next.setAttribute("data-page", String(safePage + 1));
 			container.appendChild(next);
 			const info = document.createElement("span");
 			info.className = "lv-pagination-info";
-			info.textContent = `\u5171 ${total} \u6761`;
+			info.textContent = `\u5171 ${safeTotal} \u6761`;
 			container.appendChild(info);
 			return container;
 		}
 	};
 	//#endregion
-	//#region src/renderers/DiffRenderer.ts
-	var DiffRenderer = class {
-		/**
-		* 渲染详情面板（包含 diff 表格和 metadata）
-		*/
-		renderDetail(entry) {
-			const container = document.createElement("div");
-			container.className = "lv-detail";
-			if (entry.changes && entry.changes.length > 0) container.appendChild(this.renderDiffTable(entry.changes));
-			if (entry.metadata && Object.keys(entry.metadata).length > 0) {
-				const meta = document.createElement("div");
-				meta.className = "lv-metadata";
-				meta.textContent = JSON.stringify(entry.metadata, null, 2);
-				container.appendChild(meta);
-			}
-			return container;
-		}
-		/**
-		* 渲染 Diff 表格
-		*/
-		renderDiffTable(changes) {
-			const table = document.createElement("table");
-			table.className = "lv-diff-table";
-			const thead = document.createElement("thead");
-			thead.innerHTML = `<tr><th>\u5B57\u6BB5</th><th>\u53D8\u66F4\u524D</th><th>\u53D8\u66F4\u540E</th></tr>`;
-			table.appendChild(thead);
-			const tbody = document.createElement("tbody");
-			for (const change of changes) {
-				const tr = document.createElement("tr");
-				const tdField = document.createElement("td");
-				tdField.textContent = change.label || change.field;
-				tr.appendChild(tdField);
-				const tdOld = document.createElement("td");
-				tdOld.className = "lv-diff-old";
-				tdOld.textContent = formatValue(change.oldValue);
-				tr.appendChild(tdOld);
-				const tdNew = document.createElement("td");
-				tdNew.className = "lv-diff-new";
-				tdNew.textContent = formatValue(change.newValue);
-				tr.appendChild(tdNew);
-				tbody.appendChild(tr);
-			}
-			table.appendChild(tbody);
-			return table;
-		}
-	};
-	//#endregion
 	//#region src/styles/index.ts
 	const STYLE_ID = "ldesign-log-viewer-styles";
 	function injectStyles() {
@@ -376,54 +477,54 @@
 	const CSS_TEXT = `
 /* ===== CSS Variables ===== */
 .lv-root {
-  --lv-bg: #ffffff;
-  --lv-bg-secondary: #f7f8fa;
-  --lv-bg-hover: #f0f3ff;
-  --lv-border: #ebedf0;
-  --lv-text: #1a1a2e;
-  --lv-text-secondary: #666;
-  --lv-text-muted: #999;
-  --lv-primary: #4f6ef7;
-  --lv-primary-light: #edf0ff;
-  --lv-shadow: rgba(0, 0, 0, 0.04);
-  --lv-timeline-line: #e0e0e0;
-  --lv-timeline-dot: #4f6ef7;
-  --lv-diff-add-bg: #f0fff4;
-  --lv-diff-add-text: #22863a;
-  --lv-diff-del-bg: #fff5f5;
-  --lv-diff-del-text: #cb2431;
-  --lv-anomaly-bg: #fff2e8;
-  --lv-anomaly-border: #ffbb96;
-  --lv-radius: 8px;
+  --lv-bg: var(--ld-white);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-500);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);
+  --lv-timeline-line: var(--ld-border);
+  --lv-timeline-dot: var(--ld-primary-500);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-300);
+  --lv-radius: var(--ld-radius-md);
   --lv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   --lv-font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
 }
 
 .lv-root[data-theme="dark"] {
-  --lv-bg: #1a1a2e;
-  --lv-bg-secondary: #16213e;
-  --lv-bg-hover: #1e2a4a;
-  --lv-border: #2a2a4a;
-  --lv-text: #e0e0e0;
-  --lv-text-secondary: #a0a0b0;
-  --lv-text-muted: #666680;
-  --lv-primary: #6b85f9;
-  --lv-primary-light: #252545;
-  --lv-shadow: rgba(0, 0, 0, 0.2);
-  --lv-timeline-line: #333355;
-  --lv-timeline-dot: #6b85f9;
-  --lv-diff-add-bg: #0d2818;
-  --lv-diff-add-text: #85e89d;
-  --lv-diff-del-bg: #2d1214;
-  --lv-diff-del-text: #f97583;
-  --lv-anomaly-bg: #2d1a0a;
-  --lv-anomaly-border: #8b5e3c;
+  --lv-bg: var(--ld-bg-surface);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border-strong);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-400);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);
+  --lv-timeline-line: var(--ld-border-strong);
+  --lv-timeline-dot: var(--ld-primary-400);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-700);
 }
 
 /* ===== Root ===== */
 .lv-root {
   font-family: var(--lv-font);
-  font-size: 14px;
+  font-size: var(--ld-px-14);
   color: var(--lv-text);
   background: var(--lv-bg);
   line-height: 1.6;
@@ -433,38 +534,38 @@
 .lv-filter {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  padding: 16px;
+  gap: var(--ld-px-10);
+  padding: var(--ld-px-16);
   background: var(--lv-bg);
-  border: 1px solid var(--lv-border);
+  border: var(--ld-px-1) solid var(--lv-border);
   border-radius: var(--lv-radius);
-  margin-bottom: 16px;
+  margin-bottom: var(--ld-px-16);
   align-items: center;
 }
 
 .lv-filter-item {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: var(--ld-px-6);
+  font-size: var(--ld-px-13);
 }
 
 .lv-filter-label {
   color: var(--lv-text-secondary);
-  font-size: 12px;
+  font-size: var(--ld-px-12);
   white-space: nowrap;
 }
 
 .lv-filter-input {
-  padding: 5px 10px;
-  border: 1px solid var(--lv-border);
-  border-radius: 6px;
-  font-size: 13px;
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
   background: var(--lv-bg);
   color: var(--lv-text);
   outline: none;
   transition: border-color 0.2s;
-  min-width: 120px;
+  min-width: var(--ld-px-120);
 }
 
 .lv-filter-input:focus {
@@ -472,10 +573,10 @@
 }
 
 .lv-filter-select {
-  padding: 5px 10px;
-  border: 1px solid var(--lv-border);
-  border-radius: 6px;
-  font-size: 13px;
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
   background: var(--lv-bg);
   color: var(--lv-text);
   outline: none;
@@ -485,11 +586,11 @@
 .lv-filter-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 5px 14px;
-  font-size: 13px;
-  border: 1px solid var(--lv-border);
-  border-radius: 6px;
+  gap: var(--ld-px-4);
+  padding: var(--ld-px-5) var(--ld-px-14);
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
   background: var(--lv-bg);
   color: var(--lv-text);
   cursor: pointer;
@@ -504,7 +605,7 @@
 .lv-filter-btn--primary {
   background: var(--lv-primary);
   border-color: var(--lv-primary);
-  color: #fff;
+  color: var(--ld-white);
 }
 
 .lv-filter-btn--primary:hover {
@@ -514,135 +615,171 @@
 /* ===== Timeline ===== */
 .lv-timeline {
   position: relative;
-  padding-left: 28px;
+  padding-left: var(--ld-px-28);
 }
 
 .lv-timeline::before {
   content: '';
   position: absolute;
-  left: 9px;
+  left: var(--ld-px-9);
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--ld-px-2);
   background: var(--lv-timeline-line);
 }
 
 .lv-timeline-item {
   position: relative;
-  padding: 0 0 20px 0;
+  padding: 0 0 var(--ld-px-20) 0;
 }
 
 .lv-timeline-dot {
   position: absolute;
-  left: -25px;
-  top: 6px;
-  width: 12px;
-  height: 12px;
+  left: calc(-1 * var(--ld-px-25));
+  top: var(--ld-px-6);
+  width: var(--ld-px-12);
+  height: var(--ld-px-12);
   border-radius: 50%;
   background: var(--lv-bg);
-  border: 2px solid var(--lv-timeline-dot);
+  border: var(--ld-px-2) solid var(--lv-timeline-dot);
   z-index: 1;
 }
 
 .lv-timeline-dot--anomaly {
-  border-color: #ff4d4f;
-  background: #fff1f0;
+  border-color: var(--ld-danger-500);
+  background: var(--ld-danger-50);
 }
 
 .lv-timeline-card {
   background: var(--lv-bg);
-  border: 1px solid var(--lv-border);
+  border: var(--ld-px-1) solid var(--lv-border);
   border-radius: var(--lv-radius);
-  padding: 14px 18px;
+  padding: var(--ld-px-14) var(--ld-px-18);
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 3px var(--lv-shadow);
+  box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);
 }
 
 .lv-timeline-card:hover {
   border-color: var(--lv-primary);
-  box-shadow: 0 2px 8px var(--lv-shadow);
+  box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);
 }
 
 .lv-timeline-card--anomaly {
-  border-left: 3px solid var(--lv-anomaly-border);
+  border-left: var(--ld-px-3) solid var(--lv-anomaly-border);
   background: var(--lv-anomaly-bg);
 }
 
 .lv-timeline-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--ld-px-10);
   flex-wrap: wrap;
-  margin-bottom: 4px;
+  margin-bottom: var(--ld-px-4);
 }
 
 .lv-timeline-time {
-  font-size: 12px;
+  font-size: var(--ld-px-12);
   color: var(--lv-text-muted);
   font-family: var(--lv-font-mono);
 }
 
 .lv-timeline-user {
   font-weight: 600;
-  font-size: 14px;
+  font-size: var(--ld-px-14);
 }
 
 .lv-action-tag {
   display: inline-block;
-  padding: 1px 8px;
-  font-size: 12px;
-  border-radius: 4px;
+  padding: var(--ld-px-1) var(--ld-px-8);
+  font-size: var(--ld-px-12);
+  border-radius: var(--ld-px-4);
   font-weight: 500;
-  color: #fff;
+  color: var(--ld-white);
+}
+
+.lv-action-tag--create,
+.lv-action-tag--approve {
+  background: var(--ld-success-500);
+}
+
+.lv-action-tag--update,
+.lv-action-tag--login {
+  background: var(--ld-primary-500);
+}
+
+.lv-action-tag--delete,
+.lv-action-tag--reject {
+  background: var(--ld-danger-500);
+}
+
+.lv-action-tag--query,
+.lv-action-tag--other {
+  background: var(--ld-text-secondary);
+}
+
+.lv-action-tag--logout {
+  background: var(--ld-primary-700);
+}
+
+.lv-action-tag--export {
+  background: var(--ld-warning-500);
+}
+
+.lv-action-tag--import {
+  background: var(--ld-success-500);
 }
 
 .lv-timeline-module {
-  font-size: 12px;
+  font-size: var(--ld-px-12);
   color: var(--lv-text-secondary);
   background: var(--lv-bg-secondary);
-  padding: 1px 8px;
-  border-radius: 4px;
+  padding: var(--ld-px-1) var(--ld-px-8);
+  border-radius: var(--ld-px-4);
 }
 
 .lv-timeline-ip {
-  font-size: 12px;
+  font-size: var(--ld-px-12);
   color: var(--lv-text-muted);
   font-family: var(--lv-font-mono);
 }
 
 .lv-anomaly-badge {
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 3px;
-  background: #fff2e8;
-  color: #d46b08;
-  border: 1px solid #ffd591;
+  font-size: var(--ld-px-11);
+  padding: var(--ld-px-1) var(--ld-px-6);
+  border-radius: var(--ld-px-3);
+  background: var(--ld-warning-50);
+  color: var(--ld-warning-700);
+  border: var(--ld-px-1) solid var(--ld-warning-300);
 }
 
 .lv-timeline-detail {
-  font-size: 13px;
+  font-size: var(--ld-px-13);
   color: var(--lv-text-secondary);
-  margin-top: 6px;
+  margin-top: var(--ld-px-6);
 }
 
 .lv-timeline-expand-hint {
-  font-size: 12px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--ld-px-12);
   color: var(--lv-primary);
-  margin-top: 6px;
+  margin-top: var(--ld-px-6);
   cursor: pointer;
 }
 
 /* ===== Detail Panel ===== */
 .lv-detail {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px dashed var(--lv-border);
+  margin-top: var(--ld-px-12);
+  padding-top: var(--ld-px-12);
+  border-top: var(--ld-px-1) dashed var(--lv-border);
   animation: lv-slide-down 0.2s ease;
 }
 
 @keyframes lv-slide-down {
-  from { opacity: 0; transform: translateY(-8px); }
+  from { opacity: 0; transform: translateY(calc(-1 * var(--ld-px-8))); }
   to { opacity: 1; transform: translateY(0); }
 }
 
@@ -650,25 +787,25 @@
 .lv-diff-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
-  border: 1px solid var(--lv-border);
-  border-radius: 6px;
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
   overflow: hidden;
 }
 
 .lv-diff-table th {
   background: var(--lv-bg-secondary);
-  padding: 8px 12px;
+  padding: var(--ld-px-8) var(--ld-px-12);
   text-align: left;
   font-weight: 600;
-  font-size: 12px;
+  font-size: var(--ld-px-12);
   color: var(--lv-text-secondary);
-  border-bottom: 1px solid var(--lv-border);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
 }
 
 .lv-diff-table td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--lv-border);
+  padding: var(--ld-px-8) var(--ld-px-12);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
   vertical-align: top;
 }
 
@@ -681,23 +818,23 @@
   color: var(--lv-diff-del-text);
   text-decoration: line-through;
   font-family: var(--lv-font-mono);
-  font-size: 12px;
+  font-size: var(--ld-px-12);
 }
 
 .lv-diff-new {
   background: var(--lv-diff-add-bg);
   color: var(--lv-diff-add-text);
   font-family: var(--lv-font-mono);
-  font-size: 12px;
+  font-size: var(--ld-px-12);
 }
 
 /* ===== Metadata ===== */
 .lv-metadata {
-  margin-top: 10px;
+  margin-top: var(--ld-px-10);
   background: var(--lv-bg-secondary);
-  border-radius: 6px;
-  padding: 10px 14px;
-  font-size: 12px;
+  border-radius: var(--ld-px-6);
+  padding: var(--ld-px-10) var(--ld-px-14);
+  font-size: var(--ld-px-12);
   font-family: var(--lv-font-mono);
   white-space: pre-wrap;
   word-break: break-all;
@@ -709,21 +846,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: 16px 0;
+  gap: var(--ld-px-6);
+  padding: var(--ld-px-16) 0;
 }
 
 .lv-pagination-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--lv-border);
-  border-radius: 6px;
+  width: var(--ld-px-32);
+  height: var(--ld-px-32);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
   background: var(--lv-bg);
   color: var(--lv-text);
-  font-size: 13px;
+  font-size: var(--ld-px-13);
   cursor: pointer;
   transition: all 0.15s;
 }
@@ -736,7 +873,7 @@
 .lv-pagination-btn--active {
   background: var(--lv-primary);
   border-color: var(--lv-primary);
-  color: #fff;
+  color: var(--ld-white);
 }
 
 .lv-pagination-btn:disabled {
@@ -745,27 +882,71 @@
 }
 
 .lv-pagination-info {
-  font-size: 13px;
+  font-size: var(--ld-px-13);
   color: var(--lv-text-secondary);
-  margin: 0 8px;
+  margin: 0 var(--ld-px-8);
 }
 
 /* ===== Empty state ===== */
 .lv-empty {
   text-align: center;
-  padding: 48px 16px;
+  padding: var(--ld-px-48) var(--ld-px-16);
   color: var(--lv-text-muted);
-  font-size: 14px;
+  font-size: var(--ld-px-14);
 }
 
 .lv-empty-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
+  font-size: var(--ld-px-48);
+  margin-bottom: var(--ld-px-12);
   opacity: 0.3;
 }
 `;
 	//#endregion
 	//#region src/core/LogViewer.ts
+	const DEFAULT_PAGE_SIZE = 20;
+	const MAX_PAGE_SIZE = 1e3;
+	function normalizePageSize(value, fallback = DEFAULT_PAGE_SIZE) {
+		const pageSize = Number(value);
+		if (!Number.isFinite(pageSize) || pageSize <= 0) return fallback;
+		return Math.min(MAX_PAGE_SIZE, Math.max(1, Math.floor(pageSize)));
+	}
+	function normalizePage(value) {
+		const page = Number(value);
+		if (!Number.isFinite(page) || page < 1) return 1;
+		return Math.floor(page);
+	}
+	function cloneEntries(entries) {
+		if (entries === void 0) return [];
+		if (!Array.isArray(entries)) throw new TypeError("[LogViewer] data must be an array");
+		return entries.map((entry, index) => {
+			if (!entry || typeof entry !== "object") throw new TypeError(`[LogViewer] data[${index}] must be an object`);
+			const cloned = deepClone(entry);
+			const id = String(cloned.id ?? "").trim();
+			if (!id) throw new TypeError(`[LogViewer] data[${index}].id must be a non-empty string`);
+			return {
+				...cloned,
+				id,
+				user: String(cloned.user ?? ""),
+				module: String(cloned.module ?? ""),
+				changes: Array.isArray(cloned.changes) ? cloned.changes : void 0
+			};
+		});
+	}
+	function isActionType(value) {
+		return Object.keys(ACTION_LABELS).includes(value);
+	}
+	function sourceEntries(payload) {
+		if (Array.isArray(payload)) return payload;
+		if (!payload || typeof payload !== "object") throw new TypeError("[LogViewer] dataSource response must be an array");
+		const record = payload;
+		for (const key of [
+			"data",
+			"logs",
+			"items",
+			"entries"
+		]) if (Array.isArray(record[key])) return record[key];
+		throw new TypeError("[LogViewer] dataSource response must contain an array");
+	}
 	var LogViewer = class {
 		constructor(config) {
 			this.emitter = new EventEmitter();
@@ -777,89 +958,107 @@
 			this.filter = {};
 			this.pagination = {
 				page: 1,
-				pageSize: 20
+				pageSize: DEFAULT_PAGE_SIZE
 			};
 			this.theme = "light";
 			this.expandedIds = /* @__PURE__ */ new Set();
+			this.filterEl = null;
 			this.timelineEl = null;
 			this.paginationEl = null;
 			this.destroyed = false;
-			this.config = config;
+			this.requestId = 0;
+			this.abortController = null;
+			if (typeof document === "undefined") throw new Error("[LogViewer] A browser document is required");
 			const container = typeof config.container === "string" ? document.querySelector(config.container) : config.container;
-			if (!container) throw new Error(`[LogViewer] Container not found: ${config.container}`);
+			if (!container) throw new Error(`[LogViewer] Container not found: ${String(config.container)}`);
+			this.config = { ...config };
+			this.theme = config.theme === "dark" ? "dark" : "light";
+			this.pagination = {
+				page: normalizePage(config.pagination?.page),
+				pageSize: normalizePageSize(config.pageSize ?? config.pagination?.pageSize)
+			};
+			this.filter = deepClone(config.filter || {});
+			this.data = cloneEntries(config.data);
 			injectStyles();
 			this.root = document.createElement("div");
 			this.root.className = "lv-root";
-			container.appendChild(this.root);
-			this.theme = config.theme || "light";
 			this.root.setAttribute("data-theme", this.theme);
-			if (config.pageSize) this.pagination.pageSize = config.pageSize;
-			if (config.pagination) Object.assign(this.pagination, config.pagination);
-			if (config.filter) this.filter = deepClone(config.filter);
-			if (config.data) this.data = [...config.data];
-			this.applyFilterAndRender();
+			container.appendChild(this.root);
 			this.bindEvents();
+			this.applyFilterAndRender();
+			if (config.dataSource) this.loadData().catch(() => void 0);
 		}
 		getData() {
-			return [...this.data];
+			return deepClone(this.data);
 		}
 		setData(entries) {
-			this.data = [...entries];
+			if (this.destroyed) return;
+			this.data = cloneEntries(entries);
 			this.pagination.page = 1;
+			this.expandedIds.clear();
 			this.applyFilterAndRender();
-			this.emitter.emit("data:change", this.data);
+			this.emitter.emit("data:change", this.getData());
 		}
 		appendData(entries) {
-			this.data.push(...entries);
+			if (this.destroyed) return;
+			this.data.push(...cloneEntries(entries));
 			this.applyFilterAndRender();
-			this.emitter.emit("data:change", this.data);
+			this.emitter.emit("data:change", this.getData());
 		}
 		getFilter() {
 			return deepClone(this.filter);
 		}
 		setFilter(filter) {
-			this.filter = deepClone(filter);
+			if (this.destroyed) return;
+			this.filter = deepClone(filter || {});
 			this.pagination.page = 1;
 			this.applyFilterAndRender();
-			this.emitter.emit("filter:change", this.filter);
-			this.config.onFilterChange?.(this.filter);
+			const current = this.getFilter();
+			this.emitter.emit("filter:change", current);
+			this.config.onFilterChange?.(current);
 		}
 		resetFilter() {
-			this.filter = {};
-			this.pagination.page = 1;
-			this.applyFilterAndRender();
-			this.emitter.emit("filter:change", this.filter);
+			if (this.destroyed) return;
+			this.setFilter({});
 		}
 		getTheme() {
 			return this.theme;
 		}
 		setTheme(theme) {
+			if (this.destroyed) return;
+			if (theme !== "light" && theme !== "dark") throw new TypeError("[LogViewer] theme must be light or dark");
+			if (this.theme === theme) return;
 			this.theme = theme;
 			this.root.setAttribute("data-theme", theme);
 			this.emitter.emit("theme:change", theme);
 			this.config.onThemeChange?.(theme);
 		}
 		expandEntry(id) {
+			if (this.destroyed || this.expandedIds.has(id)) return;
 			this.expandedIds.add(id);
-			const entry = this.data.find((e) => e.id === id);
-			if (entry) this.emitter.emit("entry:expand", entry);
+			const entry = this.data.find((item) => item.id === id);
+			if (entry) this.emitter.emit("entry:expand", deepClone(entry));
 			this.renderTimeline();
 		}
 		collapseEntry(id) {
+			if (this.destroyed || !this.expandedIds.has(id)) return;
 			this.expandedIds.delete(id);
-			const entry = this.data.find((e) => e.id === id);
-			if (entry) this.emitter.emit("entry:collapse", entry);
+			const entry = this.data.find((item) => item.id === id);
+			if (entry) this.emitter.emit("entry:collapse", deepClone(entry));
 			this.renderTimeline();
 		}
 		collapseAll() {
+			if (this.destroyed || this.expandedIds.size === 0) return;
 			this.expandedIds.clear();
 			this.renderTimeline();
 		}
 		goToPage(page) {
-			const totalPages = Math.ceil(this.filteredData.length / this.pagination.pageSize);
-			if (page < 1 || page > totalPages) return;
-			this.pagination.page = page;
-			this.emitter.emit("page:change", page);
+			if (this.destroyed) return;
+			const totalPages = Math.max(1, Math.ceil(this.filteredData.length / this.pagination.pageSize));
+			const nextPage = Math.min(totalPages, Math.max(1, normalizePage(page)));
+			if (nextPage === this.pagination.page) return;
+			this.pagination.page = nextPage;
+			this.emitter.emit("page:change", nextPage);
 			this.renderTimeline();
 		}
 		getPagination() {
@@ -872,17 +1071,55 @@
 			return this.emitter.on(event, callback);
 		}
 		refresh() {
-			this.applyFilterAndRender();
+			if (!this.destroyed) this.applyFilterAndRender();
+		}
+		async loadData() {
+			if (this.destroyed || !this.config.dataSource) return;
+			const currentRequest = ++this.requestId;
+			this.abortController?.abort();
+			this.abortController = typeof AbortController !== "undefined" ? new AbortController() : null;
+			try {
+				let payload;
+				if (typeof this.config.dataSource === "function") payload = await this.config.dataSource();
+				else {
+					if (typeof fetch !== "function") throw new Error("[LogViewer] fetch is unavailable");
+					const response = await fetch(this.config.dataSource, { signal: this.abortController?.signal });
+					if (!response.ok) throw new Error(`[LogViewer] dataSource request failed: ${response.status}`);
+					payload = await response.json();
+				}
+				if (this.destroyed || currentRequest !== this.requestId) return;
+				this.setData(sourceEntries(payload));
+			} catch (error) {
+				if (this.destroyed || typeof DOMException !== "undefined" && error instanceof DOMException && error.name === "AbortError") return;
+				this.config.onError?.(error);
+				this.emitter.emit("error", error);
+				throw error;
+			}
 		}
 		destroy() {
 			if (this.destroyed) return;
 			this.destroyed = true;
+			this.requestId++;
+			this.abortController?.abort();
+			this.abortController = null;
 			this.emitter.removeAllListeners();
+			this.expandedIds.clear();
+			this.root.replaceChildren();
 			this.root.remove();
 		}
 		applyFilterAndRender() {
 			this.filteredData = this.filterEngine.filter(this.data, this.filter);
-			this.filteredData.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+			this.filteredData = this.filteredData.map((entry, index) => ({
+				entry,
+				index
+			})).sort((a, b) => {
+				const left = new Date(a.entry.timestamp).getTime();
+				const right = new Date(b.entry.timestamp).getTime();
+				const leftTime = Number.isFinite(left) ? left : Number.MIN_SAFE_INTEGER;
+				return (Number.isFinite(right) ? right : Number.MIN_SAFE_INTEGER) - leftTime || a.index - b.index;
+			}).map(({ entry }) => entry);
+			const totalPages = Math.max(1, Math.ceil(this.filteredData.length / this.pagination.pageSize));
+			this.pagination.page = Math.min(this.pagination.page, totalPages);
 			this.pagination.total = this.filteredData.length;
 			this.renderTimeline();
 		}
@@ -891,43 +1128,121 @@
 			const start = (page - 1) * pageSize;
 			return this.filteredData.slice(start, start + pageSize);
 		}
+		renderFilterBar() {
+			if (this.config.showFilter === false) return null;
+			const filter = document.createElement("div");
+			filter.className = "lv-filter";
+			filter.setAttribute("role", "search");
+			const addInput = (field, label) => {
+				const item = document.createElement("label");
+				item.className = "lv-filter-item";
+				const text = document.createElement("span");
+				text.className = "lv-filter-label";
+				text.textContent = label;
+				const input = document.createElement("input");
+				input.className = "lv-filter-input";
+				input.type = "search";
+				input.value = String(this.filter[field] || "");
+				input.setAttribute("data-filter-field", field);
+				input.setAttribute("aria-label", label);
+				item.append(text, input);
+				filter.appendChild(item);
+			};
+			addInput("keyword", this.config.locale === "en-US" ? "Keyword" : "关键词");
+			addInput("user", this.config.locale === "en-US" ? "User" : "用户");
+			addInput("module", this.config.locale === "en-US" ? "Module" : "模块");
+			addInput("ip", "IP");
+			const actionItem = document.createElement("label");
+			actionItem.className = "lv-filter-item";
+			const actionLabel = document.createElement("span");
+			actionLabel.className = "lv-filter-label";
+			actionLabel.textContent = this.config.locale === "en-US" ? "Action" : "操作";
+			const action = document.createElement("select");
+			action.className = "lv-filter-select";
+			action.setAttribute("data-filter-field", "action");
+			action.setAttribute("aria-label", actionLabel.textContent);
+			const allOption = document.createElement("option");
+			allOption.value = "";
+			allOption.textContent = this.config.locale === "en-US" ? "All" : "全部";
+			action.appendChild(allOption);
+			for (const [value, label] of Object.entries(ACTION_LABELS)) {
+				const option = document.createElement("option");
+				option.value = value;
+				option.textContent = label;
+				action.appendChild(option);
+			}
+			action.value = Array.isArray(this.filter.action) ? "" : this.filter.action || "";
+			actionItem.append(actionLabel, action);
+			filter.appendChild(actionItem);
+			const reset = document.createElement("button");
+			reset.type = "button";
+			reset.className = "lv-filter-btn";
+			reset.setAttribute("data-filter-reset", "true");
+			reset.textContent = this.config.locale === "en-US" ? "Reset" : "重置";
+			filter.appendChild(reset);
+			return filter;
+		}
+		updateFilterField(field, value) {
+			const next = this.getFilter();
+			if (!value.trim()) delete next[field];
+			else if (field === "action" && isActionType(value)) next.action = value;
+			else if (field !== "action") next[field] = value;
+			this.setFilter(next);
+		}
 		renderTimeline() {
 			if (this.destroyed) return;
 			const pageData = this.getPageData();
-			const newTimeline = this.timelineRenderer.render(pageData, this.expandedIds);
-			for (const entry of pageData) if (this.expandedIds.has(entry.id)) {
-				const itemEl = newTimeline.querySelector(`[data-id="${entry.id}"] .lv-timeline-card`);
-				if (itemEl) itemEl.appendChild(this.diffRenderer.renderDetail(entry));
+			const timeline = this.timelineRenderer.render(pageData, this.expandedIds, {
+				showDiff: this.config.showDiff,
+				showAnomalyBadge: this.config.showAnomalyBadge,
+				locale: this.config.locale
+			});
+			if (this.config.showDiff !== false) for (const entry of pageData) {
+				if (!this.expandedIds.has(entry.id)) continue;
+				([...timeline.children].find((child) => child.getAttribute("data-id") === entry.id)?.querySelector(".lv-timeline-card"))?.appendChild(this.diffRenderer.renderDetail(entry));
 			}
-			if (this.timelineEl) this.root.removeChild(this.timelineEl);
-			this.timelineEl = newTimeline;
-			this.root.appendChild(this.timelineEl);
-			const newPagination = this.timelineRenderer.renderPagination(this.pagination.page, this.pagination.pageSize, this.filteredData.length);
-			if (this.paginationEl) this.root.removeChild(this.paginationEl);
-			this.paginationEl = newPagination;
-			this.root.appendChild(this.paginationEl);
+			this.filterEl?.remove();
+			this.timelineEl?.remove();
+			this.paginationEl?.remove();
+			this.filterEl = this.renderFilterBar();
+			this.timelineEl = timeline;
+			this.paginationEl = this.timelineRenderer.renderPagination(this.pagination.page, this.pagination.pageSize, this.filteredData.length);
+			if (this.filterEl) this.root.appendChild(this.filterEl);
+			this.root.append(this.timelineEl, this.paginationEl);
 		}
 		bindEvents() {
-			this.root.addEventListener("click", (e) => {
-				const target = e.target;
-				const card = target.closest(".lv-timeline-card");
-				if (card) {
-					const id = card.closest(".lv-timeline-item")?.getAttribute("data-id");
-					if (!id) return;
-					const entry = this.filteredData.find((en) => en.id === id);
-					if (!entry) return;
-					if (target.classList.contains("lv-timeline-expand-hint")) {
-						if (this.expandedIds.has(id)) this.collapseEntry(id);
-						else this.expandEntry(id);
-						return;
-					}
-					this.emitter.emit("entry:click", entry);
-					this.config.onEntryClick?.(entry);
+			this.root.addEventListener("change", (event) => {
+				const target = event.target;
+				if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLSelectElement)) return;
+				const field = target.getAttribute("data-filter-field");
+				if (field) this.updateFilterField(field, target.value);
+			});
+			this.root.addEventListener("click", (event) => {
+				const target = event.target;
+				if (!(target instanceof Element)) return;
+				if (target.closest("[data-filter-reset]")) {
+					this.resetFilter();
+					return;
+				}
+				const hint = target.closest(".lv-timeline-expand-hint");
+				const id = (hint?.closest(".lv-timeline-item") || target.closest(".lv-timeline-item"))?.getAttribute("data-id");
+				if (hint && id) {
+					if (this.expandedIds.has(id)) this.collapseEntry(id);
+					else this.expandEntry(id);
+					return;
+				}
+				const pageButton = target.closest(".lv-pagination-btn");
+				if (pageButton && !pageButton.disabled) {
+					const page = Number(pageButton.getAttribute("data-page"));
+					if (Number.isFinite(page)) this.goToPage(page);
+					return;
 				}
-				const pageBtn = target.closest(".lv-pagination-btn");
-				if (pageBtn && !pageBtn.disabled) {
-					const page = parseInt(pageBtn.getAttribute("data-page") || "1", 10);
-					this.goToPage(page);
+				if (!target.closest(".lv-timeline-card") || !id) return;
+				const entry = this.filteredData.find((candidate) => candidate.id === id);
+				if (entry) {
+					const snapshot = deepClone(entry);
+					this.emitter.emit("entry:click", snapshot);
+					this.config.onEntryClick?.(snapshot);
 				}
 			});
 		}