@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/kite_console/static/js/tests/modules/redis.js

@@ -0,0 +1,178 @@
+/**
+ * Redis 模块测试 — 覆盖所有14个命令
+ */
+
+async function testRedisModule() {
+  const runner = window.testRunner;
+  const client = runner.kernelClient;
+
+  runner.log('【Redis 模块测试】', 'section');
+
+  // ── 模块存在性 ──
+  await runner.runTest('Redis 模块存在性检查', async () => {
+    const result = await client.call('launcher.list_modules', {});
+    const redis = result.modules.find(m => m.name === 'redis');
+    if (!redis) throw new Error('Redis 模块未找到');
+  });
+
+  // ── RPC 方法注册验证 ──
+  runner.log('', 'info');
+  runner.log('RPC 方法注册验证', 'subsection');
+
+  const rpcMethods = [
+    'health', 'status', 'ping', 'get', 'set', 'del', 'expire',
+    'hget', 'hset', 'hdel', 'hgetall',
+    'sadd', 'srem', 'smembers', 'publish', 'info'
+  ];
+
+  for (const method of rpcMethods) {
+    const namespace = ['health', 'status'].includes(method) ? 'module' : 'redis';
+    await runner.runTest(`redis.${method} 注册检查`, async () => {
+      const result = await client.call('registry.lookup', {
+        field: `tools.rpc.${namespace}.${method}`,
+        module: 'redis'
+      });
+      if (!result.results || result.results.length === 0) throw new Error('未找到注册');
+    });
+  }
+
+  // ── 事件注册验证 ──
+  runner.log('', 'info');
+  runner.log('事件注册验证', 'subsection');
+
+  await runner.runTest('system.redis_ready 事件注册', async () => {
+    const result = await client.call('registry.lookup', {
+      field: 'events_publish.system.redis_ready',
+      module: 'redis'
+    });
+    if (!result.results || result.results.length === 0) throw new Error('事件未注册');
+  });
+
+  // ── 注册中心连接信息验证 ──
+  runner.log('', 'info');
+  runner.log('注册中心连接信息验证', 'subsection');
+
+  await runner.runTest('注册中心包含 Redis 连接信息 (services.redis)', async () => {
+    const result = await client.call('registry.lookup', {
+      field: 'services.redis',
+      module: 'redis'
+    });
+    if (!result.results || result.results.length === 0) throw new Error('注册中心无 Redis 连接信息');
+    const info = result.results[0].value;
+    if (!info.host) throw new Error('缺少 host');
+    if (!info.port) throw new Error('缺少 port');
+    if (!info.protocol) throw new Error('缺少 protocol');
+    runner.log(`  连接信息: ${info.host}:${info.port} (${info.protocol})`, 'info');
+  });
+
+  // ── 字符串命令测试 ──
+  runner.log('', 'info');
+  runner.log('字符串命令测试 (PING/GET/SET/DEL/EXPIRE)', 'subsection');
+
+  await runner.runTest('redis.ping', async () => {
+    const result = await client.call('redis.ping', {});
+    if (result.status !== 'ok') throw new Error('Ping 失败');
+    if (result.message !== 'PONG') throw new Error('响应错误');
+  });
+
+  await runner.runTest('redis.set + redis.get', async () => {
+    await client.call('redis.set', { key: 'test:str', value: 'hello' });
+    const result = await client.call('redis.get', { key: 'test:str' });
+    if (result.value !== 'hello') throw new Error(`期望 hello, 得到 ${result.value}`);
+  });
+
+  await runner.runTest('redis.get 不存在的 key', async () => {
+    const result = await client.call('redis.get', { key: 'test:nonexist:' + Date.now() });
+    if (result.value !== null && result.value !== undefined) throw new Error('应该返回 null');
+  });
+
+  await runner.runTest('redis.del', async () => {
+    await client.call('redis.set', { key: 'test:del_me', value: 'tmp' });
+    const delResult = await client.call('redis.del', { key: 'test:del_me' });
+    if (delResult.deleted < 1) throw new Error('DEL 返回 0');
+    const getResult = await client.call('redis.get', { key: 'test:del_me' });
+    if (getResult.value !== null && getResult.value !== undefined) throw new Error('DEL 后仍能 GET');
+  });
+
+  await runner.runTest('redis.expire', async () => {
+    await client.call('redis.set', { key: 'test:expire_me', value: 'tmp' });
+    const result = await client.call('redis.expire', { key: 'test:expire_me', seconds: 3600 });
+    if (result.result < 1) throw new Error('EXPIRE 返回 0');
+  });
+
+  // ── 哈希命令测试 ──
+  runner.log('', 'info');
+  runner.log('哈希命令测试 (HSET/HGET/HDEL/HGETALL)', 'subsection');
+
+  await runner.runTest('redis.hset + redis.hget', async () => {
+    await client.call('redis.hset', { key: 'test:hash', field: 'name', value: 'kite' });
+    const result = await client.call('redis.hget', { key: 'test:hash', field: 'name' });
+    if (result.value !== 'kite') throw new Error(`期望 kite, 得到 ${result.value}`);
+  });
+
+  await runner.runTest('redis.hgetall', async () => {
+    await client.call('redis.hset', { key: 'test:hash2', field: 'a', value: '1' });
+    await client.call('redis.hset', { key: 'test:hash2', field: 'b', value: '2' });
+    const result = await client.call('redis.hgetall', { key: 'test:hash2' });
+    if (!result.data) throw new Error('缺少 data');
+    if (result.data.a !== '1' || result.data.b !== '2') throw new Error('HGETALL 数据不匹配');
+  });
+
+  await runner.runTest('redis.hdel', async () => {
+    await client.call('redis.hset', { key: 'test:hash3', field: 'del_me', value: 'tmp' });
+    const delResult = await client.call('redis.hdel', { key: 'test:hash3', field: 'del_me' });
+    if (delResult.deleted < 1) throw new Error('HDEL 返回 0');
+    const getResult = await client.call('redis.hget', { key: 'test:hash3', field: 'del_me' });
+    if (getResult.value !== null && getResult.value !== undefined) throw new Error('HDEL 后仍能 HGET');
+  });
+
+  // ── 集合命令测试 ──
+  runner.log('', 'info');
+  runner.log('集合命令测试 (SADD/SREM/SMEMBERS)', 'subsection');
+
+  await runner.runTest('redis.sadd + redis.smembers', async () => {
+    await client.call('redis.sadd', { key: 'test:set', members: ['a', 'b', 'c'] });
+    const result = await client.call('redis.smembers', { key: 'test:set' });
+    if (!result.members) throw new Error('缺少 members');
+    const sorted = result.members.sort();
+    if (sorted.join(',') !== 'a,b,c') throw new Error(`期望 a,b,c, 得到 ${sorted.join(',')}`);
+  });
+
+  await runner.runTest('redis.sadd 重复成员', async () => {
+    const result = await client.call('redis.sadd', { key: 'test:set', members: ['a', 'd'] });
+    if (result.added !== 1) throw new Error(`期望添加1个, 实际 ${result.added}`);
+  });
+
+  await runner.runTest('redis.srem', async () => {
+    await client.call('redis.sadd', { key: 'test:set2', members: ['x', 'y', 'z'] });
+    const remResult = await client.call('redis.srem', { key: 'test:set2', members: ['y'] });
+    if (remResult.removed !== 1) throw new Error('SREM 返回错误');
+    const members = await client.call('redis.smembers', { key: 'test:set2' });
+    if (members.members.includes('y')) throw new Error('SREM 后仍包含 y');
+  });
+
+  // ── 发布命令测试 ──
+  runner.log('', 'info');
+  runner.log('发布命令测试 (PUBLISH)', 'subsection');
+
+  await runner.runTest('redis.publish', async () => {
+    const result = await client.call('redis.publish', { channel: 'test:channel', message: 'hello' });
+    if (result.receivers === undefined) throw new Error('缺少 receivers');
+  });
+
+  // ── 信息查询测试 ──
+  runner.log('', 'info');
+  runner.log('信息查询测试 (INFO)', 'subsection');
+
+  await runner.runTest('redis.info', async () => {
+    const result = await client.call('redis.info', {});
+    if (!result.host) throw new Error('缺少 host');
+    if (!result.port) throw new Error('缺少 port');
+    if (!result.protocol) throw new Error('缺少 protocol');
+    if (!result.type) throw new Error('缺少 type');
+  });
+
+  runner.log('');
+}
+
+window.testRedisModule = testRedisModule;

package/extensions/services/kite_console/static/js/tests/modules/watchdog.js

@@ -0,0 +1,60 @@
+/**
+ * Watchdog 模块测试
+ */
+
+async function testWatchdogModule() {
+  const runner = window.testRunner;
+  const client = runner.kernelClient;
+
+  runner.log('【Watchdog 模块测试】', 'section');
+
+  // 模块存在性检查
+  await runner.runTest('Watchdog 模块存在性检查', async () => {
+    const result = await client.call('launcher.list_modules', {});
+    const watchdog = result.modules.find(m => m.name === 'watchdog');
+    if (!watchdog) throw new Error('Watchdog 模块未找到');
+  });
+
+  // RPC 方法注册验证
+  runner.log('', 'info');
+  runner.log('RPC 方法注册验证', 'subsection');
+
+  const rpcMethods = ['health', 'status'];
+
+  for (const method of rpcMethods) {
+    await runner.runTest(`watchdog.${method} 注册检查`, async () => {
+      const result = await client.call('registry.lookup', {
+        field: `tools.rpc.module.${method}`,
+        module: 'watchdog'
+      });
+      if (!result.results || result.results.length === 0) throw new Error('未找到注册');
+    });
+  }
+
+  // 事件注册验证
+  runner.log('', 'info');
+  runner.log('事件注册验证', 'subsection');
+
+  const events = [
+    'watchdog.module.unhealthy',
+    'watchdog.module.recovered',
+    'watchdog.module.resource_critical',
+    'watchdog.module.resource_warning',
+    'watchdog.module.resource_recovered',
+    'watchdog.alert'
+  ];
+
+  for (const event of events) {
+    await runner.runTest(`${event} 事件注册`, async () => {
+      const result = await client.call('registry.lookup', {
+        field: `events_publish.${event}`,
+        module: 'watchdog'
+      });
+      if (!result.results || result.results.length === 0) throw new Error('事件未注册');
+    });
+  }
+
+  runner.log('');
+}
+
+window.testWatchdogModule = testWatchdogModule;

package/extensions/services/kite_console/static/js/tests/modules/web.js

@@ -0,0 +1,70 @@
+/**
+ * Web 模块测试
+ */
+
+async function testWebModule() {
+  const runner = window.testRunner;
+  const client = runner.kernelClient;
+
+  runner.log('【Web 模块测试】', 'section');
+
+  // 模块存在性检查
+  await runner.runTest('Web 模块存在性检查', async () => {
+    const result = await client.call('launcher.list_modules', {});
+    const web = result.modules.find(m => m.name === 'web');
+    if (!web) throw new Error('Web 模块未找到');
+  });
+
+  // RPC 方法注册验证（可能未注册，跳过）
+  runner.log('', 'info');
+  runner.log('RPC 方法注册验证', 'subsection');
+
+  const rpcMethods = [
+    { method: 'health', path: 'tools.rpc.module.health' },
+    { method: 'status', path: 'tools.rpc.module.status' },
+    { method: 'list_tokens', path: 'tools.rpc.web.list_tokens' },
+    { method: 'revoke_token', path: 'tools.rpc.web.revoke_token' }
+  ];
+
+  for (const { method, path } of rpcMethods) {
+    try {
+      const result = await client.call('registry.lookup', {
+        field: path,
+        module: 'web'
+      });
+      if (!result.results || result.results.length === 0) {
+        runner.skip(`web.${method} 注册检查 (未注册)`);
+      } else {
+        runner.pass(`web.${method} 注册检查`);
+      }
+    } catch (err) {
+      runner.skip(`web.${method} 注册检查 (查询失败)`);
+    }
+  }
+
+  // 事件注册验证（可能未注册，跳过）
+  runner.log('', 'info');
+  runner.log('事件注册验证', 'subsection');
+
+  const events = ['web.started', 'web.test'];
+
+  for (const event of events) {
+    try {
+      const result = await client.call('registry.lookup', {
+        field: `events_publish.${event}`,
+        module: 'web'
+      });
+      if (!result.results || result.results.length === 0) {
+        runner.skip(`${event} 事件注册 (未注册)`);
+      } else {
+        runner.pass(`${event} 事件注册`);
+      }
+    } catch (err) {
+      runner.skip(`${event} 事件注册 (查询失败)`);
+    }
+  }
+
+  runner.log('');
+}
+
+window.testWebModule = testWebModule;

package/extensions/services/kite_console/static/js/tests/test-runner.js

@@ -0,0 +1,123 @@
+/**
+ * Kite 测试运行器
+ * 支持模块测试、集成测试和完整测试
+ */
+
+class TestRunner {
+  constructor() {
+    this.stats = { total: 0, passed: 0, failed: 0, skipped: 0 };
+    this.logs = [];
+    this.errorLogs = [];
+    this.kernelClient = null;
+  }
+
+  // 初始化（传入 kernelClient）
+  init(kernelClient) {
+    this.kernelClient = kernelClient;
+  }
+
+  // 重置统计
+  reset() {
+    this.stats = { total: 0, passed: 0, failed: 0, skipped: 0 };
+    this.logs = [];
+    this.errorLogs = [];
+  }
+
+  // 记录日志
+  log(message, type = 'info') {
+    const timestamp = new Date().toISOString().replace('T', ' ').substring(0, 23);
+    const entry = { timestamp, message, type };
+    this.logs.push(entry);
+    if (type === 'fail') this.errorLogs.push(entry);
+    this._outputLog(entry);
+  }
+
+  // 输出到页面
+  _outputLog(entry) {
+    const output = document.getElementById('test-output');
+    if (!output) return;
+
+    const colors = {
+      info: '#9cdcfe', pass: '#4ec9b0', fail: '#f48771',
+      skip: '#ce9178', section: '#dcdcaa', subsection: '#c586c0'
+    };
+    const prefix = { pass: '✓ ', fail: '✗ ', skip: '⊘ ' }[entry.type] || '';
+    const timestampPrefix = ['pass', 'fail', 'skip'].includes(entry.type) ? `[${entry.timestamp}] ` : '';
+
+    output.innerHTML += `<div style="color: ${colors[entry.type] || colors.info}">${timestampPrefix}${prefix}${entry.message}</div>`;
+    output.scrollTop = output.scrollHeight;
+  }
+
+  // 断言通过
+  pass(name) {
+    this.stats.total++;
+    this.stats.passed++;
+    this.log(name, 'pass');
+  }
+
+  // 断言失败
+  fail(name, error) {
+    this.stats.total++;
+    this.stats.failed++;
+    this.log(`${name}: ${error}`, 'fail');
+  }
+
+  // 跳过测试
+  skip(name, reason) {
+    this.stats.total++;
+    this.stats.skipped++;
+    this.log(`${name} (${reason})`, 'skip');
+  }
+
+  // 运行单个测试
+  async runTest(name, testFn) {
+    try {
+      await testFn();
+      this.pass(name);
+    } catch (error) {
+      this.fail(name, error.message);
+    }
+  }
+
+  // 生成测试报告
+  generateReport() {
+    const { total, passed, failed, skipped } = this.stats;
+    const passRate = total > 0 ? ((passed / total) * 100).toFixed(1) : 0;
+
+    return {
+      summary: { total, passed, failed, skipped, passRate },
+      fullLog: this.logs,
+      errorLog: this.errorLogs
+    };
+  }
+
+  // 上传日志到服务器
+  async uploadLog(testType) {
+    const content = this.logs.map(log => {
+      const prefix = { pass: '✓', fail: '✗', skip: '⊘' }[log.type] || '';
+      const timestampPrefix = ['pass', 'fail', 'skip'].includes(log.type) ? `[${log.timestamp}] ` : '';
+      return `${timestampPrefix}${prefix} ${log.message}`;
+    }).join('\n');
+
+    try {
+      const response = await fetch('/api/save_test_log', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: content,
+          test_name: testType
+        })
+      });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      const result = await response.json();
+      this.log(`✓ 日志已保存: ${result.log_path}`, 'pass');
+    } catch (err) {
+      this.log(`✗ 保存日志失败: ${err.message}`, 'fail');
+    }
+  }
+}
+
+// 全局测试运行器实例
+window.testRunner = new TestRunner();

package/extensions/services/kite_console/static/js/virtual-list.js

@@ -0,0 +1,200 @@
+/**
+ * 虚拟列表组件 - 用于高性能渲染大量事件日志
+ * 新消息追加到底部，滚动条在底部时自动跟随
+ */
+class VirtualList {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.content = container.querySelector(options.contentSelector || '#event-list-content');
+    this.emptyState = container.querySelector(options.emptySelector || '#event-list-empty');
+
+    // 计数标签（可选外部传入）
+    this.countLabelEl = options.countLabelEl || null;
+
+    // 配置项
+    this.itemHeight = options.itemHeight || 48;
+    this.buffer = options.buffer || 5;
+    this.onItemClick = options.onItemClick || (() => {});
+
+    // 数据
+    this.filteredItems = [];
+
+    // 渲染状态
+    this.scrollTop = 0;
+    this.containerHeight = 0;
+
+    // 自动跟随：滚动条在底部时自动滚到最新
+    this.autoFollow = true;
+    this.followThreshold = 10; // 距底部多少 px 内算"在底部"
+
+    // 绑定滚动事件
+    this.container.addEventListener('scroll', () => {
+      this.scrollTop = this.container.scrollTop;
+      // 判断是否在底部
+      const maxScroll = this.container.scrollHeight - this.container.clientHeight;
+      this.autoFollow = (maxScroll - this.scrollTop) <= this.followThreshold;
+      this.render(false);
+    });
+
+    this.updateContainerHeight();
+  }
+
+  /**
+   * 设置数据源（已按时间正序排列，旧→新）
+   */
+  setItems(items) {
+    this.filteredItems = items;
+    this.render(true);
+  }
+
+  updateContainerHeight() {
+    this.containerHeight = this.container.clientHeight;
+  }
+
+  /**
+   * 渲染列表
+   * @param {boolean} dataChanged - 数据是否变化（用于判断是否需要自动滚动）
+   */
+  render(dataChanged = false) {
+    const itemCount = this.filteredItems.length;
+
+    // 更新计数
+    const countLabel = this.countLabelEl || document.getElementById('event-count-label');
+    if (countLabel) countLabel.textContent = `共 ${itemCount} 条`;
+
+    // 空状态
+    if (itemCount === 0) {
+      if (this.content) {
+        this.content.innerHTML = '';
+        this.content.style.height = '0px';
+      }
+      if (this.emptyState) this.emptyState.style.display = 'block';
+      return;
+    }
+
+    if (!this.content) return;
+    if (this.emptyState) this.emptyState.style.display = 'none';
+    this.updateContainerHeight();
+    const containerHeight = this.containerHeight || 500;
+    const totalHeight = itemCount * this.itemHeight;
+
+    // 设置内容总高度
+    this.content.style.height = `${totalHeight}px`;
+
+    // 如果数据变化且自动跟随，先滚到底部
+    if (dataChanged && this.autoFollow) {
+      this.container.scrollTop = totalHeight - containerHeight;
+      this.scrollTop = this.container.scrollTop;
+    }
+
+    // 计算可见范围
+    const visibleStart = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - this.buffer);
+    const visibleEnd = Math.min(
+      itemCount,
+      Math.ceil((this.scrollTop + containerHeight) / this.itemHeight) + this.buffer
+    );
+
+    // 渲染可见项
+    const fragment = document.createDocumentFragment();
+    for (let i = visibleStart; i < visibleEnd; i++) {
+      fragment.appendChild(this.createItemElement(this.filteredItems[i], i));
+    }
+
+    this.content.innerHTML = '';
+    this.content.appendChild(fragment);
+  }
+
+  /**
+   * 滚动到底部
+   */
+  scrollToBottom() {
+    this.autoFollow = true;
+    this.container.scrollTop = this.container.scrollHeight;
+  }
+
+  createItemElement(log, index) {
+    const div = document.createElement('div');
+    div.className = 'event-list-item';
+    div.style.cssText = `
+      position:absolute;
+      top:${index * this.itemHeight}px;
+      left:0;right:0;
+      height:${this.itemHeight}px;
+      padding:8px 16px;
+      border-bottom:1px solid #2d2d2d;
+      cursor:pointer;
+      display:flex;align-items:center;gap:12px;
+      transition:background 0.15s;
+    `;
+
+    div.onmouseenter = () => div.style.background = '#2d2d2d';
+    div.onmouseleave = () => div.style.background = '';
+    div.ondblclick = () => this.onItemClick(log);
+
+    const time = this.formatTimestamp(log.timestamp);
+    const isRpc = log.event === 'rpc.call.completed';
+    const category = isRpc ? 'RPC' : '事件';
+    const module = log.module || '?';
+
+    let eventName = log.event;
+    let status = '';
+    let duration = '';
+    let caller = '';
+    let target = '';
+
+    if (isRpc && log.data) {
+      eventName = log.data.method || log.event;
+      status = log.data.status || '';
+      duration = log.data.duration ? `${log.data.duration}ms` : '';
+      caller = log.data.caller || '';
+      target = log.data.target || '';
+    } else if (log.data) {
+      status = log.data.status || log.data.state || '';
+    }
+
+    // 数据预览（自适应长度，不要截断太多）
+    let dataPreview = '';
+    if (log.raw) {
+      // 根据可用空间动态计算截断长度
+      // 固定宽度：时间90 + 分类50 + 模块120 + 事件150 + 状态70 + 耗时60 + 间隙12*6 = 612px
+      // 假设容器宽度约1200px，剩余约588px给数据预览
+      // 每个字符约8px，所以可以显示约70个字符
+      const maxLength = 150;
+      dataPreview = log.raw.length > maxLength ? log.raw.substring(0, maxLength) + '...' : log.raw;
+    }
+
+    let statusColor = '#d4d4d4';
+    if (status === 'success' || status === 'ready') statusColor = '#4ec9b0';
+    else if (status === 'error' || status === 'failed') statusColor = '#f48771';
+    else if (status === 'timeout' || status === 'offline') statusColor = '#dcdcaa';
+
+    const timeSpan = `<div style="flex-shrink:0;width:90px;font-family:monospace;font-size:11px;color:#858585;">${time}</div>`;
+    const categoryBadge = `<div style="flex-shrink:0;width:50px;text-align:center;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;background:${isRpc ? '#264f78' : '#1e3a1e'};color:${isRpc ? '#569cd6' : '#4ec9b0'};">${category}</div>`;
+
+    const moduleInfo = isRpc && caller && target
+      ? `<div style="flex-shrink:0;width:120px;font-size:11px;color:#9cdcfe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${caller} → ${target}">${caller} → ${target}</div>`
+      : `<div style="flex-shrink:0;width:120px;font-size:11px;color:#9cdcfe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${module}">${module}</div>`;
+
+    const eventSpan = `<div style="flex-shrink:0;width:150px;font-size:12px;color:#d4d4d4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${eventName}">${eventName}</div>`;
+    const dataSpan = `<div style="flex:1;min-width:0;font-size:11px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${log.raw}">${dataPreview}</div>`;
+    const statusSpan = status ? `<div style="flex-shrink:0;width:70px;font-size:11px;color:${statusColor};text-align:center;">${status}</div>` : '<div style="flex-shrink:0;width:70px;"></div>';
+    const durationSpan = duration ? `<div style="flex-shrink:0;width:60px;font-size:11px;color:#ce9178;text-align:right;font-family:monospace;">${duration}</div>` : '<div style="flex-shrink:0;width:60px;"></div>';
+
+    div.innerHTML = timeSpan + categoryBadge + moduleInfo + eventSpan + dataSpan + statusSpan + durationSpan;
+    return div;
+  }
+
+  formatTimestamp(timestamp) {
+    const date = new Date(timestamp);
+    const h = String(date.getHours()).padStart(2, '0');
+    const m = String(date.getMinutes()).padStart(2, '0');
+    const s = String(date.getSeconds()).padStart(2, '0');
+    const ms = String(date.getMilliseconds()).padStart(3, '0');
+    return `${h}:${m}:${s}.${ms}`;
+  }
+
+  destroy() {
+    this.content.innerHTML = '';
+    this.filteredItems = [];
+  }
+}