feat: 优化监控仪表盘 UI

- 添加 appbar 导航栏，支持 Chart/Queues 视图切换
- appbar 切换使用 history API，支持浏览器前进/后退
- 图表视图占满整个可视区域
- queue-modal 共享 appbar 样式
- 修复 queue tab count 字段名大小写问题
- tooltip 跟随鼠标显示在右下方，移除箭头
- 图表 canvas 鼠标样式改为准星
- pause/resume 队列后刷新列表
- example 添加 flag 配置参数

x/monitor/ui/components/help-tooltip.js

@@ -0,0 +1,80 @@
+import { LitElement, html, css } from 'lit';
+
+class HelpTooltip extends LitElement {
+  static properties = {
+    text: { type: String }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #616161;
+      color: #9e9e9e;
+      font-size: 10px;
+      cursor: help;
+    }
+
+    .icon:hover {
+      background: #757575;
+      color: #e0e0e0;
+    }
+
+    .icon:hover + .tooltip {
+      display: block;
+    }
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 8px;
+      padding: 8px 12px;
+      background: #212121;
+      color: #e0e0e0;
+      font-size: 12px;
+      font-weight: normal;
+      border-radius: 4px;
+      white-space: nowrap;
+      z-index: 1000;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+
+    .tooltip::before {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-bottom-color: #212121;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.text = '';
+  }
+
+  render() {
+    return html`
+      <span class="icon">?</span>
+      <span class="tooltip">${this.text}</span>
+    `;
+  }
+}
+
+customElements.define('help-tooltip', HelpTooltip);

x/monitor/ui/components/queue-modal.js

@@ -0,0 +1,875 @@
+import { LitElement, html, css } from 'lit';
+import { Chart, registerables, Tooltip } from 'chart.js';
+import './time-range-picker.js';
+
+Chart.register(...registerables);
+
+// 自定义 tooltip positioner：显示在鼠标右下方
+if (!Tooltip.positioners.cursor) {
+  Tooltip.positioners.cursor = function (elements, eventPosition, tooltip) {
+    return {
+      x: eventPosition.x + 20,
+      y: eventPosition.y + 15,
+      xAlign: 'left',
+      yAlign: 'top'
+    };
+  };
+}
+
+// 十字准星 + 拖拽选择插件（与 tasks-chart 共用逻辑）
+const crosshairPlugin = {
+  id: 'queueCrosshair',
+  afterEvent(chart, args) {
+    const event = args.event;
+    if (event.type === 'mousemove') {
+      chart.crosshair = { x: event.x, y: event.y };
+    } else if (event.type === 'mouseout') {
+      chart.crosshair = null;
+    }
+  },
+  afterDraw(chart) {
+    const ctx = chart.ctx;
+    const topY = chart.scales.y.top;
+    const bottomY = chart.scales.y.bottom;
+    const leftX = chart.scales.x.left;
+    const rightX = chart.scales.x.right;
+
+    // 绘制选择区域
+    if (chart.dragSelect && chart.dragSelect.startX !== null) {
+      const { startX, currentX } = chart.dragSelect;
+      const x1 = Math.max(leftX, Math.min(startX, currentX));
+      const x2 = Math.min(rightX, Math.max(startX, currentX));
+
+      ctx.save();
+      ctx.fillStyle = 'rgba(255, 193, 7, 0.2)';
+      ctx.fillRect(x1, topY, x2 - x1, bottomY - topY);
+      ctx.restore();
+    }
+
+    // 绘制十字准星
+    if (!chart.crosshair) return;
+    const { x, y } = chart.crosshair;
+
+    if (x < leftX || x > rightX || y < topY || y > bottomY) return;
+
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+
+    ctx.beginPath();
+    ctx.moveTo(x, topY);
+    ctx.lineTo(x, bottomY);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(leftX, y);
+    ctx.lineTo(rightX, y);
+    ctx.stroke();
+
+    ctx.restore();
+  }
+};
+Chart.register(crosshairPlugin);
+
+class QueueModal extends LitElement {
+  static properties = {
+    open: { type: Boolean },
+    queue: { type: String },
+    tab: { type: String },
+    page: { type: Number },
+    rootPath: { type: String },
+    tasks: { type: Array, state: true },
+    total: { type: Number, state: true },
+    loading: { type: Boolean, state: true },
+    chartData: { type: Object, state: true },
+    queueInfo: { type: Object, state: true },
+    // Time range state
+    duration: { type: String, state: true },
+    endTime: { type: Number, state: true },
+    isLiveMode: { type: Boolean, state: true },
+    timestamps: { type: Array, state: true }
+  };
+
+  static styles = css`
+        :host {
+            display: block;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #424242;
+        }
+
+        .modal.open {
+            display: block;
+        }
+
+        .modal-content {
+            background-color: #424242;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .appbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #333;
+            padding: 0 20px;
+            height: 56px;
+            border-bottom: 1px solid #616161;
+        }
+
+        .appbar-title {
+            font-size: 1.2em;
+            font-weight: 600;
+            color: #e0e0e0;
+        }
+
+        .close-btn {
+            color: #9e9e9e;
+            font-size: 24px;
+            cursor: pointer;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            background: transparent;
+            border: none;
+        }
+
+        .close-btn:hover {
+            background: #424242;
+            color: #e0e0e0;
+        }
+
+        .modal-body {
+            padding: 20px;
+            height: calc(100vh - 56px);
+            overflow-y: auto;
+        }
+
+        .queue-chart-card {
+            margin-bottom: 15px;
+            background: #424242;
+            border-radius: 4px;
+        }
+
+        .queue-chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 15px;
+            border-bottom: 1px solid #515151;
+        }
+
+        .queue-chart-title {
+            font-size: 0.9em;
+            color: #bdbdbd;
+        }
+
+        .queue-chart-container {
+            height: 180px;
+            padding: 10px;
+        }
+
+        .task-tabs {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 20px;
+            background: #424242;
+            padding: 5px;
+            border-radius: 4px;
+        }
+
+        .task-tab {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            color: #9e9e9e;
+            border-radius: 4px;
+            font-size: 0.85em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .task-tab:hover {
+            color: #e0e0e0;
+        }
+
+        .task-tab.active {
+            background: #42a5f5;
+            color: #fff;
+        }
+
+        .tab-count {
+            font-size: 0.8em;
+            padding: 2px 6px;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .task-tab.active .tab-count {
+            background: rgba(255, 255, 255, 0.25);
+        }
+
+        .task-list {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .task-item {
+            background: #5a5a5a;
+            border: 1px solid #616161;
+            border-radius: 4px;
+            padding: 12px;
+            margin-bottom: 8px;
+        }
+
+        .task-item:hover {
+            border-color: #42a5f5;
+        }
+
+        .task-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .task-type {
+            font-weight: 500;
+            color: #42a5f5;
+        }
+
+        .task-info {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            font-size: 0.8em;
+            color: #9e9e9e;
+        }
+
+        .task-id {
+            font-family: monospace;
+        }
+
+        .task-retried {
+            color: #ffa726;
+        }
+
+        .task-actions {
+            margin-top: 8px;
+            display: flex;
+            gap: 8px;
+        }
+
+        .retry-btn {
+            padding: 4px 12px;
+            font-size: 0.8em;
+            background: #42a5f5;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .retry-btn:hover {
+            background: #1e88e5;
+        }
+
+        .retry-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .task-payload {
+            font-family: monospace;
+            font-size: 0.75em;
+            color: #9e9e9e;
+            background: #424242;
+            padding: 8px;
+            border-radius: 4px;
+            margin-top: 8px;
+            word-break: break-all;
+        }
+
+        .task-meta {
+            display: flex;
+            gap: 12px;
+            margin-top: 8px;
+            font-size: 0.8em;
+            color: #9e9e9e;
+        }
+
+        .task-error {
+            color: #ef5350;
+            background: rgba(239, 83, 80, 0.1);
+            padding: 6px 8px;
+            border-radius: 4px;
+            margin-top: 8px;
+            font-size: 0.8em;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 6px;
+            margin-top: 16px;
+        }
+
+        .pagination button {
+            padding: 6px 12px;
+            border: 1px solid #616161;
+            background: #424242;
+            color: #e0e0e0;
+            cursor: pointer;
+            border-radius: 4px;
+            font-size: 0.85em;
+        }
+
+        .pagination button:hover {
+            background: #5a5a5a;
+        }
+
+        .pagination button.active {
+            background: #42a5f5;
+            border-color: #42a5f5;
+        }
+
+        .pagination button:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 60px;
+            color: #9e9e9e;
+        }
+
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #616161;
+            border-top-color: #42a5f5;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px;
+            color: #9e9e9e;
+        }
+
+        canvas {
+            width: 100% !important;
+            height: 100% !important;
+            cursor: crosshair;
+        }
+    `;
+
+  static tabs = ['active', 'pending', 'scheduled', 'retry', 'archived', 'completed'];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.queue = '';
+    this.tab = 'active';
+    this.page = 1;
+    this.rootPath = '/monitor';
+    this.tasks = [];
+    this.total = 0;
+    this.loading = false;
+    this.chartData = { labels: [], datasets: {} };
+    this.chart = null;
+    this.pageSize = 20;
+    this.queueInfo = null;
+    // Time range defaults
+    this.duration = '1h';
+    this.endTime = null;
+    this.isLiveMode = true;
+    this.timestamps = [];
+    this.isDragging = false;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('open') && this.open) {
+      this.loadQueueInfo();
+      this.loadQueueHistory();
+      this.loadTasks();
+    }
+    if ((changedProperties.has('tab') || changedProperties.has('page')) && this.open) {
+      this.loadTasks();
+    }
+    if (changedProperties.has('chartData') && this.chart) {
+      this.updateChart();
+    }
+  }
+
+  async loadQueueInfo() {
+    try {
+      const response = await fetch(`${this.rootPath}/api/queues/${this.queue}`);
+      if (!response.ok) return;
+      this.queueInfo = await response.json();
+    } catch (err) {
+      console.error('Failed to load queue info:', err);
+    }
+  }
+
+  parseDuration(dur) {
+    const match = dur.match(/^(\d+)([mhd])$/);
+    if (!match) return 3600;
+    const value = parseInt(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case 'm': return value * 60;
+      case 'h': return value * 3600;
+      case 'd': return value * 86400;
+      default: return 3600;
+    }
+  }
+
+  getInterval(durationSecs) {
+    if (durationSecs <= 300) return 2;
+    if (durationSecs <= 900) return 5;
+    if (durationSecs <= 1800) return 10;
+    if (durationSecs <= 3600) return 20;
+    if (durationSecs <= 10800) return 60;
+    if (durationSecs <= 21600) return 120;
+    if (durationSecs <= 43200) return 300;
+    if (durationSecs <= 86400) return 600;
+    if (durationSecs <= 259200) return 1800;
+    return 3600;
+  }
+
+  formatTimeLabel(date, durationSecs) {
+    if (durationSecs <= 86400) {
+      return date.toLocaleTimeString('zh-CN', {
+        hour: '2-digit', minute: '2-digit', second: '2-digit'
+      });
+    } else {
+      return date.toLocaleString('zh-CN', {
+        month: '2-digit', day: '2-digit',
+        hour: '2-digit', minute: '2-digit'
+      });
+    }
+  }
+
+  findNearestStats(statsMap, timestamp, interval) {
+    if (statsMap.has(timestamp)) return statsMap.get(timestamp);
+    for (let offset = 1; offset < interval; offset++) {
+      if (statsMap.has(timestamp + offset)) return statsMap.get(timestamp + offset);
+      if (statsMap.has(timestamp - offset)) return statsMap.get(timestamp - offset);
+    }
+    return null;
+  }
+
+  async loadQueueHistory() {
+    const durationSecs = this.parseDuration(this.duration);
+    const end = this.endTime !== null ? this.endTime : Math.floor(Date.now() / 1000);
+    const start = end - durationSecs;
+
+    try {
+      const response = await fetch(
+        `${this.rootPath}/api/stats/${this.queue}?start=${start}&end=${end}&limit=10000`
+      );
+      if (!response.ok) return;
+
+      const stats = await response.json();
+
+      // Build stats map
+      const statsMap = new Map();
+      if (stats && stats.length > 0) {
+        stats.forEach(s => statsMap.set(s.t, s));
+      }
+
+      // Calculate interval
+      const interval = this.getInterval(durationSecs);
+      const alignedStart = Math.floor(start / interval) * interval;
+
+      const newData = {
+        labels: [], datasets: {
+          active: [], pending: [], scheduled: [], retry: [],
+          archived: [], completed: [], succeeded: [], failed: []
+        }
+      };
+      const newTimestamps = [];
+
+      for (let t = alignedStart; t <= end; t += interval) {
+        const date = new Date(t * 1000);
+        const timeLabel = this.formatTimeLabel(date, durationSecs);
+
+        newData.labels.push(timeLabel);
+        newTimestamps.push(t);
+
+        const s = this.findNearestStats(statsMap, t, interval);
+        newData.datasets.active.push(s ? (s.a || 0) : null);
+        newData.datasets.pending.push(s ? (s.p || 0) : null);
+        newData.datasets.scheduled.push(s ? (s.s || 0) : null);
+        newData.datasets.retry.push(s ? (s.r || 0) : null);
+        newData.datasets.archived.push(s ? (s.ar || 0) : null);
+        newData.datasets.completed.push(s ? (s.c || 0) : null);
+        newData.datasets.succeeded.push(s ? (s.su || 0) : null);
+        newData.datasets.failed.push(s ? (s.f || 0) : null);
+      }
+
+      this.chartData = newData;
+      this.timestamps = newTimestamps;
+
+      await this.updateComplete;
+      this.initChart();
+    } catch (err) {
+      console.error('Failed to load queue history:', err);
+    }
+  }
+
+  async loadTasks() {
+    this.loading = true;
+    try {
+      const response = await fetch(
+        `${this.rootPath}/api/tasks/${this.queue}/${this.tab}?page=${this.page}&page_size=${this.pageSize}`
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      const data = await response.json();
+      this.tasks = data.tasks || [];
+      this.total = data.total || 0;
+    } catch (err) {
+      console.error('Failed to load tasks:', err);
+      this.tasks = [];
+      this.total = 0;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  initChart() {
+    const canvas = this.shadowRoot.querySelector('canvas');
+    if (!canvas) return;
+
+    if (this.chart) {
+      this.chart.destroy();
+    }
+
+    const ctx = canvas.getContext('2d');
+    this.chart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: [
+          { label: 'Active', data: [], borderColor: '#42a5f5', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Pending', data: [], borderColor: '#5c6bc0', backgroundColor: 'transparent', fill: false },
+          { label: 'Scheduled', data: [], borderColor: '#ffa726', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Retry', data: [], borderColor: '#ef5350', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Archived', data: [], borderColor: '#ab47bc', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Completed', data: [], borderColor: '#66bb6a', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Succeeded', data: [], borderColor: '#81c784', backgroundColor: 'transparent', fill: false, borderDash: [5, 5], hidden: true },
+          { label: 'Failed', data: [], borderColor: '#e57373', backgroundColor: 'transparent', fill: false, borderDash: [5, 5], hidden: true }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: { duration: 0 },
+        clip: false,
+        interaction: { mode: 'index', intersect: false },
+        hover: { mode: 'index', intersect: false },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: { color: '#e0e0e0', padding: 10, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } }
+          },
+          tooltip: { enabled: true, backgroundColor: 'rgba(30, 30, 30, 0.9)', titleColor: '#e0e0e0', bodyColor: '#e0e0e0', position: 'cursor', caretSize: 0 }
+        },
+        scales: {
+          x: { grid: { color: '#616161' }, ticks: { color: '#9e9e9e', maxTicksLimit: 8 } },
+          y: { grid: { color: '#616161' }, ticks: { color: '#9e9e9e' }, beginAtZero: true }
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hoverRadius: 5,
+            hitRadius: 10,
+            hoverBackgroundColor: (ctx) => ctx.dataset.borderColor,
+            hoverBorderColor: (ctx) => ctx.dataset.borderColor,
+            hoverBorderWidth: 0
+          },
+          line: { tension: 0.3, borderWidth: 1.5, spanGaps: false }
+        }
+      }
+    });
+    this.setupDragSelect(canvas);
+    this.updateChart();
+  }
+
+  setupDragSelect(canvas) {
+    canvas.addEventListener('mousedown', (e) => {
+      if (!this.chart) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const leftX = this.chart.scales.x.left;
+      const rightX = this.chart.scales.x.right;
+
+      if (x >= leftX && x <= rightX) {
+        this.isDragging = true;
+        this.chart.dragSelect = { startX: x, currentX: x };
+        this.chart.update('none');
+      }
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (!this.isDragging || !this.chart) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      this.chart.dragSelect.currentX = x;
+      this.chart.update('none');
+    });
+
+    canvas.addEventListener('mouseup', (e) => {
+      if (!this.isDragging || !this.chart) return;
+      this.isDragging = false;
+
+      const { startX, currentX } = this.chart.dragSelect;
+      const leftX = this.chart.scales.x.left;
+      const rightX = this.chart.scales.x.right;
+
+      const x1 = Math.max(leftX, Math.min(startX, currentX));
+      const x2 = Math.min(rightX, Math.max(startX, currentX));
+
+      if (Math.abs(x2 - x1) > 10 && this.timestamps.length > 0) {
+        const startIndex = Math.round((x1 - leftX) / (rightX - leftX) * (this.timestamps.length - 1));
+        const endIndex = Math.round((x2 - leftX) / (rightX - leftX) * (this.timestamps.length - 1));
+
+        if (startIndex >= 0 && endIndex < this.timestamps.length) {
+          const startTime = this.timestamps[startIndex];
+          const endTime = this.timestamps[endIndex];
+          this.handleTimeRangeSelect(startTime, endTime);
+        }
+      }
+
+      this.chart.dragSelect = null;
+      this.chart.update('none');
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+      if (this.isDragging && this.chart) {
+        this.isDragging = false;
+        this.chart.dragSelect = null;
+        this.chart.update('none');
+      }
+    });
+  }
+
+  handleTimeRangeSelect(start, end) {
+    const durationSecs = end - start;
+
+    this.isLiveMode = false;
+    this.endTime = end;
+
+    if (durationSecs <= 300) this.duration = '5m';
+    else if (durationSecs <= 900) this.duration = '15m';
+    else if (durationSecs <= 1800) this.duration = '30m';
+    else if (durationSecs <= 3600) this.duration = '1h';
+    else if (durationSecs <= 10800) this.duration = '3h';
+    else if (durationSecs <= 21600) this.duration = '6h';
+    else if (durationSecs <= 43200) this.duration = '12h';
+    else if (durationSecs <= 86400) this.duration = '1d';
+    else if (durationSecs <= 259200) this.duration = '3d';
+    else this.duration = '7d';
+
+    this.loadQueueHistory();
+  }
+
+  handleChartTimeRangeChange(e) {
+    const { duration, endTime, isLiveMode } = e.detail;
+    this.duration = duration;
+    this.endTime = endTime;
+    this.isLiveMode = isLiveMode;
+    this.loadQueueHistory();
+  }
+
+  updateChart() {
+    if (!this.chart || !this.chartData) return;
+
+    this.chart.data.labels = this.chartData.labels || [];
+    this.chart.data.datasets[0].data = this.chartData.datasets?.active || [];
+    this.chart.data.datasets[1].data = this.chartData.datasets?.pending || [];
+    this.chart.data.datasets[2].data = this.chartData.datasets?.scheduled || [];
+    this.chart.data.datasets[3].data = this.chartData.datasets?.retry || [];
+    this.chart.data.datasets[4].data = this.chartData.datasets?.archived || [];
+    this.chart.data.datasets[5].data = this.chartData.datasets?.completed || [];
+    this.chart.data.datasets[6].data = this.chartData.datasets?.succeeded || [];
+    this.chart.data.datasets[7].data = this.chartData.datasets?.failed || [];
+    this.chart.update('none');
+  }
+
+  handleClose() {
+    if (this.chart) {
+      this.chart.destroy();
+      this.chart = null;
+    }
+    this.dispatchEvent(new CustomEvent('close'));
+  }
+
+  handleTabClick(tab) {
+    this.dispatchEvent(new CustomEvent('tab-change', { detail: { tab } }));
+  }
+
+  getTabCount(tab) {
+    if (!this.queueInfo) return 0;
+    return this.queueInfo[tab] || 0;
+  }
+
+  handlePageClick(page) {
+    this.dispatchEvent(new CustomEvent('page-change', { detail: { page } }));
+  }
+
+  async retryTask(taskId) {
+    try {
+      const response = await fetch(
+        `${this.rootPath}/api/tasks/${this.queue}/archived/${taskId}/retry`,
+        { method: 'POST' }
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      // Reload tasks after retry
+      this.loadTasks();
+    } catch (err) {
+      console.error('Failed to retry task:', err);
+      alert('Failed to retry task: ' + err.message);
+    }
+  }
+
+  renderPagination() {
+    if (!this.total) return '';
+
+    const totalPages = Math.ceil(this.total / this.pageSize);
+    const startPage = Math.max(1, this.page - 2);
+    const endPage = Math.min(totalPages, this.page + 2);
+
+    const pages = [];
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    return html`
+            <div class="pagination">
+                <button ?disabled=${this.page <= 1} @click=${() => this.handlePageClick(this.page - 1)}>
+                    Prev
+                </button>
+                ${pages.map(p => html`
+                    <button class="${p === this.page ? 'active' : ''}" @click=${() => this.handlePageClick(p)}>
+                        ${p}
+                    </button>
+                `)}
+                <button ?disabled=${this.page >= totalPages} @click=${() => this.handlePageClick(this.page + 1)}>
+                    Next
+                </button>
+            </div>
+        `;
+  }
+
+  renderTasks() {
+    if (this.loading) {
+      return html`
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    <div>Loading...</div>
+                </div>
+            `;
+    }
+
+    if (!this.tasks || this.tasks.length === 0) {
+      return html`<div class="empty-state">No tasks</div>`;
+    }
+
+    return html`
+            <div class="task-list">
+                ${this.tasks.map(task => html`
+                    <div class="task-item">
+                        <div class="task-header">
+                            <div class="task-type">${task.type}</div>
+                            <div class="task-info">
+                                ${task.retried > 0 ? html`<span class="task-retried">Retried: ${task.retried}</span>` : ''}
+                                <span class="task-id">${task.id}</span>
+                            </div>
+                        </div>
+                        ${task.payload ? html`<div class="task-payload">${task.payload}</div>` : ''}
+                        <div class="task-meta">
+                            ${task.next_process ? html`<span>Next: ${new Date(task.next_process).toLocaleString()}</span>` : ''}
+                            ${task.completed_at ? html`<span>Completed: ${new Date(task.completed_at).toLocaleString()}</span>` : ''}
+                        </div>
+                        ${task.last_error ? html`<div class="task-error">${task.last_error}</div>` : ''}
+                        ${this.tab === 'archived' ? html`
+                            <div class="task-actions">
+                                <button class="retry-btn" @click=${() => this.retryTask(task.id)}>Retry</button>
+                            </div>
+                        ` : ''}
+                    </div>
+                `)}
+            </div>
+            ${this.renderPagination()}
+        `;
+  }
+
+  render() {
+    return html`
+            <div class="modal ${this.open ? 'open' : ''}">
+                <div class="modal-content">
+                    <div class="appbar">
+                        <div class="appbar-title">Queue: ${this.queue}</div>
+                        <button class="close-btn" @click=${this.handleClose}>&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="queue-chart-card">
+                            <div class="queue-chart-header">
+                                <span class="queue-chart-title">Queue Statistics</span>
+                                <time-range-picker
+                                    .duration=${this.duration}
+                                    .endTime=${this.endTime}
+                                    .isLiveMode=${this.isLiveMode}
+                                    @change=${this.handleChartTimeRangeChange}
+                                ></time-range-picker>
+                            </div>
+                            <div class="queue-chart-container">
+                                <canvas></canvas>
+                            </div>
+                        </div>
+                        <div class="task-tabs">
+                            ${QueueModal.tabs.map(t => html`
+                                <button
+                                    class="task-tab ${t === this.tab ? 'active' : ''}"
+                                    @click=${() => this.handleTabClick(t)}
+                                >
+                                    ${t.charAt(0).toUpperCase() + t.slice(1)}
+                                    <span class="tab-count">${this.getTabCount(t)}</span>
+                                </button>
+                            `)}
+                        </div>
+                        ${this.renderTasks()}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+}
+
+customElements.define('queue-modal', QueueModal);

x/monitor/ui/components/queue-table.js

@@ -0,0 +1,233 @@
+import { LitElement, html, css } from 'lit';
+import './help-tooltip.js';
+
+class QueueTable extends LitElement {
+  static properties = {
+    queues: { type: Array },
+    rootPath: { type: String }
+  };
+
+  static styles = css`
+        :host {
+            display: block;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th {
+            background: #424242;
+            padding: 14px 16px;
+            text-align: left;
+            font-weight: 500;
+            color: #bdbdbd;
+            font-size: 0.9em;
+            border-bottom: 1px solid #616161;
+        }
+
+        .th-content {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        td {
+            padding: 14px 16px;
+            border-bottom: 1px solid #616161;
+        }
+
+        tr:last-child td {
+            border-bottom: none;
+        }
+
+        tbody tr:hover {
+            background: #5a5a5a;
+        }
+
+        .queue-name {
+            font-weight: 500;
+            color: #4fc3f7;
+            cursor: pointer;
+        }
+
+        .queue-name:hover {
+            text-decoration: underline;
+        }
+
+        .state-badge {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 0.8em;
+            font-weight: 500;
+            background: #66bb6a;
+            color: #1b5e20;
+        }
+
+        .state-badge.paused {
+            background: #ffb74d;
+            color: #e65100;
+        }
+
+        .memory-value {
+            font-size: 0.9em;
+            color: #bdbdbd;
+        }
+
+        .latency-value {
+            color: #bdbdbd;
+        }
+
+        .action-btn {
+            background: transparent;
+            border: 1px solid #757575;
+            color: #bdbdbd;
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.8em;
+            margin-right: 4px;
+        }
+
+        .action-btn:hover {
+            background: #616161;
+            color: #e0e0e0;
+        }
+
+        .action-btn.pause {
+            border-color: #ffb74d;
+            color: #ffb74d;
+        }
+
+        .action-btn.pause:hover {
+            background: rgba(255, 183, 77, 0.2);
+        }
+
+        .action-btn.resume {
+            border-color: #66bb6a;
+            color: #66bb6a;
+        }
+
+        .action-btn.resume:hover {
+            background: rgba(102, 187, 106, 0.2);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px;
+            color: #9e9e9e;
+        }
+    `;
+
+  constructor() {
+    super();
+    this.queues = [];
+    this.rootPath = '/monitor';
+  }
+
+  handleQueueClick(queue) {
+    this.dispatchEvent(new CustomEvent('queue-click', {
+      detail: { queue: queue.name }
+    }));
+  }
+
+  async togglePause(queue) {
+    const action = queue.paused ? 'unpause' : 'pause';
+    try {
+      const response = await fetch(
+        `${this.rootPath}/api/queues/${queue.name}/${action}`,
+        { method: 'POST' }
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      // 触发刷新事件
+      this.dispatchEvent(new CustomEvent('queue-updated'));
+    } catch (err) {
+      console.error(`Failed to ${action} queue:`, err);
+      alert(`Failed to ${action} queue: ${err.message}`);
+    }
+  }
+
+  formatMemory(bytes) {
+    if (!bytes || bytes === 0) return '0 B';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1024 / 1024).toFixed(2) + ' MB';
+  }
+
+  renderTh(label, tooltip) {
+    if (!tooltip) {
+      return html`<th>${label}</th>`;
+    }
+    return html`
+      <th>
+        <span class="th-content">
+          ${label}
+          <help-tooltip text="${tooltip}"></help-tooltip>
+        </span>
+      </th>
+    `;
+  }
+
+
+
+  render() {
+    if (!this.queues || this.queues.length === 0) {
+      return html`<div class="empty-state">No queues</div>`;
+    }
+
+    return html`
+            <table>
+                <thead>
+                    <tr>
+                        <th>Queue</th>
+                        ${this.renderTh('State', 'run: 正常处理任务 | paused: 暂停处理新任务')}
+                        ${this.renderTh('Active', '正在被 worker 处理的任务数')}
+                        ${this.renderTh('Pending', '等待处理的任务数')}
+                        ${this.renderTh('Scheduled', '定时/延迟任务，到达指定时间后进入 Pending')}
+                        ${this.renderTh('Retry', '处理失败后等待重试的任务数')}
+                        ${this.renderTh('Archived', '超过最大重试次数的失败任务')}
+                        ${this.renderTh('Memory', '队列在 Redis 中占用的内存')}
+                        ${this.renderTh('Latency', '最老 Pending 任务的等待时间，反映处理及时性')}
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${this.queues.map(queue => html`
+                        <tr>
+                            <td>
+                                <span class="queue-name" @click=${() => this.handleQueueClick(queue)}>
+                                    ${queue.name}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="state-badge ${queue.paused ? 'paused' : ''}">
+                                    ${queue.paused ? 'paused' : 'run'}
+                                </span>
+                            </td>
+                            <td>${queue.active || 0}</td>
+                            <td>${queue.pending || 0}</td>
+                            <td>${queue.scheduled || 0}</td>
+                            <td>${queue.retry || 0}</td>
+                            <td>${queue.archived || 0}</td>
+                            <td class="memory-value">${this.formatMemory(queue.memory_usage)}</td>
+                            <td class="latency-value">${queue.latency || 0}ms</td>
+                            <td>
+                                <button class="action-btn" @click=${() => this.handleQueueClick(queue)}>
+                                    View
+                                </button>
+                                <button class="action-btn ${queue.paused ? 'resume' : 'pause'}"
+                                        @click=${() => this.togglePause(queue)}>
+                                    ${queue.paused ? 'Resume' : 'Pause'}
+                                </button>
+                            </td>
+                        </tr>
+                    `)}
+                </tbody>
+            </table>
+        `;
+  }
+}
+
+customElements.define('queue-table', QueueTable);

x/monitor/ui/components/tasks-chart.js

@@ -0,0 +1,280 @@
+import { LitElement, html, css } from 'lit';
+import { Chart, registerables, Tooltip } from 'chart.js';
+
+Chart.register(...registerables);
+
+// 自定义 tooltip positioner：显示在鼠标右下方
+Tooltip.positioners.cursor = function (elements, eventPosition, tooltip) {
+  return {
+    x: eventPosition.x + 20,
+    y: eventPosition.y + 15,
+    xAlign: 'left',
+    yAlign: 'top'
+  };
+};
+
+// 十字准星 + 拖拽选择插件
+const crosshairPlugin = {
+  id: 'crosshair',
+  afterEvent(chart, args) {
+    const event = args.event;
+    if (event.type === 'mousemove') {
+      chart.crosshair = { x: event.x, y: event.y };
+    } else if (event.type === 'mouseout') {
+      chart.crosshair = null;
+    }
+  },
+  afterDraw(chart) {
+    const ctx = chart.ctx;
+    const topY = chart.scales.y.top;
+    const bottomY = chart.scales.y.bottom;
+    const leftX = chart.scales.x.left;
+    const rightX = chart.scales.x.right;
+
+    // 绘制选择区域
+    if (chart.dragSelect && chart.dragSelect.startX !== null) {
+      const { startX, currentX } = chart.dragSelect;
+      const x1 = Math.max(leftX, Math.min(startX, currentX));
+      const x2 = Math.min(rightX, Math.max(startX, currentX));
+
+      ctx.save();
+      ctx.fillStyle = 'rgba(255, 193, 7, 0.2)';
+      ctx.fillRect(x1, topY, x2 - x1, bottomY - topY);
+      ctx.restore();
+    }
+
+    // 绘制十字准星
+    if (!chart.crosshair) return;
+    const { x, y } = chart.crosshair;
+
+    // 检查鼠标是否在图表区域内
+    if (x < leftX || x > rightX || y < topY || y > bottomY) return;
+
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+
+    // 垂直线
+    ctx.beginPath();
+    ctx.moveTo(x, topY);
+    ctx.lineTo(x, bottomY);
+    ctx.stroke();
+
+    // 水平线跟随鼠标
+    ctx.beginPath();
+    ctx.moveTo(leftX, y);
+    ctx.lineTo(rightX, y);
+    ctx.stroke();
+
+    ctx.restore();
+  }
+};
+Chart.register(crosshairPlugin);
+
+class TasksChart extends LitElement {
+  static properties = {
+    data: { type: Object },
+    timestamps: { type: Array }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    canvas {
+      width: 100% !important;
+      height: 100% !important;
+      cursor: crosshair;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.data = { labels: [], datasets: {} };
+    this.timestamps = [];
+    this.chart = null;
+    this.isDragging = false;
+  }
+
+  firstUpdated() {
+    this.initChart();
+    this.setupDragSelect();
+  }
+
+  setupDragSelect() {
+    const canvas = this.shadowRoot.querySelector('canvas');
+    if (!canvas) return;
+
+    canvas.addEventListener('mousedown', (e) => {
+      if (!this.chart) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const leftX = this.chart.scales.x.left;
+      const rightX = this.chart.scales.x.right;
+
+      if (x >= leftX && x <= rightX) {
+        this.isDragging = true;
+        this.chart.dragSelect = { startX: x, currentX: x };
+        this.chart.update('none');
+      }
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (!this.isDragging || !this.chart) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      this.chart.dragSelect.currentX = x;
+      this.chart.update('none');
+    });
+
+    canvas.addEventListener('mouseup', (e) => {
+      if (!this.isDragging || !this.chart) return;
+      this.isDragging = false;
+
+      const { startX, currentX } = this.chart.dragSelect;
+      const leftX = this.chart.scales.x.left;
+      const rightX = this.chart.scales.x.right;
+
+      // 计算选择的时间范围
+      const x1 = Math.max(leftX, Math.min(startX, currentX));
+      const x2 = Math.min(rightX, Math.max(startX, currentX));
+
+      // 最小选择宽度检查
+      if (Math.abs(x2 - x1) > 10) {
+        const startIndex = Math.round((x1 - leftX) / (rightX - leftX) * (this.timestamps.length - 1));
+        const endIndex = Math.round((x2 - leftX) / (rightX - leftX) * (this.timestamps.length - 1));
+
+        if (startIndex >= 0 && endIndex < this.timestamps.length) {
+          const startTime = this.timestamps[startIndex];
+          const endTime = this.timestamps[endIndex];
+
+          this.dispatchEvent(new CustomEvent('time-range-select', {
+            detail: { start: startTime, end: endTime },
+            bubbles: true,
+            composed: true
+          }));
+        }
+      }
+
+      this.chart.dragSelect = null;
+      this.chart.update('none');
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+      if (this.isDragging && this.chart) {
+        this.isDragging = false;
+        this.chart.dragSelect = null;
+        this.chart.update('none');
+      }
+    });
+  }
+
+  initChart() {
+    const canvas = this.shadowRoot.querySelector('canvas');
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+
+    this.chart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: [
+          { label: 'Active', data: [], borderColor: '#42a5f5', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Pending', data: [], borderColor: '#5c6bc0', backgroundColor: 'transparent', fill: false },
+          { label: 'Scheduled', data: [], borderColor: '#ffa726', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Retry', data: [], borderColor: '#ef5350', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Archived', data: [], borderColor: '#ab47bc', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Completed', data: [], borderColor: '#66bb6a', backgroundColor: 'transparent', fill: false, hidden: true },
+          { label: 'Succeeded', data: [], borderColor: '#81c784', backgroundColor: 'transparent', fill: false, borderDash: [5, 5], hidden: true },
+          { label: 'Failed', data: [], borderColor: '#e57373', backgroundColor: 'transparent', fill: false, borderDash: [5, 5], hidden: true }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: { duration: 0 },
+        clip: false,
+        interaction: { mode: 'index', intersect: false },
+        hover: { mode: 'index', intersect: false },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              color: '#e0e0e0',
+              padding: 15,
+              usePointStyle: true,
+              pointStyle: 'circle'
+            }
+          },
+          tooltip: {
+            enabled: true,
+            backgroundColor: 'rgba(30, 30, 30, 0.9)',
+            titleColor: '#e0e0e0',
+            bodyColor: '#e0e0e0',
+            borderColor: '#616161',
+            borderWidth: 1,
+            padding: 10,
+            displayColors: true,
+            position: 'cursor',
+            caretSize: 0
+          }
+        },
+        scales: {
+          x: {
+            grid: { color: '#616161' },
+            ticks: { color: '#9e9e9e', maxTicksLimit: 10 }
+          },
+          y: {
+            grid: { color: '#616161' },
+            ticks: { color: '#9e9e9e' },
+            beginAtZero: true
+          }
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hoverRadius: 5,
+            hitRadius: 10,
+            hoverBackgroundColor: (ctx) => ctx.dataset.borderColor,
+            hoverBorderColor: (ctx) => ctx.dataset.borderColor,
+            hoverBorderWidth: 0
+          },
+          line: { tension: 0.3, borderWidth: 1.5, spanGaps: false }
+        }
+      }
+    });
+
+    this.updateChart();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('data') && this.chart) {
+      this.updateChart();
+    }
+  }
+
+  updateChart() {
+    if (!this.chart || !this.data) return;
+
+    this.chart.data.labels = this.data.labels || [];
+    this.chart.data.datasets[0].data = this.data.datasets?.active || [];
+    this.chart.data.datasets[1].data = this.data.datasets?.pending || [];
+    this.chart.data.datasets[2].data = this.data.datasets?.scheduled || [];
+    this.chart.data.datasets[3].data = this.data.datasets?.retry || [];
+    this.chart.data.datasets[4].data = this.data.datasets?.archived || [];
+    this.chart.data.datasets[5].data = this.data.datasets?.completed || [];
+    this.chart.data.datasets[6].data = this.data.datasets?.succeeded || [];
+    this.chart.data.datasets[7].data = this.data.datasets?.failed || [];
+    this.chart.update('none');
+  }
+
+  render() {
+    return html`<canvas></canvas>`;
+  }
+}
+
+customElements.define('tasks-chart', TasksChart);

x/monitor/ui/components/time-range-picker.js

@@ -0,0 +1,165 @@
+import { LitElement, html, css } from 'lit';
+
+class TimeRangePicker extends LitElement {
+  static properties = {
+    duration: { type: String },
+    endTime: { type: Number },
+    isLiveMode: { type: Boolean }
+  };
+
+  static durations = ['5m', '15m', '30m', '1h', '3h', '6h', '12h', '1d', '3d', '7d'];
+
+  static styles = css`
+        :host {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .time-control {
+            display: flex;
+            align-items: center;
+            background: #424242;
+            border: 1px solid #616161;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        button {
+            background: transparent;
+            border: none;
+            color: #9e9e9e;
+            padding: 6px 10px;
+            cursor: pointer;
+            font-size: 1em;
+        }
+
+        button:hover {
+            background: #515151;
+            color: #e0e0e0;
+        }
+
+        .value {
+            padding: 6px 12px;
+            color: #e0e0e0;
+            font-size: 0.85em;
+            min-width: 40px;
+            text-align: center;
+        }
+
+        .end-value {
+            cursor: pointer;
+        }
+
+        .end-value:hover {
+            background: #515151;
+        }
+
+        .reset-btn:hover {
+            color: #ef5350;
+        }
+    `;
+
+  constructor() {
+    super();
+    this.duration = '1h';
+    this.endTime = null;
+    this.isLiveMode = true;
+  }
+
+  get durationIndex() {
+    return TimeRangePicker.durations.indexOf(this.duration);
+  }
+
+  parseDuration(dur) {
+    const match = dur.match(/^(\d+)([mhd])$/);
+    if (!match) return 3600;
+    const value = parseInt(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case 'm': return value * 60;
+      case 'h': return value * 3600;
+      case 'd': return value * 86400;
+      default: return 3600;
+    }
+  }
+
+  adjustDuration(delta) {
+    const durations = TimeRangePicker.durations;
+    const newIndex = Math.max(0, Math.min(durations.length - 1, this.durationIndex + delta));
+    this.duration = durations[newIndex];
+    this.emitChange();
+  }
+
+  adjustEndTime(delta) {
+    const durationSecs = this.parseDuration(this.duration);
+    const step = durationSecs / 2;
+
+    let newEndTime = this.endTime;
+    if (newEndTime === null) {
+      newEndTime = Math.floor(Date.now() / 1000);
+    }
+    newEndTime += delta * step;
+
+    const now = Math.floor(Date.now() / 1000);
+    if (newEndTime >= now) {
+      this.resetToNow();
+      return;
+    }
+
+    this.endTime = newEndTime;
+    this.isLiveMode = false;
+    this.emitChange();
+  }
+
+  resetToNow() {
+    this.endTime = null;
+    this.isLiveMode = true;
+    this.emitChange();
+  }
+
+  emitChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        duration: this.duration,
+        endTime: this.endTime,
+        isLiveMode: this.isLiveMode
+      }
+    }));
+  }
+
+  formatEndTime() {
+    if (this.endTime === null) {
+      return 'now';
+    }
+    const date = new Date(this.endTime * 1000);
+    return date.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }).replace(/\//g, '-');
+  }
+
+  render() {
+    return html`
+            <div class="time-control">
+                <button @click=${() => this.adjustDuration(-1)}>−</button>
+                <span class="value">${this.duration}</span>
+                <button @click=${() => this.adjustDuration(1)}>+</button>
+            </div>
+            <div class="time-control">
+                <button @click=${() => this.adjustEndTime(-1)}>‹</button>
+                <span class="value end-value" @click=${this.resetToNow}>
+                    ${this.formatEndTime()}
+                </span>
+                <button @click=${() => this.adjustEndTime(1)}>›</button>
+                <button class="reset-btn" @click=${this.resetToNow} title="Reset to now">×</button>
+            </div>
+        `;
+  }
+}
+
+customElements.define('time-range-picker', TimeRangePicker);