hyper-scheduler 1.0.0

package/src/ui/components/resizer.ts

@@ -0,0 +1,129 @@
+import { themeStyles } from '../styles/theme.css';
+
+export class Resizer extends HTMLElement {
+  private _shadow: ShadowRoot;
+  private startX = 0;
+  private startY = 0;
+  private startWidth = 0;
+  private startHeight = 0;
+  private panel: HTMLElement | null = null;
+  private mode: 'right' | 'bottom' = 'right';
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  // 检测是否为移动端
+  private isMobile(): boolean {
+    return window.innerWidth <= 480;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+    this.panel = this.closest('.panel') as HTMLElement;
+    if (this.panel && this.panel.classList.contains('dock-bottom')) {
+      this.mode = 'bottom';
+    }
+  }
+
+  private addEventListeners() {
+    const handle = this._shadow.querySelector('.handle') as HTMLElement;
+    
+    const onMouseMove = (e: MouseEvent) => {
+      if (!this.panel || this.isMobile()) return;
+      
+      if (this.mode === 'right') {
+        const dx = this.startX - e.clientX;
+        const newWidth = Math.max(300, Math.min(window.innerWidth - 50, this.startWidth + dx));
+        this.panel.style.width = `${newWidth}px`;
+        // Emit resize event for persistence
+        this.dispatchEvent(new CustomEvent('resize', { detail: { width: newWidth }, bubbles: true, composed: true }));
+      } else {
+        const newHeight = Math.max(200, Math.min(window.innerHeight - 50, this.startHeight + (this.startY - e.clientY)));
+        this.panel.style.height = `${newHeight}px`;
+        this.dispatchEvent(new CustomEvent('resize', { detail: { height: newHeight }, bubbles: true, composed: true }));
+      }
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    };
+
+    handle.addEventListener('mousedown', (e) => {
+      // 移动端禁用拖拽
+      if (this.isMobile()) return;
+      
+      this.startX = e.clientX;
+      this.startY = e.clientY;
+      
+      if (this.panel) {
+        if (this.panel.classList.contains('dock-bottom')) {
+          this.mode = 'bottom';
+          this.startHeight = this.panel.offsetHeight;
+        } else {
+          this.mode = 'right';
+          this.startWidth = this.panel.offsetWidth;
+        }
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = this.mode === 'right' ? 'col-resize' : 'row-resize';
+    });
+  }
+
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          display: block;
+          z-index: 100;
+        }
+        .handle {
+          background: transparent;
+          transition: background 0.2s;
+        }
+        .handle:hover {
+          background: var(--hs-primary);
+        }
+        
+        /* Right Dock Mode (Vertical Handle on Left) */
+        :host-context(.dock-right) .handle {
+          width: 4px;
+          height: 100%;
+          cursor: col-resize;
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+
+        /* Bottom Dock Mode (Horizontal Handle on Top) */
+        :host-context(.dock-bottom) .handle {
+          width: 100%;
+          height: 4px;
+          cursor: row-resize;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        
+        /* 移动端隐藏拖拽手柄 */
+        @media (max-width: 480px) {
+          .handle {
+            display: none;
+          }
+        }
+      </style>
+      <div class="handle"></div>
+    `;
+  }
+}
+
+customElements.define('hs-resizer', Resizer);

package/src/ui/components/task-detail.ts

@@ -0,0 +1,228 @@
+import { themeStyles } from '../styles/theme.css';
+import { TaskSnapshot, ExecutionRecord } from '../../types';
+import { t } from '../i18n';
+import { ICONS } from './icons';
+
+export class TaskDetail extends HTMLElement {
+  private _shadow: ShadowRoot;
+  private _task: TaskSnapshot | null = null;
+  private _history: ExecutionRecord[] = [];
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this._shadow.addEventListener('click', (e) => {
+      if ((e.target as Element).closest('.back-btn')) {
+        this.dispatchEvent(new CustomEvent('back'));
+      }
+    });
+  }
+
+  set task(task: TaskSnapshot | null) {
+    this._task = task;
+    this.renderContent();
+  }
+
+  set history(h: ExecutionRecord[]) {
+    this._history = h || [];
+    this.renderContent();
+  }
+
+  // Method to update texts when language changes
+  updateTexts() {
+    this.renderContent();
+  }
+
+  private renderContent() {
+    const container = this._shadow.querySelector('.content');
+    if (!container) return;
+
+    if (!this._task) {
+      container.innerHTML = `<div class="empty">${t('detail.noTask')}</div>`;
+      return;
+    }
+
+    const task = this._task;
+    const config = {
+      id: task.id,
+      schedule: task.schedule,
+      tags: task.tags,
+    };
+
+    // Calculate average duration
+    const avgDuration = this._history.length > 0
+      ? Math.round(this._history.reduce((sum, r) => sum + r.duration, 0) / this._history.length)
+      : 0;
+
+    container.innerHTML = `
+      <div class="header">
+        <button class="back-btn" title="${t('detail.back')}">${ICONS.back}</button>
+        <h2>📂 ${task.id}</h2>
+      </div>
+      
+      <div class="section">
+        <div class="config-label">${t('detail.config')}:</div>
+        <pre>${JSON.stringify(config, null, 2)}</pre>
+      </div>
+
+      <div class="section">
+        <h3>📜 ${t('detail.history')} (${t('detail.lastRuns', { n: this._history.length })}) ${avgDuration > 0 ? `- ${t('detail.avgDuration')}: ${avgDuration}ms` : ''}</h3>
+        <table class="history-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>${t('detail.startTime')}</th>
+              <th>${t('detail.duration')}</th>
+              <th>${t('detail.drift')}</th>
+              <th>${t('detail.status')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${this._history.length === 0 ? `<tr><td colspan="5" class="no-data">${t('detail.noHistory')}</td></tr>` : ''}
+            ${this._history.slice().reverse().map((run, idx) => {
+              const drift = 0; // TODO: calculate drift from expected vs actual time
+              const driftStr = drift > 0 ? `+${drift}ms` : drift < 0 ? `${drift}ms` : '0ms';
+              const statusIcon = run.success 
+                ? `✅ ${t('detail.success')}` 
+                : run.error 
+                  ? `❌ ${t('detail.error')}: ${run.error}` 
+                  : `⚠️ ${t('detail.failed')}`;
+              const durationClass = run.duration > 100 ? 'slow' : '';
+              
+              return `
+                <tr class="${run.success ? 'success' : 'error'}">
+                  <td class="col-num">${this._history.length - idx}</td>
+                  <td>${new Date(run.timestamp).toLocaleTimeString('en-US', { hour12: false })}</td>
+                  <td class="${durationClass}">${run.duration}ms</td>
+                  <td>${driftStr}</td>
+                  <td class="status-cell">${statusIcon}</td>
+                </tr>
+              `;
+            }).join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          display: block;
+          height: 100%;
+          background: var(--hs-bg);
+          overflow-y: auto;
+        }
+        .content {
+          padding: 16px;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          margin-bottom: 24px;
+          padding-bottom: 16px;
+          border-bottom: 2px solid var(--hs-border);
+        }
+        .back-btn {
+          background: var(--hs-bg-secondary);
+          border: 1px solid var(--hs-border);
+          color: var(--hs-text);
+          padding: 6px 12px;
+          border-radius: 4px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 12px;
+        }
+        .back-btn:hover {
+          background: var(--hs-primary);
+          color: white;
+          border-color: var(--hs-primary);
+        }
+        h2 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+        }
+        h3 {
+          font-size: 13px;
+          color: var(--hs-text);
+          margin-bottom: 12px;
+          font-weight: 600;
+        }
+        .section {
+          margin-bottom: 32px;
+        }
+        .config-label {
+          font-size: 12px;
+          color: var(--hs-text-secondary);
+          margin-bottom: 8px;
+        }
+        pre {
+          background: var(--hs-bg-secondary);
+          padding: 12px;
+          border-radius: 6px;
+          border: 1px solid var(--hs-border);
+          font-family: 'Monaco', 'Menlo', monospace;
+          font-size: 11px;
+          overflow-x: auto;
+          line-height: 1.5;
+        }
+        .history-table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 11px;
+        }
+        .history-table th {
+          text-align: left;
+          padding: 8px;
+          border-bottom: 2px solid var(--hs-border);
+          color: var(--hs-text-secondary);
+          font-weight: 600;
+          background: var(--hs-bg-secondary);
+        }
+        .history-table td {
+          padding: 8px;
+          border-bottom: 1px solid var(--hs-border);
+        }
+        .history-table tr.success {
+          background: rgba(34, 197, 94, 0.05);
+        }
+        .history-table tr.error {
+          background: rgba(239, 68, 68, 0.05);
+        }
+        .history-table tr:hover {
+          background: var(--hs-bg-secondary);
+        }
+        .col-num {
+          width: 40px;
+          color: var(--hs-text-secondary);
+        }
+        .slow {
+          color: var(--hs-warning);
+          font-weight: 600;
+        }
+        .status-cell {
+          font-size: 11px;
+        }
+        .no-data {
+          color: var(--hs-text-secondary);
+          font-style: italic;
+          text-align: center;
+          padding: 24px;
+        }
+      </style>
+      <div class="content"></div>
+    `;
+  }
+}
+
+customElements.define('hs-task-detail', TaskDetail);

package/src/ui/components/task-header.ts

@@ -0,0 +1,319 @@
+import { themeStyles } from '../styles/theme.css';
+import { ICONS } from './icons';
+import { t } from '../i18n';
+
+export class TaskHeader extends HTMLElement {
+  private _shadow: ShadowRoot;
+  private _fps: number = 0;
+  private _stats: { active: number; total: number } = { active: 0, total: 0 };
+  private _theme: 'light' | 'dark' | 'auto' = 'auto';
+  private _activeTab: 'tasks' | 'timeline' = 'tasks';
+  private _language: 'en' | 'zh' = 'en';
+  private _schedulerRunning: boolean = false;
+
+  private $fps!: HTMLElement;
+  private $stats!: HTMLElement;
+  private $schedulerStatus!: HTMLElement;
+  private $themeIcon!: HTMLElement;
+  private $dockIcon!: HTMLElement;
+  private $tabs!: NodeListOf<HTMLElement>;
+  private $searchInput!: HTMLInputElement;
+  private $title!: HTMLElement;
+  private $langBtn!: HTMLElement;
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.cacheDom();
+    this.addEventListeners();
+    this.updateView();
+  }
+
+  set fps(val: number) {
+    this._fps = Math.round(val);
+    if (this.$fps) {
+      const color = this._fps < 30 ? 'var(--hs-danger)' : (this._fps < 50 ? 'var(--hs-warning)' : 'var(--hs-success)');
+      this.$fps.innerHTML = `⚡ ${t('stats.fps')}: <span style="color:${color}">${this._fps}</span> (${t('stats.mainThread')})`;
+    }
+  }
+
+  set stats(val: { active: number; total: number }) {
+    this._stats = val;
+    if (this.$stats) {
+      this.$stats.innerHTML = `📊 ${t('stats.status')}: <span style="color:var(--hs-success)">🟢 ${t('stats.active')}: ${val.active}</span> <span style="margin-left:12px;color:var(--hs-text-secondary)">⚪ ${t('stats.total')}: ${val.total}</span>`;
+    }
+  }
+
+  set schedulerRunning(val: boolean) {
+    this._schedulerRunning = val;
+    if (this.$schedulerStatus) {
+      const statusText = val ? t('stats.running') : t('stats.stopped');
+      const statusColor = val ? 'var(--hs-success)' : 'var(--hs-danger)';
+      const statusIcon = val ? '▶️' : '⏹️';
+      this.$schedulerStatus.innerHTML = `${statusIcon} ${t('stats.scheduler')}: <span style="color:${statusColor}">${statusText}</span>`;
+    }
+  }
+
+  set theme(val: 'light' | 'dark' | 'auto') {
+    this._theme = val;
+    this.setAttribute('theme', val);
+    this.updateThemeIcon();
+  }
+
+  set language(val: 'en' | 'zh') {
+    this._language = val;
+    this.updateTexts();
+  }
+
+  set dockPosition(val: 'right' | 'bottom') {
+    if (this.$dockIcon) {
+      // 显示目标位置的图标（点击后切换到的位置）
+      // right -> 显示 dock (底部图标)，表示可以切换到底部
+      // bottom -> 显示 dockRight (右侧图标)，表示可以切换到右侧
+      this.$dockIcon.innerHTML = val === 'right' ? ICONS.dock : ICONS.dockRight;
+      this.$dockIcon.parentElement?.setAttribute('title', t('header.toggleDock'));
+    }
+  }
+
+  set activeTab(val: 'tasks' | 'timeline') {
+    this._activeTab = val;
+    this.updateTabs();
+  }
+
+  private cacheDom() {
+    this.$fps = this._shadow.querySelector('.fps')!;
+    this.$stats = this._shadow.querySelector('.stats')!;
+    this.$schedulerStatus = this._shadow.querySelector('.scheduler-status')!;
+    this.$themeIcon = this._shadow.querySelector('.theme-btn span')!;
+    this.$dockIcon = this._shadow.querySelector('.dock-btn')!;
+    this.$tabs = this._shadow.querySelectorAll('.tab');
+    this.$searchInput = this._shadow.querySelector('.search-input')!;
+    this.$title = this._shadow.querySelector('.title')!;
+    this.$langBtn = this._shadow.querySelector('.lang-btn')!;
+  }
+
+  private addEventListeners() {
+    this._shadow.querySelector('.dock-btn')?.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('dock-toggle'));
+    });
+
+    this._shadow.querySelector('.theme-btn')?.addEventListener('click', () => {
+      const newTheme = this._theme === 'dark' ? 'light' : 'dark'; 
+      this.dispatchEvent(new CustomEvent('theme-toggle', { detail: newTheme }));
+    });
+
+    this._shadow.querySelector('.lang-btn')?.addEventListener('click', () => {
+      const newLang = this._language === 'en' ? 'zh' : 'en';
+      this.dispatchEvent(new CustomEvent('lang-toggle', { detail: newLang }));
+    });
+
+    this._shadow.querySelector('.close-btn')?.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('close'));
+    });
+    
+    this.$tabs.forEach(tab => {
+      tab.addEventListener('click', (e) => {
+        const target = (e.currentTarget as HTMLElement).dataset.tab;
+        this.dispatchEvent(new CustomEvent('tab-change', { detail: target }));
+      });
+    });
+
+    this.$searchInput?.addEventListener('input', (e) => {
+      const val = (e.target as HTMLInputElement).value;
+      this.dispatchEvent(new CustomEvent('search', { detail: val }));
+    });
+  }
+
+  private updateThemeIcon() {
+    if (this.$themeIcon) {
+      this.$themeIcon.innerHTML = this._theme === 'dark' ? ICONS.moon : ICONS.sun;
+    }
+  }
+  
+  private updateTabs() {
+    this.$tabs.forEach(tab => {
+      if (tab.dataset.tab === this._activeTab) {
+        tab.classList.add('active');
+      } else {
+        tab.classList.remove('active');
+      }
+    });
+  }
+
+  private updateTexts() {
+    if (this.$title) this.$title.innerHTML = `🕒 ${t('header.title')}`;
+    if (this.$searchInput) this.$searchInput.placeholder = t('header.searchPlaceholder');
+    // 显示目标语言（点击后切换到的语言）
+    if (this.$langBtn) this.$langBtn.textContent = this._language === 'en' ? '中' : 'EN';
+    
+    this.$tabs.forEach(tab => {
+      const key = tab.dataset.tab;
+      if (key === 'tasks') tab.innerHTML = `📌 ${t('tabs.tasks')}`;
+      if (key === 'timeline') tab.innerHTML = `📈 ${t('tabs.timeline')}`;
+    });
+
+    // Force update stats, fps, and scheduler status to refresh labels
+    this.stats = this._stats;
+    this.fps = this._fps;
+    this.schedulerRunning = this._schedulerRunning;
+  }
+
+  private updateView() {
+    this.updateThemeIcon();
+    this.updateTabs();
+    this.updateTexts();
+  }
+
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          display: block;
+          background: var(--hs-bg);
+          border-bottom: 1px solid var(--hs-border);
+          padding: 0 16px;
+          height: var(--hs-header-height);
+          height: auto; 
+        }
+        .top-bar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 40px;
+          border-bottom: 1px solid var(--hs-border);
+        }
+        .title {
+          font-weight: 600;
+          font-size: 13px;
+          color: var(--hs-text);
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        .search-box {
+          flex: 1;
+          max-width: 300px;
+          margin: 0px 32px 0 16px;
+        }
+        .search-input {
+          width: 100%;
+          background: var(--hs-bg-secondary);
+          border: 1px solid var(--hs-border);
+          color: var(--hs-text);
+          padding: 6px 12px;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+        .search-input::placeholder {
+          color: var(--hs-text-secondary);
+        }
+        .controls {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+        button {
+          background: transparent;
+          border: none;
+          color: var(--hs-text-secondary);
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          width: 28px;
+          height: 28px;
+        }
+        .theme-btn span {
+          margin-top: 4px;
+        }
+        button:hover {
+          background: var(--hs-bg-secondary);
+          color: var(--hs-text);
+        }
+        button svg {
+          width: 16px;
+          height: 16px;
+        }
+        .lang-btn {
+          font-weight: 600;
+        }
+        .stats-bar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 30px;
+          font-size: 11px;
+          color: var(--hs-text-secondary);
+          border-bottom: 1px solid var(--hs-border);
+          gap: 16px;
+        }
+        .stats-left {
+          display: flex;
+          gap: 16px;
+        }
+        .tabs-bar {
+          display: flex;
+          height: 36px;
+          gap: 0;
+        }
+        .tab {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 12px;
+          color: var(--hs-text-secondary);
+          cursor: pointer;
+          border-bottom: 3px solid transparent;
+          padding: 0 16px;
+          transition: all 0.2s;
+        }
+        .tab:hover {
+          color: var(--hs-text);
+          background: var(--hs-bg-secondary);
+        }
+        .tab.active {
+          color: var(--hs-text);
+          font-weight: 600;
+          border-bottom-color: var(--hs-primary);
+          background: var(--hs-bg-secondary);
+        }
+      </style>
+      
+      <div class="top-bar">
+        <div class="title"></div>
+        <div class="search-box">
+          <input type="text" class="search-input">
+        </div>
+        <div class="controls">
+          <button class="lang-btn" title="Switch Language">EN</button>
+          <button class="dock-btn" title="Toggle Dock">${ICONS.dock}</button>
+          <button class="theme-btn" title="Toggle Theme"><span>${ICONS.sun}</span></button>
+          <button class="close-btn" title="Close">${ICONS.close}</button>
+        </div>
+      </div>
+      
+      <div class="stats-bar">
+        <div class="stats-left">
+          <div class="scheduler-status"></div>
+          <div class="stats"></div>
+        </div>
+        <div class="fps"></div>
+      </div>
+      
+      <div class="tabs-bar">
+        <div class="tab active" data-tab="tasks"></div>
+        <div class="tab" data-tab="timeline"></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('hs-task-header', TaskHeader);