hyper-scheduler 1.0.0

package/src/ui/components/timeline.ts

@@ -0,0 +1,364 @@
+import { themeStyles } from '../styles/theme.css';
+import { TaskSnapshot, ExecutionRecord } from '../../types';
+import { t } from '../i18n';
+
+export class Timeline extends HTMLElement {
+  private _shadow: ShadowRoot;
+  private _tasks: Map<string, TaskSnapshot> = new Map();
+  private _history: Map<string, ExecutionRecord[]> = new Map();
+  
+  private $canvas!: HTMLCanvasElement;
+  private ctx!: CanvasRenderingContext2D;
+  private timeRange = 60 * 1000; // 1 minute window
+  private zoom = 1;
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.$canvas = this._shadow.querySelector('canvas')!;
+    if (!this.$canvas) {
+      console.error('[Timeline] Canvas not found');
+      return;
+    }
+    
+    this.ctx = this.$canvas.getContext('2d')!;
+    if (!this.ctx) {
+      console.error('[Timeline] Canvas context not available');
+      return;
+    }
+    
+    this.setupZoom();
+    this.startLoop();
+    
+    // Add ResizeObserver to canvas container
+    const container = this._shadow.querySelector('.canvas-container');
+    if (container) {
+      const resizeObserver = new ResizeObserver(() => {
+        // Trigger a redraw on next frame
+        requestAnimationFrame(() => this.draw());
+      });
+      resizeObserver.observe(container);
+    }
+  }
+
+  set data(val: { tasks: Map<string, TaskSnapshot>, history: Map<string, ExecutionRecord[]> }) {
+    this._tasks = val.tasks;
+    this._history = val.history;
+  }
+
+  set defaultZoom(val: number) {
+    if (val >= 0.5 && val <= 5) {
+      this.zoom = val;
+      this.timeRange = 60 * 1000 / this.zoom;
+      // 更新 slider 和 label
+      const zoomSlider = this._shadow.querySelector('.zoom-slider') as HTMLInputElement;
+      if (zoomSlider) zoomSlider.value = val.toString();
+      this.updateZoomLabel();
+    }
+  }
+
+  // Method to update texts when language changes
+  updateTexts() {
+    this.updateZoomLabel();
+  }
+
+  private updateZoomLabel() {
+    const zoomLabel = this._shadow.querySelector('.zoom-label');
+    if (zoomLabel) {
+      zoomLabel.textContent = `${t('timeline.zoom')}: ${this.zoom}x (${Math.round(this.timeRange / 1000)}s)`;
+    }
+  }
+
+  private setupZoom() {
+    const zoomSlider = this._shadow.querySelector('.zoom-slider') as HTMLInputElement;
+    const zoomOut = this._shadow.querySelector('.zoom-out');
+    const zoomIn = this._shadow.querySelector('.zoom-in');
+    
+    const updateZoom = (newZoom: number) => {
+      this.zoom = newZoom;
+      this.timeRange = 60 * 1000 / this.zoom;
+      this.updateZoomLabel();
+    };
+    
+    zoomSlider?.addEventListener('input', (e) => {
+      const newZoom = parseFloat((e.target as HTMLInputElement).value);
+      updateZoom(newZoom);
+    });
+    
+    zoomOut?.addEventListener('click', () => {
+      const newZoom = Math.max(0.5, this.zoom - 0.5);
+      if (zoomSlider) zoomSlider.value = newZoom.toString();
+      updateZoom(newZoom);
+    });
+    
+    zoomIn?.addEventListener('click', () => {
+      const newZoom = Math.min(5, this.zoom + 0.5);
+      if (zoomSlider) zoomSlider.value = newZoom.toString();
+      updateZoom(newZoom);
+    });
+    
+    // Initial label update
+    this.updateZoomLabel();
+  }
+
+  private startLoop() {
+    const loop = () => {
+      if (this.isConnected) {
+        this.draw();
+        requestAnimationFrame(loop);
+      }
+    };
+    requestAnimationFrame(loop);
+  }
+
+  private draw() {
+    if (!this.ctx || !this.$canvas) return;
+    
+    // Get container size
+    const container = this._shadow.querySelector('.canvas-container') as HTMLElement;
+    if (!container) return;
+    
+    const dpr = window.devicePixelRatio || 1;
+    const width = container.clientWidth;
+    
+    if (width === 0) return;
+    
+    // Calculate required height based on number of tasks
+    const rowHeight = 40;
+    const taskIds = Array.from(this._tasks.keys());
+    const headerHeight = 60;
+    const footerHeight = 40;
+    const minHeight = container.clientHeight || 300;
+    const contentHeight = taskIds.length * rowHeight + headerHeight + footerHeight;
+    const height = Math.max(minHeight, contentHeight);
+    
+    // Set canvas size - this resets the transform
+    this.$canvas.width = width * dpr;
+    this.$canvas.height = height * dpr;
+    this.$canvas.style.width = `${width}px`;
+    this.$canvas.style.height = `${height}px`;
+    
+    // Reset and apply scale (must be after setting canvas size)
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    
+    const now = Date.now();
+    const startTime = now - this.timeRange;
+    const labelWidth = 150;
+    
+    // Get computed colors from host element
+    const hostStyles = getComputedStyle(this);
+    const bgColor = hostStyles.getPropertyValue('--hs-bg').trim() || '#1e1e1e';
+    const textColor = hostStyles.getPropertyValue('--hs-text').trim() || '#fff';
+    const textSecondary = hostStyles.getPropertyValue('--hs-text-secondary').trim() || '#888';
+    const borderColor = hostStyles.getPropertyValue('--hs-border').trim() || '#333';
+    const successColor = hostStyles.getPropertyValue('--hs-success').trim() || '#22c55e';
+    const dangerColor = hostStyles.getPropertyValue('--hs-danger').trim() || '#ef4444';
+    
+    // Clear
+    this.ctx.fillStyle = bgColor;
+    this.ctx.fillRect(0, 0, width, height);
+    
+    // Draw time axis
+    this.drawTimeAxis(width, labelWidth, startTime, textSecondary, borderColor);
+    
+    // Draw task rows
+    taskIds.forEach((taskId, index) => {
+      const y = index * rowHeight + 60;
+      this.drawTaskRow(taskId, y, width, labelWidth, startTime, now, textColor, textSecondary, borderColor, successColor, dangerColor);
+    });
+    
+    // Draw legend
+    this.drawLegend(width, height, textSecondary, successColor);
+  }
+
+  private drawTimeAxis(width: number, labelWidth: number, startTime: number, textSecondary: string, borderColor: string) {
+    const ctx = this.ctx;
+    const timelineWidth = width - labelWidth - 20;
+    const segments = 4;
+    
+    ctx.fillStyle = textSecondary;
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'center';
+    
+    for (let i = 0; i <= segments; i++) {
+      const x = labelWidth + (timelineWidth / segments) * i;
+      const time = startTime + (this.timeRange / segments) * i;
+      const timeStr = new Date(time).toLocaleTimeString('en-US', { 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit',
+        hour12: false 
+      });
+      
+      ctx.fillText(timeStr, x, 30);
+      
+      // Draw vertical grid line
+      ctx.strokeStyle = borderColor;
+      ctx.beginPath();
+      ctx.moveTo(x, 40);
+      ctx.lineTo(x, this.$canvas.clientHeight - 40);
+      ctx.stroke();
+    }
+    
+    // Draw time range label
+    ctx.textAlign = 'left';
+    ctx.fillText(t('timeline.timeRange', { n: Math.round(this.timeRange / 1000) }), 10, 15);
+  }
+
+  private drawTaskRow(taskId: string, y: number, width: number, labelWidth: number, startTime: number, endTime: number, textColor: string, _textSecondary: string, borderColor: string, successColor: string, dangerColor: string) {
+    const ctx = this.ctx;
+    const timelineWidth = width - labelWidth - 20;
+    
+    // Draw task label
+    ctx.fillStyle = textColor;
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(taskId, 10, y + 15);
+    
+    // Draw driver indicator - get from task snapshot
+    const task = this._tasks.get(taskId);
+    const driver = (task as any)?.driver === 'main' ? 'M' : 'W';
+    const driverColor = driver === 'W' ? '#22c55e' : '#f59e0b';
+    ctx.fillStyle = driverColor;
+    ctx.font = '9px monospace';
+    ctx.fillText(`[${driver}]`, 10, y + 28);
+    
+    // Draw separator line
+    ctx.strokeStyle = borderColor;
+    ctx.beginPath();
+    ctx.moveTo(0, y + 35);
+    ctx.lineTo(width, y + 35);
+    ctx.stroke();
+    
+    // Draw execution history
+    const logs = this._history.get(taskId) || [];
+    logs.forEach(log => {
+      if (log.timestamp < startTime || log.timestamp > endTime) return;
+      
+      const x = labelWidth + ((log.timestamp - startTime) / this.timeRange) * timelineWidth;
+      const duration = log.duration;
+      
+      if (duration < 10) {
+        // Draw as dot for instant tasks
+        ctx.fillStyle = log.success ? successColor : dangerColor;
+        ctx.beginPath();
+        ctx.arc(x, y + 15, 3, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        // Draw as bar for long tasks
+        const barWidth = Math.max(2, (duration / this.timeRange) * timelineWidth);
+        ctx.fillStyle = log.success ? successColor : dangerColor;
+        ctx.globalAlpha = 0.7;
+        ctx.fillRect(x, y + 5, barWidth, 20);
+        ctx.globalAlpha = 1;
+      }
+    });
+  }
+
+  private drawLegend(_width: number, height: number, textSecondary: string, successColor: string) {
+    const ctx = this.ctx;
+    const legendY = height - 25;
+    
+    ctx.font = '10px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillStyle = textSecondary;
+    
+    let x = 10;
+    
+    // Dot legend
+    ctx.fillText(`${t('timeline.legend')}:`, x, legendY);
+    x += 50;
+    
+    ctx.fillStyle = successColor;
+    ctx.beginPath();
+    ctx.arc(x, legendY - 4, 3, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = textSecondary;
+    ctx.fillText(t('timeline.instant'), x + 10, legendY);
+    x += 60;
+    
+    // Bar legend
+    ctx.fillStyle = successColor;
+    ctx.globalAlpha = 0.7;
+    ctx.fillRect(x, legendY - 8, 15, 10);
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = textSecondary;
+    ctx.fillText(t('timeline.duration'), x + 20, legendY);
+    x += 80;
+    
+    // Driver legend
+    ctx.fillText(`[W] ${t('timeline.workerDriver')}`, x, legendY);
+    x += 110;
+    ctx.fillText(`[M] ${t('timeline.mainDriver')}`, x, legendY);
+  }
+
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--hs-bg);
+          overflow: hidden;
+        }
+        .controls {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          padding: 12px 16px;
+          gap: 8px;
+          border-bottom: 1px solid var(--hs-border);
+          flex-shrink: 0;
+        }
+        .zoom-label {
+          font-size: 11px;
+          color: var(--hs-text-secondary);
+        }
+        .zoom-btn {
+          background: var(--hs-bg-secondary);
+          border: 1px solid var(--hs-border);
+          color: var(--hs-text);
+          width: 24px;
+          height: 24px;
+          border-radius: 4px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .zoom-btn:hover {
+          background: var(--hs-primary);
+          color: white;
+        }
+        .zoom-slider {
+          width: 100px;
+        }
+        .canvas-container {
+          flex: 1;
+          overflow: auto;
+          position: relative;
+        }
+        canvas {
+          display: block;
+        }
+      </style>
+      <div class="controls">
+        <span class="zoom-label">Zoom:</span>
+        <button class="zoom-btn zoom-out">-</button>
+        <input type="range" class="zoom-slider" min="0.5" max="5" step="0.5" value="1">
+        <button class="zoom-btn zoom-in">+</button>
+      </div>
+      <div class="canvas-container">
+        <canvas></canvas>
+      </div>
+    `;
+  }
+}
+
+customElements.define('hs-timeline', Timeline);

package/src/ui/debug-panel.ts

@@ -0,0 +1,56 @@
+import { Task } from '../types';
+import { styles } from './styles';
+
+export class DebugPanel {
+  private container: HTMLElement | null = null;
+
+  constructor() {
+    if (typeof document !== 'undefined') {
+      this.init();
+    }
+  }
+
+  private init(): void {
+    const styleEl = document.createElement('style');
+    styleEl.textContent = styles;
+    document.head.appendChild(styleEl);
+
+    this.container = document.createElement('div');
+    this.container.id = 'hyper-scheduler-debug-panel';
+    this.container.style.display = 'none'; // Hidden by default
+    document.body.appendChild(this.container);
+  }
+
+  show(): void {
+    if (this.container) this.container.style.display = 'block';
+  }
+
+  hide(): void {
+    if (this.container) this.container.style.display = 'none';
+  }
+
+  update(tasks: Task[]): void {
+    if (!this.container) return;
+
+    let html = '<div class="hs-header"><span>Hyper Scheduler</span><button id="hs-close-btn" style="float:right">x</button></div>';
+    
+    tasks.forEach(task => {
+      const nextRun = task.nextRun ? new Date(task.nextRun).toLocaleTimeString() : '-';
+      html += `
+        <div class="hs-task-row">
+          <span>${task.id}</span>
+          <span class="hs-status-${task.status}">${task.status}</span>
+          <span>Next: ${nextRun}</span>
+        </div>
+      `;
+    });
+
+    this.container.innerHTML = html;
+
+    // Re-bind close button
+    const closeBtn = this.container.querySelector('#hs-close-btn');
+    if (closeBtn) {
+        closeBtn.addEventListener('click', () => this.hide());
+    }
+  }
+}

package/src/ui/i18n/en.ts

@@ -0,0 +1,76 @@
+export const en = {
+  header: {
+    title: 'DevTools',
+    searchPlaceholder: 'Search IDs/Tags... 🔍',
+    toggleDock: 'Toggle Dock Position',
+    toggleTheme: 'Toggle Theme',
+    close: 'Close'
+  },
+  stats: {
+    loading: 'Loading...',
+    fps: 'FPS',
+    status: 'Status',
+    active: 'Active',
+    total: 'Total',
+    mainThread: 'Main Thread',
+    scheduler: 'Scheduler',
+    running: 'Running',
+    stopped: 'Stopped'
+  },
+  tabs: {
+    tasks: 'Tasks List',
+    timeline: 'Timeline'
+  },
+  list: {
+    idTags: 'ID / Tags',
+    status: 'Status',
+    driver: 'Driver',
+    driverWorker: 'Worker (Web Worker)',
+    driverMain: 'Main (setTimeout)',
+    schedule: 'Schedule',
+    count: 'Count',
+    lastRun: 'Last Run',
+    actions: 'Actions',
+    noTags: '(No Tags)',
+    tip: '✨ Tip: Click a row for details & history.'
+  },
+  detail: {
+    back: 'Back',
+    details: 'Task Details',
+    config: 'Config',
+    history: 'Execution History',
+    lastRuns: 'Last {n} runs',
+    avgDuration: 'Avg Duration',
+    startTime: 'Start Time',
+    duration: 'Duration',
+    drift: 'Drift',
+    status: 'Status',
+    noHistory: 'No execution history',
+    noTask: 'No task selected',
+    success: 'Success',
+    failed: 'Failed',
+    error: 'Error'
+  },
+  timeline: {
+    zoom: 'Zoom',
+    timeRange: 'Time Range: Last {n}s',
+    legend: 'Legend',
+    instant: 'Instant',
+    duration: 'Duration',
+    workerDriver: 'Worker Driver',
+    mainDriver: 'Main Driver'
+  },
+  status: {
+    running: 'Running',
+    paused: 'Paused',
+    stopped: 'Stopped',
+    idle: 'Scheduled',
+    error: 'Error'
+  },
+  actions: {
+    trigger: 'Trigger now',
+    start: 'Start task',
+    stop: 'Stop task',
+    remove: 'Remove task'
+  }
+};

package/src/ui/i18n/index.ts

@@ -0,0 +1,42 @@
+import { en } from './en';
+import { zh } from './zh';
+
+type Lang = 'en' | 'zh';
+type Translation = typeof en;
+
+let currentLang: Lang = 'en';
+let translations: Translation = en;
+
+export function setLanguage(lang: Lang) {
+  currentLang = lang;
+  translations = lang === 'zh' ? zh : en;
+}
+
+export function getLanguage(): Lang {
+  return currentLang;
+}
+
+export function t(key: string, params?: Record<string, any>): string {
+  const keys = key.split('.');
+  let value: any = translations;
+  
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = value[k as keyof typeof value];
+    } else {
+      return key; // Fallback to key if not found
+    }
+  }
+
+  if (typeof value !== 'string') {
+    return key;
+  }
+
+  if (params) {
+    return value.replace(/\{(\w+)\}/g, (_, k) => {
+      return params[k] !== undefined ? String(params[k]) : `{${k}}`;
+    });
+  }
+
+  return value;
+}

package/src/ui/i18n/zh.ts

@@ -0,0 +1,76 @@
+export const zh = {
+  header: {
+    title: '调试工具',
+    searchPlaceholder: '搜索 ID/标签... 🔍',
+    toggleDock: '切换停靠位置',
+    toggleTheme: '切换主题',
+    close: '关闭'
+  },
+  stats: {
+    loading: '加载中...',
+    fps: '帧率',
+    status: '状态',
+    active: '活跃',
+    total: '总数',
+    mainThread: '主线程',
+    scheduler: '调度器',
+    running: '运行中',
+    stopped: '已停止'
+  },
+  tabs: {
+    tasks: '任务列表',
+    timeline: '时间线'
+  },
+  list: {
+    idTags: 'ID / 标签',
+    status: '状态',
+    driver: '驱动',
+    driverWorker: 'Worker (Web Worker)',
+    driverMain: '主线程 (setTimeout)',
+    schedule: '调度规则',
+    count: '次数',
+    lastRun: '最后运行',
+    actions: '操作',
+    noTags: '(无标签)',
+    tip: '✨ 提示: 点击行查看详情和历史记录。'
+  },
+  detail: {
+    back: '返回',
+    details: '任务详情',
+    config: '配置',
+    history: '执行历史',
+    lastRuns: '最近 {n} 次运行',
+    avgDuration: '平均耗时',
+    startTime: '开始时间',
+    duration: '耗时',
+    drift: '偏差',
+    status: '状态',
+    noHistory: '暂无执行历史',
+    noTask: '未选择任务',
+    success: '成功',
+    failed: '失败',
+    error: '错误'
+  },
+  timeline: {
+    zoom: '缩放',
+    timeRange: '时间范围: 最近 {n}秒',
+    legend: '图例',
+    instant: '瞬间',
+    duration: '耗时',
+    workerDriver: 'Worker 驱动',
+    mainDriver: '主线程 驱动'
+  },
+  status: {
+    running: '执行中',
+    paused: '已暂停',
+    stopped: '已停止',
+    idle: '调度中',
+    error: '错误'
+  },
+  actions: {
+    trigger: '立即触发',
+    start: '启动任务',
+    stop: '停止任务',
+    remove: '删除任务'
+  }
+};