hyper-scheduler 1.0.0 → 1.0.1

package/src/ui/components/resizer.ts

@@ -1,129 +0,0 @@
-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

@@ -1,228 +0,0 @@
-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

@@ -1,319 +0,0 @@
-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);