hyper-scheduler 1.0.0 → 1.0.1

package/dist/devtools-4xVHTaUz.js

@@ -0,0 +1,2161 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { TaskStatus, SchedulerEvents } from "./index.js";
+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"
+  }
+};
+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: "删除任务"
+  }
+};
+let translations = en;
+function setLanguage(lang) {
+  translations = lang === "zh" ? zh : en;
+}
+function t(key, params) {
+  const keys = key.split(".");
+  let value = translations;
+  for (const k of keys) {
+    if (value && typeof value === "object" && k in value) {
+      value = value[k];
+    } else {
+      return key;
+    }
+  }
+  if (typeof value !== "string") {
+    return key;
+  }
+  if (params) {
+    return value.replace(/\{(\w+)\}/g, (_, k) => {
+      return params[k] !== void 0 ? String(params[k]) : `{${k}}`;
+    });
+  }
+  return value;
+}
+class DevToolsStore {
+  constructor() {
+    __publicField(this, "state");
+    __publicField(this, "listeners");
+    __publicField(this, "scheduler");
+    this.state = {
+      isOpen: false,
+      activeTab: "tasks",
+      theme: "auto",
+      dockPosition: "right",
+      panelSize: { width: 500, height: 500 },
+      language: "en",
+      filterText: "",
+      selectedTaskId: null,
+      tasks: /* @__PURE__ */ new Map(),
+      history: /* @__PURE__ */ new Map(),
+      fps: 0,
+      schedulerRunning: false
+    };
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  setScheduler(scheduler) {
+    this.scheduler = scheduler;
+  }
+  getState() {
+    return this.state;
+  }
+  subscribe(key, callback) {
+    if (!this.listeners.has(key)) {
+      this.listeners.set(key, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(key).add(callback);
+    return () => {
+      var _a;
+      (_a = this.listeners.get(key)) == null ? void 0 : _a.delete(callback);
+    };
+  }
+  notify(key, value) {
+    var _a;
+    (_a = this.listeners.get(key)) == null ? void 0 : _a.forEach((cb) => cb(value));
+  }
+  toggle() {
+    this.state.isOpen = !this.state.isOpen;
+    this.notify("isOpen", this.state.isOpen);
+  }
+  setTheme(theme) {
+    this.state.theme = theme;
+    this.notify("theme", this.state.theme);
+  }
+  /**
+   * Set language synchronously without notifying listeners.
+   * Used during initialization before child components render.
+   */
+  setLanguageSync(lang) {
+    setLanguage(lang);
+    this.state.language = lang;
+  }
+  setLanguage(lang) {
+    setLanguage(lang);
+    this.state.language = lang;
+    this.notify("language", this.state.language);
+  }
+  setPanelSize(size) {
+    this.state.panelSize = { ...this.state.panelSize, ...size };
+    try {
+      localStorage.setItem("hs-panel-size", JSON.stringify(this.state.panelSize));
+    } catch (e) {
+    }
+    this.notify("panelSize", this.state.panelSize);
+  }
+  setTab(tab) {
+    this.state.activeTab = tab;
+    this.notify("activeTab", this.state.activeTab);
+  }
+  setDockPosition(pos) {
+    this.state.dockPosition = pos;
+    this.notify("dockPosition", this.state.dockPosition);
+  }
+  setFilterText(text) {
+    this.state.filterText = text;
+    this.notify("filterText", this.state.filterText);
+  }
+  updateTask(task) {
+    const newTasks = new Map(this.state.tasks);
+    newTasks.set(task.id, task);
+    this.state.tasks = newTasks;
+    this.notify("tasks", this.state.tasks);
+    if ("history" in task && Array.isArray(task.history)) {
+      const newHistory = new Map(this.state.history);
+      newHistory.set(task.id, task.history);
+      this.state.history = newHistory;
+      this.notify("history", this.state.history);
+    }
+  }
+  selectTask(id) {
+    this.state.selectedTaskId = id;
+    this.notify("selectedTaskId", id);
+  }
+  addHistory(taskId, record) {
+    const list = [...this.state.history.get(taskId) || []];
+    list.push(record);
+    if (list.length > 50) {
+      list.splice(0, list.length - 50);
+    }
+    const newHistory = new Map(this.state.history);
+    newHistory.set(taskId, list);
+    this.state.history = newHistory;
+    this.notify("history", newHistory);
+  }
+  async triggerTask(id) {
+    if (this.scheduler) {
+      await this.scheduler.trigger(id);
+    }
+  }
+  stopTask(id) {
+    console.log("[DevToolsStore] stopTask:", id);
+    if (this.scheduler) {
+      this.scheduler.pause(id);
+    }
+  }
+  startTask(id) {
+    console.log("[DevToolsStore] startTask:", id);
+    if (this.scheduler) {
+      this.scheduler.resume(id);
+    }
+  }
+  removeTask(id) {
+    if (this.scheduler) {
+      this.scheduler.remove(id);
+      const newTasks = new Map(this.state.tasks);
+      newTasks.delete(id);
+      this.state.tasks = newTasks;
+      this.notify("tasks", this.state.tasks);
+    }
+  }
+  setSchedulerRunning(running) {
+    this.state.schedulerRunning = running;
+    this.notify("schedulerRunning", running);
+  }
+}
+const themeStyles = `
+  :host {
+    --hs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --hs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --hs-font-size: 12px;
+    --hs-line-height: 1.5;
+    --hs-panel-width: 400px;
+    --hs-panel-height: 300px;
+    
+    /* Light Theme (Default) */
+    --hs-bg: #ffffff;
+    --hs-bg-secondary: #f3f4f6;
+    --hs-text: #1f2937;
+    --hs-text-secondary: #6b7280;
+    --hs-border: #e5e7eb;
+    --hs-primary: #3b82f6;
+    --hs-primary-hover: #2563eb;
+    --hs-danger: #ef4444;
+    --hs-danger-hover: #dc2626;
+    --hs-success: #10b981;
+    --hs-warning: #f59e0b;
+    
+    --hs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --hs-radius: 6px;
+    --hs-header-height: 40px;
+    --hs-z-index: 9999;
+
+    /* Default display styles for the host itself */
+    background: var(--hs-bg);
+    color: var(--hs-text);
+    font-family: var(--hs-font-family);
+    font-size: var(--hs-font-size);
+    line-height: var(--hs-line-height);
+  }
+
+  :host([theme="dark"]) {
+    --hs-bg: #111827;
+    --hs-bg-secondary: #1f2937;
+    --hs-text: #f9fafb;
+    --hs-text-secondary: #9ca3af;
+    --hs-border: #374151;
+    --hs-primary: #60a5fa;
+    --hs-primary-hover: #3b82f6;
+    --hs-danger: #f87171;
+    --hs-danger-hover: #ef4444;
+    --hs-success: #34d399;
+    --hs-warning: #fbbf24;
+    
+    --hs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+
+  :host {
+    background: var(--hs-bg);
+    color: var(--hs-text);
+  }
+`;
+const ICONS = {
+  back: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`,
+  trigger: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
+  pause: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>`,
+  resume: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`,
+  remove: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`,
+  close: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+  sun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`,
+  moon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`,
+  dock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="2" y1="15" x2="22" y2="15"></line></svg>`,
+  dockRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>`,
+  chart: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>`
+};
+class FloatingTrigger extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    // 配置属性
+    __publicField(this, "_position", "bottom-right");
+    __publicField(this, "_bgColor", "");
+    __publicField(this, "_textColor", "");
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["position", "bg-color", "text-color"];
+  }
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+  }
+  attributeChangedCallback(name, _oldVal, newVal) {
+    console.log("[FloatingTrigger] attributeChangedCallback:", name, newVal);
+    if (name === "position") {
+      this._position = newVal || "bottom-right";
+    } else if (name === "bg-color") {
+      this._bgColor = newVal || "";
+    } else if (name === "text-color") {
+      this._textColor = newVal || "";
+    }
+    if (this._shadow.querySelector("button")) {
+      console.log("[FloatingTrigger] re-rendering with:", this._position, this._bgColor, this._textColor);
+      this.render();
+      this.addEventListeners();
+    }
+  }
+  addEventListeners() {
+    const btn = this._shadow.querySelector("button");
+    btn == null ? void 0 : btn.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("toggle", { bubbles: true, composed: true }));
+    });
+  }
+  render() {
+    const pos = this._position;
+    const posStyles = `
+      top: ${pos.includes("top") ? "20px" : "auto"};
+      bottom: ${pos.includes("bottom") ? "20px" : "auto"};
+      left: ${pos.includes("left") ? "20px" : "auto"};
+      right: ${pos.includes("right") ? "20px" : "auto"};
+    `;
+    const bgStyle = this._bgColor ? `background: ${this._bgColor};` : "";
+    const colorStyle = this._textColor ? `color: ${this._textColor};` : "";
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        button {
+          position: fixed;
+          ${posStyles}
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          background: var(--hs-primary);
+          color: white;
+          ${bgStyle}
+          ${colorStyle}
+          border: none;
+          box-shadow: var(--hs-shadow);
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--hs-font-family);
+          z-index: var(--hs-z-index);
+          transition: transform 0.2s;
+        }
+        button:hover {
+          ${this._bgColor ? `background: ${this._bgColor}; filter: brightness(1.1);` : "background: var(--hs-primary-hover);"}
+          transform: scale(1.1);
+        }
+        button:active {
+          transform: scale(0.95);
+        }
+      </style>
+      <button title="Toggle Hyper Scheduler DevTools">
+        ${ICONS.chart}
+      </button>
+    `;
+  }
+}
+customElements.define("hs-floating-trigger", FloatingTrigger);
+class TaskHeader extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "_fps", 0);
+    __publicField(this, "_stats", { active: 0, total: 0 });
+    __publicField(this, "_theme", "auto");
+    __publicField(this, "_activeTab", "tasks");
+    __publicField(this, "_language", "en");
+    __publicField(this, "_schedulerRunning", false);
+    __publicField(this, "$fps");
+    __publicField(this, "$stats");
+    __publicField(this, "$schedulerStatus");
+    __publicField(this, "$themeIcon");
+    __publicField(this, "$dockIcon");
+    __publicField(this, "$tabs");
+    __publicField(this, "$searchInput");
+    __publicField(this, "$title");
+    __publicField(this, "$langBtn");
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+    this.cacheDom();
+    this.addEventListeners();
+    this.updateView();
+  }
+  set fps(val) {
+    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) {
+    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) {
+    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) {
+    this._theme = val;
+    this.setAttribute("theme", val);
+    this.updateThemeIcon();
+  }
+  set language(val) {
+    this._language = val;
+    this.updateTexts();
+  }
+  set dockPosition(val) {
+    var _a;
+    if (this.$dockIcon) {
+      this.$dockIcon.innerHTML = val === "right" ? ICONS.dock : ICONS.dockRight;
+      (_a = this.$dockIcon.parentElement) == null ? void 0 : _a.setAttribute("title", t("header.toggleDock"));
+    }
+  }
+  set activeTab(val) {
+    this._activeTab = val;
+    this.updateTabs();
+  }
+  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");
+  }
+  addEventListeners() {
+    var _a, _b, _c, _d, _e;
+    (_a = this._shadow.querySelector(".dock-btn")) == null ? void 0 : _a.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("dock-toggle"));
+    });
+    (_b = this._shadow.querySelector(".theme-btn")) == null ? void 0 : _b.addEventListener("click", () => {
+      const newTheme = this._theme === "dark" ? "light" : "dark";
+      this.dispatchEvent(new CustomEvent("theme-toggle", { detail: newTheme }));
+    });
+    (_c = this._shadow.querySelector(".lang-btn")) == null ? void 0 : _c.addEventListener("click", () => {
+      const newLang = this._language === "en" ? "zh" : "en";
+      this.dispatchEvent(new CustomEvent("lang-toggle", { detail: newLang }));
+    });
+    (_d = this._shadow.querySelector(".close-btn")) == null ? void 0 : _d.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("close"));
+    });
+    this.$tabs.forEach((tab) => {
+      tab.addEventListener("click", (e) => {
+        const target = e.currentTarget.dataset.tab;
+        this.dispatchEvent(new CustomEvent("tab-change", { detail: target }));
+      });
+    });
+    (_e = this.$searchInput) == null ? void 0 : _e.addEventListener("input", (e) => {
+      const val = e.target.value;
+      this.dispatchEvent(new CustomEvent("search", { detail: val }));
+    });
+  }
+  updateThemeIcon() {
+    if (this.$themeIcon) {
+      this.$themeIcon.innerHTML = this._theme === "dark" ? ICONS.moon : ICONS.sun;
+    }
+  }
+  updateTabs() {
+    this.$tabs.forEach((tab) => {
+      if (tab.dataset.tab === this._activeTab) {
+        tab.classList.add("active");
+      } else {
+        tab.classList.remove("active");
+      }
+    });
+  }
+  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")}`;
+    });
+    this.stats = this._stats;
+    this.fps = this._fps;
+    this.schedulerRunning = this._schedulerRunning;
+  }
+  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);
+class TaskList extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "_tasks", []);
+    __publicField(this, "_lastExecutionTimes", /* @__PURE__ */ new Map());
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  set tasks(map) {
+    const newTasks = Array.from(map.values());
+    newTasks.forEach((task) => {
+      const oldTask = this._tasks.find((t2) => t2.id === task.id);
+      if (oldTask && task.executionCount > oldTask.executionCount) {
+        this._lastExecutionTimes.set(task.id, Date.now());
+      }
+    });
+    this._tasks = newTasks;
+    this.renderRows();
+  }
+  filter(text, map) {
+    const all = Array.from(map.values());
+    if (!text) {
+      this._tasks = all;
+    } else {
+      const lower = text.toLowerCase();
+      this._tasks = all.filter(
+        (t2) => t2.id.toLowerCase().includes(lower) || t2.tags.some((tag) => tag.toLowerCase().includes(lower))
+      );
+    }
+    this.renderRows();
+  }
+  // Method to update table headers when language changes
+  updateHeaders() {
+    const thead = this._shadow.querySelector("thead");
+    if (thead) {
+      thead.innerHTML = `
+        <tr>
+          <th style="width:40px">#</th>
+          <th style="min-width:150px">${t("list.idTags")}</th>
+          <th style="width:150px">${t("list.status")}</th>
+          <th style="width:70px">${t("list.driver")}</th>
+          <th style="width:100px">${t("list.schedule")}</th>
+          <th style="width:60px">${t("list.count")}</th>
+          <th style="width:100px">${t("list.lastRun")}</th>
+          <th style="width:100px">${t("list.actions")}</th>
+        </tr>
+      `;
+    }
+    const tip = this._shadow.querySelector(".tip");
+    if (tip) {
+      tip.textContent = t("list.tip");
+    }
+    this.renderRows();
+  }
+  getStatusIcon(status, taskId) {
+    const lastExec = this._lastExecutionTimes.get(taskId);
+    const isRecentlyExecuted = lastExec && Date.now() - lastExec < 1e3;
+    switch (status) {
+      case TaskStatus.RUNNING:
+        return `<span style="color:var(--hs-primary)">🔵</span> <strong>${t("status.running")}</strong>`;
+      case TaskStatus.STOPPED:
+        return `<span style="color:var(--hs-text-secondary)">⚪</span> ${t("status.stopped")}`;
+      case TaskStatus.IDLE:
+        if (isRecentlyExecuted) {
+          return `<span class="status-flash" style="color:var(--hs-success)">🟢</span> ${t("status.idle")}`;
+        }
+        return `<span style="color:var(--hs-success)">🟢</span> ${t("status.idle")}`;
+      case TaskStatus.ERROR:
+        return `<span style="color:var(--hs-warning)">🟠</span> ${t("status.error")}`;
+      default:
+        return status;
+    }
+  }
+  formatSchedule(schedule) {
+    if (typeof schedule === "number") {
+      return `${schedule}ms`;
+    }
+    if (schedule && (schedule.includes("*") || schedule.includes(" "))) {
+      return schedule.length > 15 ? schedule.substring(0, 12) + "..." : schedule;
+    }
+    return schedule || "-";
+  }
+  formatTime(timestamp) {
+    if (!timestamp) return "-";
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }) + "." + date.getMilliseconds().toString().padStart(3, "0");
+  }
+  getDriverBadge(driver) {
+    const d = driver || "worker";
+    if (d === "worker") {
+      return `<span class="driver-badge worker" title="${t("list.driverWorker")}">W</span>`;
+    }
+    return `<span class="driver-badge main" title="${t("list.driverMain")}">M</span>`;
+  }
+  renderRows() {
+    const tbody = this._shadow.querySelector("tbody");
+    if (!tbody) return;
+    tbody.innerHTML = this._tasks.map((task, index) => {
+      const lastExec = this._lastExecutionTimes.get(task.id);
+      const isRecentlyExecuted = lastExec && Date.now() - lastExec < 1e3;
+      const rowClass = isRecentlyExecuted ? "recently-executed" : "";
+      return `
+      <tr data-id="${task.id}" class="${rowClass}">
+        <td class="col-num">${index + 1}</td>
+        <td class="col-id">
+          <div class="task-id">${task.id}</div>
+          <div class="tags">
+            ${task.tags && task.tags.length > 0 ? task.tags.map((t2) => `<span class="tag">${t2}</span>`).join("") : `<span class="no-tags">${t("list.noTags")}</span>`}
+          </div>
+        </td>
+        <td>${this.getStatusIcon(task.status, task.id)}</td>
+        <td>${this.getDriverBadge(task.driver)}</td>
+        <td>${this.formatSchedule(task.schedule)}</td>
+        <td>${task.executionCount || 0}</td>
+        <td>${this.formatTime(task.lastRun)}</td>
+        <td class="col-actions">
+          <div class="action-group">
+            <button class="btn-icon" data-action="trigger" title="${t("actions.trigger")}" ${task.status === TaskStatus.RUNNING ? "disabled" : ""}>${ICONS.trigger}</button>
+            ${task.status === TaskStatus.STOPPED || task.status === TaskStatus.ERROR ? `<button class="btn-icon success" data-action="start" title="${t("actions.start")}">${ICONS.resume}</button>` : `<button class="btn-icon warning" data-action="stop" title="${t("actions.stop")}" ${task.status === TaskStatus.RUNNING ? "disabled" : ""}>${ICONS.pause}</button>`}
+            <button class="btn-icon danger" data-action="remove" title="${t("actions.remove")}">${ICONS.remove}</button>
+          </div>
+        </td>
+      </tr>
+    `;
+    }).join("");
+  }
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--hs-bg);
+        }
+        .table-container {
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          overflow-x: auto;
+          position: relative;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: var(--hs-font-size);
+          color: var(--hs-text);
+        }
+        thead {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+          background: var(--hs-bg);
+        }
+        th {
+          text-align: left;
+          padding: 8px 12px;
+          border-bottom: 2px solid var(--hs-border);
+          color: var(--hs-text-secondary);
+          font-weight: 600;
+          background: var(--hs-bg);
+          font-size: 11px;
+          text-transform: uppercase;
+          white-space: nowrap;
+        }
+        th:last-child {
+          position: sticky;
+          right: 0;
+          background: var(--hs-bg);
+          box-shadow: -2px 0 4px rgba(0,0,0,0.1);
+        }
+        td {
+          padding: 8px 12px;
+          border-bottom: 1px solid var(--hs-border);
+          vertical-align: middle;
+        }
+        tr:hover {
+          background: var(--hs-bg-secondary);
+          cursor: pointer;
+        }
+        tr.recently-executed {
+          animation: flash-row 1s ease-out;
+        }
+        @keyframes flash-row {
+          0% { background: rgba(34, 197, 94, 0.2); }
+          100% { background: transparent; }
+        }
+        .status-flash {
+          animation: flash-icon 1s ease-out;
+        }
+        @keyframes flash-icon {
+          0%, 50% { opacity: 1; }
+          25%, 75% { opacity: 0.3; }
+        }
+        .tip {
+          padding: 12px;
+          text-align: center;
+          font-size: 11px;
+          color: var(--hs-text-secondary);
+          border-top: 1px solid var(--hs-border);
+          background: var(--hs-bg);
+        }
+        .task-id {
+          font-weight: 600;
+        }
+        .tags {
+          display: flex;
+          gap: 4px;
+          margin-top: 4px;
+        }
+        .tag {
+          background: var(--hs-bg-secondary);
+          border: 1px solid var(--hs-border);
+          border-radius: 10px;
+          padding: 2px 8px;
+          font-size: 10px;
+          color: var(--hs-text-secondary);
+        }
+        .no-tags {
+          font-size: 10px;
+          color: var(--hs-text-secondary);
+          font-style: italic;
+        }
+        .driver-badge {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 22px;
+          height: 22px;
+          border-radius: 4px;
+          font-size: 11px;
+          font-weight: 600;
+          font-family: monospace;
+        }
+        .driver-badge.worker {
+          background: rgba(34, 197, 94, 0.15);
+          color: var(--hs-success);
+          border: 1px solid var(--hs-success);
+        }
+        .driver-badge.main {
+          background: rgba(245, 158, 11, 0.15);
+          color: var(--hs-warning);
+          border: 1px solid var(--hs-warning);
+        }
+        .col-num {
+          width: 40px;
+          color: var(--hs-text-secondary);
+          font-size: 11px;
+        }
+        .col-actions {
+          width: 100px;
+          position: sticky;
+          right: 0;
+          background: var(--hs-bg);
+          box-shadow: -2px 0 4px rgba(0,0,0,0.1);
+        }
+        .action-group {
+          display: flex;
+          gap: 4px;
+        }
+        .btn-icon {
+          background: transparent;
+          border: 1px solid var(--hs-border);
+          color: var(--hs-text-secondary);
+          border-radius: 4px;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          padding: 0;
+          flex-shrink: 0;
+        }
+        .btn-icon svg {
+          width: 14px;
+          height: 14px;
+          display: block;
+        }
+        .btn-icon:hover {
+          background: var(--hs-primary);
+          color: white;
+          border-color: var(--hs-primary);
+        }
+        .btn-trigger:hover {
+          background: var(--hs-success);
+          border-color: var(--hs-success);
+        }
+        .btn-pause:hover {
+          background: var(--hs-warning);
+          border-color: var(--hs-warning);
+        }
+        .btn-resume:hover {
+          background: var(--hs-success);
+          border-color: var(--hs-success);
+        }
+        .btn-remove:hover {
+          color: white;
+          background: var(--hs-danger);
+          border-color: var(--hs-danger);
+        }
+        .btn-icon:disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+        }
+        .btn-icon:disabled:hover {
+          background: transparent;
+          color: var(--hs-text-secondary);
+          border-color: var(--hs-border);
+        }
+      </style>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:40px">#</th>
+              <th style="min-width:150px">${t("list.idTags")}</th>
+              <th style="width:150px">${t("list.status")}</th>
+              <th style="width:70px">${t("list.driver")}</th>
+              <th style="width:100px">${t("list.schedule")}</th>
+              <th style="width:60px">${t("list.count")}</th>
+              <th style="width:100px">${t("list.lastRun")}</th>
+              <th style="width:100px">${t("list.actions")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Rows -->
+          </tbody>
+        </table>
+      </div>
+      <div class="tip">
+        ${t("list.tip")}
+      </div>
+    `;
+    this._shadow.addEventListener("click", (e) => {
+      const target = e.target;
+      const btn = target.closest("button");
+      if (btn) {
+        const action = btn.dataset.action;
+        const tr2 = btn.closest("tr");
+        if (!action || !tr2) return;
+        const id = tr2.dataset.id;
+        this.dispatchEvent(new CustomEvent("task-action", {
+          detail: { action, id },
+          bubbles: true,
+          composed: true
+        }));
+        return;
+      }
+      const tr = target.closest("tr");
+      if (tr && !target.closest(".col-actions")) {
+        const id = tr.dataset.id;
+        this.dispatchEvent(new CustomEvent("task-select", {
+          detail: id,
+          bubbles: true,
+          composed: true
+        }));
+      }
+    });
+  }
+}
+customElements.define("hs-task-list", TaskList);
+class TaskDetail extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "_task", null);
+    __publicField(this, "_history", []);
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+    this._shadow.addEventListener("click", (e) => {
+      if (e.target.closest(".back-btn")) {
+        this.dispatchEvent(new CustomEvent("back"));
+      }
+    });
+  }
+  set task(task) {
+    this._task = task;
+    this.renderContent();
+  }
+  set history(h) {
+    this._history = h || [];
+    this.renderContent();
+  }
+  // Method to update texts when language changes
+  updateTexts() {
+    this.renderContent();
+  }
+  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
+    };
+    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 driftStr = "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);
+class Timeline extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "_tasks", /* @__PURE__ */ new Map());
+    __publicField(this, "_history", /* @__PURE__ */ new Map());
+    __publicField(this, "$canvas");
+    __publicField(this, "ctx");
+    __publicField(this, "timeRange", 60 * 1e3);
+    // 1 minute window
+    __publicField(this, "zoom", 1);
+    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();
+    const container = this._shadow.querySelector(".canvas-container");
+    if (container) {
+      const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => this.draw());
+      });
+      resizeObserver.observe(container);
+    }
+  }
+  set data(val) {
+    this._tasks = val.tasks;
+    this._history = val.history;
+  }
+  set defaultZoom(val) {
+    if (val >= 0.5 && val <= 5) {
+      this.zoom = val;
+      this.timeRange = 60 * 1e3 / this.zoom;
+      const zoomSlider = this._shadow.querySelector(".zoom-slider");
+      if (zoomSlider) zoomSlider.value = val.toString();
+      this.updateZoomLabel();
+    }
+  }
+  // Method to update texts when language changes
+  updateTexts() {
+    this.updateZoomLabel();
+  }
+  updateZoomLabel() {
+    const zoomLabel = this._shadow.querySelector(".zoom-label");
+    if (zoomLabel) {
+      zoomLabel.textContent = `${t("timeline.zoom")}: ${this.zoom}x (${Math.round(this.timeRange / 1e3)}s)`;
+    }
+  }
+  setupZoom() {
+    const zoomSlider = this._shadow.querySelector(".zoom-slider");
+    const zoomOut = this._shadow.querySelector(".zoom-out");
+    const zoomIn = this._shadow.querySelector(".zoom-in");
+    const updateZoom = (newZoom) => {
+      this.zoom = newZoom;
+      this.timeRange = 60 * 1e3 / this.zoom;
+      this.updateZoomLabel();
+    };
+    zoomSlider == null ? void 0 : zoomSlider.addEventListener("input", (e) => {
+      const newZoom = parseFloat(e.target.value);
+      updateZoom(newZoom);
+    });
+    zoomOut == null ? void 0 : zoomOut.addEventListener("click", () => {
+      const newZoom = Math.max(0.5, this.zoom - 0.5);
+      if (zoomSlider) zoomSlider.value = newZoom.toString();
+      updateZoom(newZoom);
+    });
+    zoomIn == null ? void 0 : zoomIn.addEventListener("click", () => {
+      const newZoom = Math.min(5, this.zoom + 0.5);
+      if (zoomSlider) zoomSlider.value = newZoom.toString();
+      updateZoom(newZoom);
+    });
+    this.updateZoomLabel();
+  }
+  startLoop() {
+    const loop = () => {
+      if (this.isConnected) {
+        this.draw();
+        requestAnimationFrame(loop);
+      }
+    };
+    requestAnimationFrame(loop);
+  }
+  draw() {
+    if (!this.ctx || !this.$canvas) return;
+    const container = this._shadow.querySelector(".canvas-container");
+    if (!container) return;
+    const dpr = window.devicePixelRatio || 1;
+    const width = container.clientWidth;
+    if (width === 0) return;
+    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);
+    this.$canvas.width = width * dpr;
+    this.$canvas.height = height * dpr;
+    this.$canvas.style.width = `${width}px`;
+    this.$canvas.style.height = `${height}px`;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const now = Date.now();
+    const startTime = now - this.timeRange;
+    const labelWidth = 150;
+    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";
+    this.ctx.fillStyle = bgColor;
+    this.ctx.fillRect(0, 0, width, height);
+    this.drawTimeAxis(width, labelWidth, startTime, textSecondary, borderColor);
+    taskIds.forEach((taskId, index) => {
+      const y = index * rowHeight + 60;
+      this.drawTaskRow(taskId, y, width, labelWidth, startTime, now, textColor, textSecondary, borderColor, successColor, dangerColor);
+    });
+    this.drawLegend(width, height, textSecondary, successColor);
+  }
+  drawTimeAxis(width, labelWidth, startTime, textSecondary, borderColor) {
+    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);
+      ctx.strokeStyle = borderColor;
+      ctx.beginPath();
+      ctx.moveTo(x, 40);
+      ctx.lineTo(x, this.$canvas.clientHeight - 40);
+      ctx.stroke();
+    }
+    ctx.textAlign = "left";
+    ctx.fillText(t("timeline.timeRange", { n: Math.round(this.timeRange / 1e3) }), 10, 15);
+  }
+  drawTaskRow(taskId, y, width, labelWidth, startTime, endTime, textColor, _textSecondary, borderColor, successColor, dangerColor) {
+    const ctx = this.ctx;
+    const timelineWidth = width - labelWidth - 20;
+    ctx.fillStyle = textColor;
+    ctx.font = "11px sans-serif";
+    ctx.textAlign = "left";
+    ctx.fillText(taskId, 10, y + 15);
+    const task = this._tasks.get(taskId);
+    const driver = (task == null ? void 0 : task.driver) === "main" ? "M" : "W";
+    const driverColor = driver === "W" ? "#22c55e" : "#f59e0b";
+    ctx.fillStyle = driverColor;
+    ctx.font = "9px monospace";
+    ctx.fillText(`[${driver}]`, 10, y + 28);
+    ctx.strokeStyle = borderColor;
+    ctx.beginPath();
+    ctx.moveTo(0, y + 35);
+    ctx.lineTo(width, y + 35);
+    ctx.stroke();
+    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) {
+        ctx.fillStyle = log.success ? successColor : dangerColor;
+        ctx.beginPath();
+        ctx.arc(x, y + 15, 3, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        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;
+      }
+    });
+  }
+  drawLegend(_width, height, textSecondary, successColor) {
+    const ctx = this.ctx;
+    const legendY = height - 25;
+    ctx.font = "10px sans-serif";
+    ctx.textAlign = "left";
+    ctx.fillStyle = textSecondary;
+    let x = 10;
+    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;
+    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;
+    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);
+class Resizer extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "startX", 0);
+    __publicField(this, "startY", 0);
+    __publicField(this, "startWidth", 0);
+    __publicField(this, "startHeight", 0);
+    __publicField(this, "panel", null);
+    __publicField(this, "mode", "right");
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  // 检测是否为移动端
+  isMobile() {
+    return window.innerWidth <= 480;
+  }
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+    this.panel = this.closest(".panel");
+    if (this.panel && this.panel.classList.contains("dock-bottom")) {
+      this.mode = "bottom";
+    }
+  }
+  addEventListeners() {
+    const handle = this._shadow.querySelector(".handle");
+    const onMouseMove = (e) => {
+      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`;
+        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);
+class DevTools extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "_shadow");
+    __publicField(this, "store");
+    __publicField(this, "scheduler");
+    __publicField(this, "rAFId");
+    __publicField(this, "lastTime", 0);
+    __publicField(this, "$panel");
+    __publicField(this, "$header");
+    __publicField(this, "$taskList");
+    __publicField(this, "$taskDetail");
+    __publicField(this, "$timeline");
+    __publicField(this, "$trigger");
+    this._shadow = this.attachShadow({ mode: "open" });
+    this.store = new DevToolsStore();
+  }
+  connectedCallback() {
+    const languageAttr = this.getAttribute("language");
+    if (languageAttr === "en" || languageAttr === "zh") {
+      this.store.setLanguageSync(languageAttr);
+    }
+    this.render();
+    this.cacheDom();
+    this.bindStore();
+    const dockAttr = this.getAttribute("dock");
+    console.log("[DevTools] dock attribute:", dockAttr);
+    if (dockAttr === "bottom") {
+      this.store.setDockPosition("bottom");
+    }
+    const themeAttr = this.getAttribute("theme");
+    if (themeAttr === "light" || themeAttr === "dark" || themeAttr === "auto") {
+      this.store.setTheme(themeAttr);
+    }
+    if (languageAttr === "en" || languageAttr === "zh") {
+      this.store.setLanguage(languageAttr);
+    }
+    const triggerBg = this.getAttribute("trigger-bg");
+    const triggerColor = this.getAttribute("trigger-color");
+    const triggerPosition = this.getAttribute("trigger-position");
+    console.log("[DevTools] trigger attrs:", { triggerBg, triggerColor, triggerPosition });
+    if (triggerBg) this.$trigger.setAttribute("bg-color", triggerBg);
+    if (triggerColor) this.$trigger.setAttribute("text-color", triggerColor);
+    if (triggerPosition) this.$trigger.setAttribute("position", triggerPosition);
+    const defaultZoom = this.getAttribute("default-zoom");
+    if (defaultZoom) {
+      const zoom = parseFloat(defaultZoom);
+      if (!isNaN(zoom) && zoom >= 0.5 && zoom <= 5) {
+        this.$timeline.defaultZoom = zoom;
+      }
+    }
+    this.addEventListeners();
+    this.startLoop();
+  }
+  disconnectedCallback() {
+    if (this.rAFId) cancelAnimationFrame(this.rAFId);
+  }
+  setScheduler(api) {
+    this.scheduler = api;
+    this.store.setScheduler(api);
+    const tasks = this.scheduler.getTasks();
+    tasks.forEach((t2) => this.store.updateTask(t2));
+    const isRunning = this.scheduler.isRunning();
+    this.store.setSchedulerRunning(isRunning);
+    const refreshTasks = () => {
+      var _a;
+      const allTasks = ((_a = this.scheduler) == null ? void 0 : _a.getTasks()) || [];
+      allTasks.forEach((t2) => this.store.updateTask(t2));
+    };
+    this.scheduler.on(SchedulerEvents.TASK_REGISTERED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_UPDATED, (payload) => {
+      console.log("[DevTools] task_updated event:", payload);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.TASK_STARTED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_REMOVED, refreshTasks);
+    this.scheduler.on(SchedulerEvents.TASK_STOPPED, (payload) => {
+      console.log("[DevTools] task_stopped event:", payload);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.SCHEDULER_STARTED, () => {
+      console.log("[DevTools] scheduler_started event");
+      this.store.setSchedulerRunning(true);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.SCHEDULER_STOPPED, () => {
+      console.log("[DevTools] scheduler_stopped event");
+      this.store.setSchedulerRunning(false);
+      refreshTasks();
+    });
+    this.scheduler.on(SchedulerEvents.TASK_COMPLETED, (payload) => {
+      var _a;
+      refreshTasks();
+      if (payload && payload.taskId) {
+        this.store.addHistory(payload.taskId, {
+          timestamp: ((_a = payload.task) == null ? void 0 : _a.lastRun) || Date.now(),
+          duration: payload.duration || 0,
+          success: true,
+          error: null
+        });
+      }
+    });
+    this.scheduler.on(SchedulerEvents.TASK_FAILED, (payload) => {
+      var _a;
+      refreshTasks();
+      if (payload && payload.taskId) {
+        this.store.addHistory(payload.taskId, {
+          timestamp: ((_a = payload.task) == null ? void 0 : _a.lastRun) || Date.now(),
+          duration: payload.duration || 0,
+          success: false,
+          error: payload.error || "Unknown error"
+        });
+      }
+    });
+    setInterval(() => {
+      if (this.store.getState().isOpen) {
+        refreshTasks();
+      }
+    }, 500);
+  }
+  cacheDom() {
+    this.$panel = this._shadow.querySelector(".panel");
+    this.$header = this._shadow.querySelector("hs-task-header");
+    this.$taskList = this._shadow.querySelector("hs-task-list");
+    this.$taskDetail = this._shadow.querySelector("hs-task-detail");
+    this.$timeline = this._shadow.querySelector("hs-timeline");
+    this.$trigger = this._shadow.querySelector("hs-floating-trigger");
+  }
+  bindStore() {
+    try {
+      const saved = localStorage.getItem("hs-panel-size");
+      if (saved) {
+        this.store.setPanelSize(JSON.parse(saved));
+      }
+    } catch (e) {
+    }
+    this.store.subscribe("isOpen", (isOpen) => {
+      const pos = this.store.getState().dockPosition;
+      const size = this.store.getState().panelSize;
+      if (isOpen) {
+        this.$panel.classList.add("open");
+        this.$trigger.style.display = "none";
+        if (pos === "right") {
+          this.$panel.style.right = "0";
+        } else {
+          this.$panel.style.bottom = "0";
+        }
+      } else {
+        this.$panel.classList.remove("open");
+        this.$trigger.style.display = "block";
+        if (pos === "right") {
+          this.$panel.style.right = `-${size.width}px`;
+        } else {
+          this.$panel.style.bottom = `-${size.height}px`;
+        }
+      }
+    });
+    this.store.subscribe("theme", (theme) => {
+      const actualTheme = theme === "auto" ? "light" : theme;
+      this.setAttribute("theme", actualTheme);
+      this.$header.setAttribute("theme", actualTheme);
+      this.$taskList.setAttribute("theme", actualTheme);
+      this.$taskDetail.setAttribute("theme", actualTheme);
+      this.$timeline.setAttribute("theme", actualTheme);
+      this.$header.theme = theme;
+    });
+    this.store.subscribe("tasks", (tasks) => {
+      this.$taskList.tasks = tasks;
+      this.$timeline.data = { tasks, history: this.store.getState().history };
+      let active = 0;
+      tasks.forEach((t2) => {
+        if (t2.status === "idle" || t2.status === "running") active++;
+      });
+      this.$header.stats = { active, total: tasks.size };
+      const selectedId = this.store.getState().selectedTaskId;
+      if (selectedId && tasks.has(selectedId)) {
+        this.$taskDetail.task = tasks.get(selectedId) || null;
+      }
+    });
+    this.store.subscribe("history", (map) => {
+      this.$timeline.data = { tasks: this.store.getState().tasks, history: map };
+      const id = this.store.getState().selectedTaskId;
+      if (id) {
+        this.$taskDetail.history = map.get(id) || [];
+      }
+    });
+    this.store.subscribe("selectedTaskId", (id) => {
+      if (this.store.getState().activeTab !== "tasks") return;
+      if (id) {
+        this.$taskList.style.display = "none";
+        this.$taskDetail.style.display = "block";
+        const task = this.store.getState().tasks.get(id);
+        const history = this.store.getState().history.get(id);
+        this.$taskDetail.task = task || null;
+        this.$taskDetail.history = history || [];
+      } else {
+        this.$taskList.style.display = "block";
+        this.$taskDetail.style.display = "none";
+      }
+    });
+    this.store.subscribe("activeTab", (tab) => {
+      this.$header.activeTab = tab;
+      if (tab === "tasks") {
+        this.$taskList.style.display = "block";
+        this.$timeline.style.display = "none";
+        if (this.store.getState().selectedTaskId) {
+          this.$taskList.style.display = "none";
+          this.$taskDetail.style.display = "block";
+        } else {
+          this.$taskList.style.display = "block";
+          this.$taskDetail.style.display = "none";
+        }
+      } else {
+        this.$taskList.style.display = "none";
+        this.$taskDetail.style.display = "none";
+        this.$timeline.style.display = "block";
+      }
+    });
+    this.store.subscribe("dockPosition", (pos) => {
+      this.$header.dockPosition = pos;
+      const size = this.store.getState().panelSize;
+      const isOpen = this.store.getState().isOpen;
+      const isMobile = window.innerWidth <= 480;
+      if (pos === "right") {
+        this.$panel.classList.add("dock-right");
+        this.$panel.classList.remove("dock-bottom");
+        const width = isMobile ? window.innerWidth : size.width;
+        this.$panel.style.width = isMobile ? "100vw" : `${width}px`;
+        this.$panel.style.height = "100vh";
+        this.$panel.style.bottom = "";
+        this.$panel.style.right = isOpen ? "0" : `-${width}px`;
+      } else {
+        this.$panel.classList.add("dock-bottom");
+        this.$panel.classList.remove("dock-right");
+        this.$panel.style.width = "100%";
+        const height = isMobile ? "50vh" : `${size.height}px`;
+        this.$panel.style.height = height;
+        this.$panel.style.right = "";
+        this.$panel.style.bottom = isOpen ? "0" : isMobile ? "-50vh" : `-${size.height}px`;
+      }
+    });
+    this.store.subscribe("panelSize", (size) => {
+      const pos = this.store.getState().dockPosition;
+      if (pos === "right" && size.width) {
+        this.$panel.style.width = `${size.width}px`;
+        this.$panel.style.right = this.store.getState().isOpen ? "0" : `-${size.width}px`;
+      } else if (pos === "bottom" && size.height) {
+        this.$panel.style.height = `${size.height}px`;
+        this.$panel.style.bottom = this.store.getState().isOpen ? "0" : `-${size.height}px`;
+      }
+    });
+    this.store.subscribe("language", (lang) => {
+      var _a, _b, _c, _d;
+      this.$header.language = lang;
+      this.$taskList.updateHeaders();
+      (_b = (_a = this.$taskDetail).updateTexts) == null ? void 0 : _b.call(_a);
+      (_d = (_c = this.$timeline).updateTexts) == null ? void 0 : _d.call(_c);
+    });
+    this.store.subscribe("filterText", (text) => {
+      const tasks = this.store.getState().tasks;
+      this.$taskList.filter(text, tasks);
+    });
+    this.store.subscribe("schedulerRunning", (running) => {
+      this.$header.schedulerRunning = running;
+    });
+  }
+  addEventListeners() {
+    this.$trigger.addEventListener("toggle", () => {
+      this.store.toggle();
+    });
+    this.$header.addEventListener("close", (e) => {
+      e.stopPropagation();
+      this.store.toggle();
+    });
+    this.$header.addEventListener("dock-toggle", () => {
+      const current = this.store.getState().dockPosition;
+      this.store.setDockPosition(current === "right" ? "bottom" : "right");
+    });
+    this.$header.addEventListener("theme-toggle", (e) => {
+      const theme = e.detail;
+      this.store.setTheme(theme);
+    });
+    this.$header.addEventListener("lang-toggle", (e) => {
+      const lang = e.detail;
+      this.store.setLanguage(lang);
+    });
+    this.$header.addEventListener("tab-change", (e) => {
+      const tab = e.detail;
+      this.store.setTab(tab);
+    });
+    this.$header.addEventListener("search", (e) => {
+      const text = e.detail;
+      this.store.setFilterText(text);
+    });
+    this.addEventListener("resize", (e) => {
+      const size = e.detail;
+      this.store.setPanelSize(size);
+    });
+    this.$taskList.addEventListener("task-select", (e) => {
+      const id = e.detail;
+      this.store.selectTask(id);
+    });
+    this.$taskDetail.addEventListener("back", () => {
+      this.store.selectTask(null);
+    });
+    this.$taskList.addEventListener("task-action", (e) => {
+      const { action, id } = e.detail;
+      console.log("[DevTools] task-action:", action, id);
+      switch (action) {
+        case "trigger":
+          this.store.triggerTask(id);
+          break;
+        case "stop":
+          this.store.stopTask(id);
+          break;
+        case "start":
+          this.store.startTask(id);
+          break;
+        case "remove":
+          if (confirm(`Remove task "${id}"?`)) {
+            this.store.removeTask(id);
+          }
+          break;
+      }
+    });
+  }
+  startLoop() {
+    const loop = (time) => {
+      const delta = time - this.lastTime;
+      this.lastTime = time;
+      const fps = 1e3 / delta;
+      if (this.$header) {
+        this.$header.fps = fps;
+      }
+      this.rAFId = requestAnimationFrame(loop);
+    };
+    this.rAFId = requestAnimationFrame(loop);
+  }
+  render() {
+    this._shadow.innerHTML = `
+      <style>
+        ${themeStyles}
+        :host {
+          font-family: var(--hs-font-family);
+          font-size: var(--hs-font-size);
+          color: var(--hs-text);
+          line-height: var(--hs-line-height);
+        }
+        .panel {
+          position: fixed;
+          background: var(--hs-bg);
+          box-shadow: var(--hs-shadow);
+          z-index: var(--hs-z-index);
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+          border-left: 1px solid var(--hs-border);
+        }
+        /* Default Right Dock */
+        .panel.dock-right {
+          top: 0;
+          right: -500px;
+          width: 500px;
+          height: 100vh;
+          border-left: 1px solid var(--hs-border);
+          border-top: none;
+        }
+        
+        /* Bottom Dock */
+        .panel.dock-bottom {
+          bottom: -50vh;
+          left: 0;
+          width: 100%;
+          height: 50vh;
+          max-height: 50vh;
+          border-top: 1px solid var(--hs-border);
+          border-left: none;
+        }
+
+        .content {
+          flex: 1;
+          overflow: hidden;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+        }
+        .content > * {
+          flex: 1;
+          min-height: 0;
+        }
+        
+        /* Mobile - 固定尺寸，禁用拖拽 */
+        @media (max-width: 480px) {
+          .panel.dock-right {
+            width: 100vw !important;
+            right: -100vw;
+          }
+          .panel.dock-right.open {
+            right: 0;
+          }
+          .panel.dock-bottom {
+            height: 50vh !important;
+            max-height: 50vh !important;
+            bottom: -50vh;
+          }
+          .panel.dock-bottom.open {
+            bottom: 0;
+          }
+        }
+      </style>
+      
+      <hs-floating-trigger></hs-floating-trigger>
+      
+      <div class="panel dock-right">
+        <hs-resizer></hs-resizer>
+        <hs-task-header></hs-task-header>
+        <div class="content">
+          <hs-task-list></hs-task-list>
+          <hs-task-detail style="display:none"></hs-task-detail>
+          <hs-timeline style="display:none"></hs-timeline>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("hs-devtools", DevTools);
+export {
+  DevTools
+};