opencode-supertask 0.1.28 → 0.1.30

package/dist/gateway/index.js

@@ -9486,8 +9486,8 @@ var require_luxon = __commonJS({
        * Set whether Luxon will throw when it encounters invalid DateTimes, Durations, or Intervals
        * @type {boolean}
        */
-      static set throwOnInvalid(t) {
-        throwOnInvalid = t;
+      static set throwOnInvalid(t2) {
+        throwOnInvalid = t2;
       }
       /**
        * Reset Luxon's global caches. Should only be necessary in testing scenarios.
@@ -10380,7 +10380,7 @@ var require_luxon = __commonJS({
         }, tokens = _Formatter.parseFormat(fmt), realTokens = tokens.reduce((found, {
           literal,
           val
-        }) => literal ? found : found.concat(val), []), collapsed = dur.shiftTo(...realTokens.map(tokenToField).filter((t) => t)), durationInfo = {
+        }) => literal ? found : found.concat(val), []), collapsed = dur.shiftTo(...realTokens.map(tokenToField).filter((t2) => t2)), durationInfo = {
           isNegativeDuration: collapsed < 0,
           // this relies on "collapsed" being based on "shiftTo", which builds up the object
           // in order
@@ -12290,15 +12290,15 @@ var require_luxon = __commonJS({
       return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
     }
     function unitForToken(token, loc) {
-      const one = digitRegex(loc), two = digitRegex(loc, "{2}"), three = digitRegex(loc, "{3}"), four = digitRegex(loc, "{4}"), six = digitRegex(loc, "{6}"), oneOrTwo = digitRegex(loc, "{1,2}"), oneToThree = digitRegex(loc, "{1,3}"), oneToSix = digitRegex(loc, "{1,6}"), oneToNine = digitRegex(loc, "{1,9}"), twoToFour = digitRegex(loc, "{2,4}"), fourToSix = digitRegex(loc, "{4,6}"), literal = (t) => ({
-        regex: RegExp(escapeToken(t.val)),
+      const one = digitRegex(loc), two = digitRegex(loc, "{2}"), three = digitRegex(loc, "{3}"), four = digitRegex(loc, "{4}"), six = digitRegex(loc, "{6}"), oneOrTwo = digitRegex(loc, "{1,2}"), oneToThree = digitRegex(loc, "{1,3}"), oneToSix = digitRegex(loc, "{1,6}"), oneToNine = digitRegex(loc, "{1,9}"), twoToFour = digitRegex(loc, "{2,4}"), fourToSix = digitRegex(loc, "{4,6}"), literal = (t2) => ({
+        regex: RegExp(escapeToken(t2.val)),
         deser: ([s2]) => s2,
         literal: true
-      }), unitate = (t) => {
+      }), unitate = (t2) => {
         if (token.literal) {
-          return literal(t);
+          return literal(t2);
         }
-        switch (t.val) {
+        switch (t2.val) {
           // era
           case "G":
             return oneOf(loc.eras("short"), 0);
@@ -12413,7 +12413,7 @@ var require_luxon = __commonJS({
           case " ":
             return simple(/[^\S\n\r]/);
           default:
-            return literal(t);
+            return literal(t2);
         }
       };
       const unit = unitate(token) || {
@@ -12615,15 +12615,15 @@ var require_luxon = __commonJS({
       return tokens;
     }
     function expandMacroTokens(tokens, locale) {
-      return Array.prototype.concat(...tokens.map((t) => maybeExpandMacroToken(t, locale)));
+      return Array.prototype.concat(...tokens.map((t2) => maybeExpandMacroToken(t2, locale)));
     }
     var TokenParser = class {
       constructor(locale, format) {
         this.locale = locale;
         this.format = format;
         this.tokens = expandMacroTokens(Formatter.parseFormat(format), locale);
-        this.units = this.tokens.map((t) => unitForToken(t, locale));
-        this.disqualifyingUnit = this.units.find((t) => t.invalidReason);
+        this.units = this.tokens.map((t2) => unitForToken(t2, locale));
+        this.disqualifyingUnit = this.units.find((t2) => t2.invalidReason);
         if (!this.disqualifyingUnit) {
           const [regexString, handlers] = buildRegex(this.units);
           this.regex = RegExp(regexString, "i");
@@ -13448,7 +13448,7 @@ var require_luxon = __commonJS({
        */
       static parseFormatForOpts(formatOpts, localeOpts = {}) {
         const tokenList = formatOptsToTokens(formatOpts, Locale.fromObject(localeOpts));
-        return !tokenList ? null : tokenList.map((t) => t ? t.val : null).join("");
+        return !tokenList ? null : tokenList.map((t2) => t2 ? t2.val : null).join("");
       }
       /**
        * Produce the the fully expanded format token for the locale
@@ -13459,7 +13459,7 @@ var require_luxon = __commonJS({
        */
       static expandFormat(fmt, localeOpts = {}) {
         const expanded = expandMacroTokens(Formatter.parseFormat(fmt), Locale.fromObject(localeOpts));
-        return expanded.map((t) => t.val).join("");
+        return expanded.map((t2) => t2.val).join("");
       }
       static resetCache() {
         zoneOffsetTs = void 0;
@@ -16316,10 +16316,10 @@ var require_random = __commonJS({
     }
     function mulberry32(seed) {
       return () => {
-        let t = seed += 1831565813;
-        t = Math.imul(t ^ t >>> 15, t | 1);
-        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-        return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        let t2 = seed += 1831565813;
+        t2 = Math.imul(t2 ^ t2 >>> 15, t2 | 1);
+        t2 ^= t2 + Math.imul(t2 ^ t2 >>> 7, t2 | 61);
+        return ((t2 ^ t2 >>> 14) >>> 0) / 4294967296;
       };
     }
     function seededRandom(str) {
@@ -17790,7 +17790,7 @@ var init_request = __esm({
 });
 
 // node_modules/hono/dist/utils/html.js
-var HtmlEscapedCallbackPhase, raw, escapeRe, stringBufferToString, escapeToBuffer, resolveCallbackSync, resolveCallback;
+var HtmlEscapedCallbackPhase, raw, resolveCallback;
 var init_html = __esm({
   "node_modules/hono/dist/utils/html.js"() {
     "use strict";
@@ -17805,80 +17805,6 @@ var init_html = __esm({
       escapedString.callbacks = callbacks;
       return escapedString;
     };
-    escapeRe = /[&<>'"]/;
-    stringBufferToString = async (buffer, callbacks) => {
-      let str = "";
-      callbacks ||= [];
-      const resolvedBuffer = await Promise.all(buffer);
-      for (let i = resolvedBuffer.length - 1; ; i--) {
-        str += resolvedBuffer[i];
-        i--;
-        if (i < 0) {
-          break;
-        }
-        let r = resolvedBuffer[i];
-        if (typeof r === "object") {
-          callbacks.push(...r.callbacks || []);
-        }
-        const isEscaped = r.isEscaped;
-        r = await (typeof r === "object" ? r.toString() : r);
-        if (typeof r === "object") {
-          callbacks.push(...r.callbacks || []);
-        }
-        if (r.isEscaped ?? isEscaped) {
-          str += r;
-        } else {
-          const buf = [str];
-          escapeToBuffer(r, buf);
-          str = buf[0];
-        }
-      }
-      return raw(str, callbacks);
-    };
-    escapeToBuffer = (str, buffer) => {
-      const match2 = str.search(escapeRe);
-      if (match2 === -1) {
-        buffer[0] += str;
-        return;
-      }
-      let escape;
-      let index2;
-      let lastIndex = 0;
-      for (index2 = match2; index2 < str.length; index2++) {
-        switch (str.charCodeAt(index2)) {
-          case 34:
-            escape = "&quot;";
-            break;
-          case 39:
-            escape = "&#39;";
-            break;
-          case 38:
-            escape = "&amp;";
-            break;
-          case 60:
-            escape = "&lt;";
-            break;
-          case 62:
-            escape = "&gt;";
-            break;
-          default:
-            continue;
-        }
-        buffer[0] += str.substring(lastIndex, index2) + escape;
-        lastIndex = index2 + 1;
-      }
-      buffer[0] += str.substring(lastIndex, index2);
-    };
-    resolveCallbackSync = (str) => {
-      const callbacks = str.callbacks;
-      if (!callbacks?.length) {
-        return str;
-      }
-      const buffer = [str];
-      const context = {};
-      callbacks.forEach((c) => c({ phase: HtmlEscapedCallbackPhase.Stringify, buffer, context }));
-      return buffer[0];
-    };
     resolveCallback = async (str, phase, preserveCallbacks, context, buffer) => {
       if (typeof str === "object" && !(str instanceof String)) {
         if (!(str instanceof Promise)) {
@@ -18276,9 +18202,9 @@ var init_context = __esm({
           setDefaultContentType("application/json", headers)
         );
       };
-      html = (html2, arg, headers) => {
-        const res = (html22) => this.#newResponse(html22, arg, setDefaultContentType("text/html; charset=UTF-8", headers));
-        return typeof html2 === "object" ? resolveCallback(html2, HtmlEscapedCallbackPhase.Stringify, false, {}).then(res) : res(html2);
+      html = (html, arg, headers) => {
+        const res = (html2) => this.#newResponse(html2, arg, setDefaultContentType("text/html; charset=UTF-8", headers));
+        return typeof html === "object" ? resolveCallback(html, HtmlEscapedCallbackPhase.Stringify, false, {}).then(res) : res(html);
       };
       /**
        * `.redirect()` can Redirect, default status code is 302.
@@ -19451,50 +19377,6 @@ var init_dist = __esm({
   }
 });
 
-// node_modules/hono/dist/helper/html/index.js
-var html;
-var init_html2 = __esm({
-  "node_modules/hono/dist/helper/html/index.js"() {
-    "use strict";
-    init_html();
-    html = (strings, ...values) => {
-      const buffer = [""];
-      for (let i = 0, len = strings.length - 1; i < len; i++) {
-        buffer[0] += strings[i];
-        const children = Array.isArray(values[i]) ? values[i].flat(Infinity) : [values[i]];
-        for (let i2 = 0, len2 = children.length; i2 < len2; i2++) {
-          const child = children[i2];
-          if (typeof child === "string") {
-            escapeToBuffer(child, buffer);
-          } else if (typeof child === "number") {
-            ;
-            buffer[0] += child;
-          } else if (typeof child === "boolean" || child === null || child === void 0) {
-            continue;
-          } else if (typeof child === "object" && child.isEscaped) {
-            if (child.callbacks) {
-              buffer.unshift("", child);
-            } else {
-              const tmp = child.toString();
-              if (tmp instanceof Promise) {
-                buffer.unshift("", tmp);
-              } else {
-                buffer[0] += tmp;
-              }
-            }
-          } else if (child instanceof Promise) {
-            buffer.unshift("", child);
-          } else {
-            escapeToBuffer(child.toString(), buffer);
-          }
-        }
-      }
-      buffer[0] += strings.at(-1);
-      return buffer.length === 1 ? "callbacks" in buffer ? raw(resolveCallbackSync(raw(buffer[0], buffer.callbacks))) : raw(buffer[0]) : stringBufferToString(buffer, buffer.callbacks);
-    };
-  }
-});
-
 // src/core/services/database-maintenance.service.ts
 import { Database as Database3 } from "bun:sqlite";
 import { randomUUID as randomUUID2 } from "crypto";
@@ -19931,13 +19813,827 @@ var init_database_maintenance_service = __esm({
   }
 });
 
+// src/web/ui.ts
+function t(locale, key, values = {}) {
+  const template = (locale === "en" ? EN : ZH)[key];
+  return template.replace(/\{([a-zA-Z]+)\}/g, (_, name) => String(values[name] ?? `{${name}}`));
+}
+function statusText(locale, status) {
+  const key = `status.${status}`;
+  return key in ZH ? t(locale, key) : t(locale, "status.unknown");
+}
+function formatRelative(timestamp2, locale) {
+  if (!timestamp2) return "\u2014";
+  const deltaMs = timestamp2 - Date.now();
+  const abs = Math.abs(deltaMs);
+  const language = locale === "en" ? "en" : "zh-CN";
+  const formatter = new Intl.RelativeTimeFormat(language, { numeric: "auto" });
+  if (abs < 6e4) return formatter.format(Math.round(deltaMs / 1e3), "second");
+  if (abs < 36e5) return formatter.format(Math.round(deltaMs / 6e4), "minute");
+  if (abs < 864e5) return formatter.format(Math.round(deltaMs / 36e5), "hour");
+  return formatter.format(Math.round(deltaMs / 864e5), "day");
+}
+function formatFuture(timestamp2, locale) {
+  if (!timestamp2) return "\u2014";
+  if (timestamp2 < Date.now()) return t(locale, "schedule.overdue");
+  return formatRelative(timestamp2, locale);
+}
+function formatDateTime(value, locale) {
+  if (!value) return "\u2014";
+  const date = value instanceof Date ? value : new Date(value);
+  return new Intl.DateTimeFormat(locale === "en" ? "en-US" : "zh-CN", {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+}
+function icon(name, className = "icon") {
+  const paths = {
+    brand: '<path d="M7 4.5h10a2.5 2.5 0 0 1 2.5 2.5v10a2.5 2.5 0 0 1-2.5 2.5H7A2.5 2.5 0 0 1 4.5 17V7A2.5 2.5 0 0 1 7 4.5Z"/><path d="m8 12 2.4 2.4L16.5 8.5"/>',
+    tasks: '<path d="M9 6h11M9 12h11M9 18h11"/><path d="M4 6h.01M4 12h.01M4 18h.01"/>',
+    templates: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/><path d="M12 14v3l2 1"/>',
+    runs: '<path d="M4 19.5V4.5M4 19.5h16"/><path d="m7 15 3-4 3 2 5-6"/>',
+    system: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-1.42 1.42-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V20h-2v-.48a1.7 1.7 0 0 0-1.03-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06-1.42-1.42.06-.06A1.7 1.7 0 0 0 9.4 15a1.7 1.7 0 0 0-1.56-1.03H7.5v-2h.34A1.7 1.7 0 0 0 9.4 10a1.7 1.7 0 0 0-.34-1.88L9 8.06l1.42-1.42.06.06a1.7 1.7 0 0 0 1.88.34A1.7 1.7 0 0 0 13.4 5.5V5h2v.5a1.7 1.7 0 0 0 1.03 1.56 1.7 1.7 0 0 0 1.88-.34l.06-.06 1.42 1.42-.06.06A1.7 1.7 0 0 0 19.4 10a1.7 1.7 0 0 0 1.56 1.03h.54v2h-.54A1.7 1.7 0 0 0 19.4 15Z"/>',
+    refresh: '<path d="M20 6v5h-5"/><path d="M18.5 15a7 7 0 1 1-.8-7.8L20 11"/>',
+    search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41"/>',
+    globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>',
+    chevronLeft: '<path d="m15 18-6-6 6-6"/>',
+    chevronRight: '<path d="m9 18 6-6-6-6"/>',
+    copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>',
+    close: '<path d="m6 6 12 12M18 6 6 18"/>',
+    inbox: '<path d="M4 4h16l2 12h-6l-2 3h-4l-2-3H2L4 4Z"/><path d="M8 9h8"/>',
+    activity: '<path d="M3 12h4l2-6 4 12 2-6h6"/>',
+    check: '<path d="m5 12 4 4L19 6"/>',
+    alert: '<path d="M12 3 2.8 19h18.4L12 3Z"/><path d="M12 9v4M12 17h.01"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+    database: '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/>'
+  };
+  return `<svg class="${className}" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths[name]}</svg>`;
+}
+function clientMessages(locale) {
+  const keys = [
+    "action.cancel",
+    "action.confirm",
+    "action.copy",
+    "action.delete",
+    "action.refresh",
+    "action.logs",
+    "action.hideLogs",
+    "details.copySuccess",
+    "feedback.copyFailed",
+    "dialog.cancelTask",
+    "dialog.cancelTaskBody",
+    "dialog.retryTask",
+    "dialog.retryTaskBody",
+    "dialog.deleteTask",
+    "dialog.deleteTaskBody",
+    "dialog.disableTemplate",
+    "dialog.disableTemplateBody",
+    "dialog.deleteTemplate",
+    "dialog.deleteTemplateBody",
+    "dialog.triggerTemplate",
+    "dialog.triggerTemplateBody",
+    "dialog.clearTitle",
+    "dialog.clearBody",
+    "dialog.clearInstruction",
+    "feedback.retryFailed",
+    "feedback.cancelFailed",
+    "feedback.deleteFailed",
+    "feedback.requestFailed",
+    "feedback.triggered",
+    "feedback.configSaved",
+    "feedback.databaseCleared",
+    "filter.noResults"
+  ];
+  return Object.fromEntries(keys.map((key) => [key, t(locale, key)]));
+}
+function renderLayout(options) {
+  const { locale, activeTab, body } = options;
+  const page = PAGE_KEYS[activeTab];
+  const nav = [
+    { id: "tasks", href: "/", icon: "tasks" },
+    { id: "templates", href: "/templates", icon: "templates" },
+    { id: "runs", href: "/runs", icon: "runs" },
+    { id: "system", href: "/system", icon: "system" }
+  ];
+  const ui = JSON.stringify(clientMessages(locale)).replace(/</g, "\\u003c");
+  const language = locale === "en" ? "en" : "zh-CN";
+  return `<!DOCTYPE html>
+<html lang="${language}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#f5f7fb">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='%235957d9'/%3E%3Cpath d='m7 12 3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+  <title>${t(locale, page.title)} \xB7 SuperTask</title>
+  <script>(function(){try{var p=localStorage.getItem('supertask-theme')||'system';var d=p==='system'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):p;document.documentElement.dataset.theme=d;document.documentElement.dataset.themePreference=p}catch(e){}})();</script>
+  ${STYLES}
+</head>
+<body>
+  <a class="skip-link" href="#main">${t(locale, "a11y.skip")}</a>
+  <div class="app-shell">
+    <header class="topbar">
+      <div class="brand">
+        <div class="brand-mark">${icon("brand")}</div>
+        <div>
+          <div class="brand-name">${t(locale, "app.name")} <span>${t(locale, "app.dashboard")}</span></div>
+          <div class="brand-tagline">${t(locale, "app.tagline")}</div>
+        </div>
+      </div>
+      <div class="top-actions">
+        <div class="local-chip"><span class="live-dot"></span>${t(locale, "app.local")}</div>
+        <div class="control language-switch" role="group" aria-label="${t(locale, "language.label")}">
+          <button type="button" class="${locale === "zh-CN" ? "active" : ""}" onclick="setLocale('zh-CN')" aria-pressed="${locale === "zh-CN"}">\u4E2D</button>
+          <button type="button" class="${locale === "en" ? "active" : ""}" onclick="setLocale('en')" aria-pressed="${locale === "en"}">EN</button>
+        </div>
+        <button type="button" class="icon-button mobile-language" style="display:none" onclick="setLocale('${locale === "en" ? "zh-CN" : "en"}')" aria-label="${t(locale, "language.label")}" title="${t(locale, "language.label")}">${icon("globe")}</button>
+        <label class="select-wrap" aria-label="${t(locale, "theme.label")}">
+          ${icon("sun")}
+          <select id="theme-select" class="control" onchange="setTheme(this.value)" title="${t(locale, "theme.label")}">
+            <option value="system">${t(locale, "theme.system")}</option>
+            <option value="light">${t(locale, "theme.light")}</option>
+            <option value="dark">${t(locale, "theme.dark")}</option>
+          </select>
+        </label>
+        <button type="button" class="icon-button" onclick="refreshPage(this)" aria-label="${t(locale, "action.refresh")}" title="${t(locale, "action.refresh")}">${icon("refresh")}</button>
+      </div>
+    </header>
+    <nav class="tabs" aria-label="Primary">
+      ${nav.map((item) => `<a href="${item.href}" class="${activeTab === item.id ? "active" : ""}" ${activeTab === item.id ? 'aria-current="page"' : ""}>${icon(item.icon)}<span>${t(locale, `nav.${item.id}`)}</span></a>`).join("")}
+    </nav>
+    <main id="main" tabindex="-1">
+      <div class="page-heading reveal">
+        <div><h1>${t(locale, page.title)}</h1><p>${t(locale, page.description)}</p></div>
+      </div>
+      ${body}
+    </main>
+    <footer>${t(locale, "app.footer")}</footer>
+  </div>
+  <div id="toast-region" class="toast-region" role="status" aria-live="polite"></div>
+  <dialog id="detail-dialog">
+    <div class="dialog-head"><div><h2>${t(locale, "details.title")}</h2><p>${t(locale, "details.subtitle")}</p></div><button class="icon-button" onclick="document.getElementById('detail-dialog').close()" aria-label="${t(locale, "action.close")}">${icon("close")}</button></div>
+    <div class="dialog-body"><pre id="detail-content" class="json-view"></pre></div>
+    <div class="dialog-actions"><button class="btn" onclick="copyDetails()">${icon("copy")}${t(locale, "action.copy")}</button><button class="btn btn-primary" onclick="document.getElementById('detail-dialog').close()">${t(locale, "action.close")}</button></div>
+  </dialog>
+  <dialog id="confirm-dialog">
+    <div class="dialog-head"><div><h2 id="confirm-title"></h2></div><button class="icon-button" onclick="document.getElementById('confirm-dialog').close('cancel')" aria-label="${t(locale, "action.close")}">${icon("close")}</button></div>
+    <div class="dialog-body"><p id="confirm-body" class="confirm-copy"></p></div>
+    <div class="dialog-actions"><button class="btn" onclick="document.getElementById('confirm-dialog').close('cancel')">${t(locale, "action.cancel")}</button><button id="confirm-ok" class="btn btn-primary" onclick="document.getElementById('confirm-dialog').close('confirm')">${t(locale, "action.confirm")}</button></div>
+  </dialog>
+  <dialog id="danger-dialog">
+    <div class="dialog-head"><div><h2>${t(locale, "dialog.clearTitle")}</h2></div><button class="icon-button" onclick="document.getElementById('danger-dialog').close('cancel')" aria-label="${t(locale, "action.close")}">${icon("close")}</button></div>
+    <div class="dialog-body"><p class="confirm-copy"><strong>${t(locale, "dialog.clearBody")}</strong>${t(locale, "dialog.clearInstruction")}</p><input id="danger-confirmation" class="danger-input" autocomplete="off" spellcheck="false" placeholder="CLEAR" oninput="document.getElementById('danger-ok').disabled=this.value!=='CLEAR'"></div>
+    <div class="dialog-actions"><button class="btn" onclick="document.getElementById('danger-dialog').close('cancel')">${t(locale, "action.cancel")}</button><button id="danger-ok" class="btn btn-danger" disabled onclick="document.getElementById('danger-dialog').close('confirm')">${t(locale, "action.clearDatabase")}</button></div>
+  </dialog>
+  <script>
+    const UI=${ui};
+    const text=(key,values={})=>(UI[key]||key).replace(/{([a-zA-Z]+)}/g,(_,name)=>String(values[name]??'{'+name+'}'));
+    const themeMedia=matchMedia('(prefers-color-scheme: dark)');
+    function applyTheme(preference){const resolved=preference==='system'?(themeMedia.matches?'dark':'light'):preference;document.documentElement.dataset.theme=resolved;document.documentElement.dataset.themePreference=preference;const select=document.getElementById('theme-select');if(select)select.value=preference;document.querySelector('meta[name="theme-color"]').content=resolved==='dark'?'#090d15':'#f5f7fb';}
+    function setTheme(preference){localStorage.setItem('supertask-theme',preference);applyTheme(preference);}
+    function setLocale(value){document.cookie='supertask_locale='+encodeURIComponent(value)+'; Path=/; Max-Age=31536000; SameSite=Lax';location.reload();}
+    themeMedia.addEventListener?.('change',()=>{if((localStorage.getItem('supertask-theme')||'system')==='system')applyTheme('system');});
+    applyTheme(localStorage.getItem('supertask-theme')||'system');
+    requestAnimationFrame(()=>document.documentElement.classList.add('ui-ready'));
+    function refreshPage(button){button.classList.add('refreshing');button.setAttribute('aria-label','${t(locale, "a11y.refreshing")}');location.reload();}
+    function showToast(message,type='ok'){const region=document.getElementById('toast-region');const node=document.createElement('div');node.className='toast '+type;node.innerHTML=(type==='error'?'${icon("alert")}':'${icon("check")}')+'<span></span>';node.querySelector('span').textContent=message;region.appendChild(node);setTimeout(()=>{node.classList.add('leaving');setTimeout(()=>node.remove(),220)},3600);}
+    async function readJson(response){const data=await response.json().catch(()=>({}));if(!response.ok)throw new Error(data.error||text('feedback.requestFailed'));return data;}
+    async function ask(title,body,danger=false){const dialog=document.getElementById('confirm-dialog');document.getElementById('confirm-title').textContent=title;document.getElementById('confirm-body').textContent=body;document.getElementById('confirm-ok').className='btn '+(danger?'btn-danger':'btn-primary');return new Promise(resolve=>{dialog.addEventListener('close',()=>resolve(dialog.returnValue==='confirm'),{once:true});dialog.showModal();});}
+    async function askDanger(){const dialog=document.getElementById('danger-dialog');const input=document.getElementById('danger-confirmation');input.value='';document.getElementById('danger-ok').disabled=true;return new Promise(resolve=>{dialog.addEventListener('close',()=>resolve(dialog.returnValue==='confirm'),{once:true});dialog.showModal();setTimeout(()=>input.focus(),50);});}
+    async function retryTask(id){if(!await ask(text('dialog.retryTask',{id}),text('dialog.retryTaskBody')))return;try{await readJson(await fetch('/api/tasks/'+id+'/retry',{method:'POST'}));location.reload()}catch(error){showToast(text('feedback.retryFailed')+': '+error.message,'error')}}
+    async function cancelTask(id){if(!await ask(text('dialog.cancelTask',{id}),text('dialog.cancelTaskBody'),true))return;try{await readJson(await fetch('/api/tasks/'+id+'/cancel',{method:'POST'}));location.reload()}catch(error){showToast(text('feedback.cancelFailed')+': '+error.message,'error')}}
+    async function deleteTask(id){if(!await ask(text('dialog.deleteTask',{id}),text('dialog.deleteTaskBody'),true))return;try{await readJson(await fetch('/api/tasks/'+id,{method:'DELETE'}));location.reload()}catch(error){showToast(text('feedback.deleteFailed')+': '+error.message,'error')}}
+    async function showRecord(url){try{const data=await readJson(await fetch(url));document.getElementById('detail-content').textContent=JSON.stringify(data,null,2);document.getElementById('detail-dialog').showModal()}catch(error){showToast(error.message,'error')}}
+    const showDetail=id=>showRecord('/api/tasks/'+id);const showRunDetail=id=>showRecord('/api/runs/'+id);const showTemplateDetail=id=>showRecord('/api/templates/'+id);
+    async function copyDetails(){try{await navigator.clipboard.writeText(document.getElementById('detail-content').textContent);showToast(text('details.copySuccess'))}catch{showToast(text('feedback.copyFailed'),'error')}}
+    async function enableTmpl(id){try{await readJson(await fetch('/api/templates/'+id+'/enable',{method:'POST'}));location.reload()}catch(error){showToast(error.message,'error')}}
+    async function disableTmpl(id){if(!await ask(text('dialog.disableTemplate'),text('dialog.disableTemplateBody')))return;try{await readJson(await fetch('/api/templates/'+id+'/disable',{method:'POST'}));location.reload()}catch(error){showToast(error.message,'error')}}
+    async function deleteTmpl(id){if(!await ask(text('dialog.deleteTemplate'),text('dialog.deleteTemplateBody'),true))return;try{await readJson(await fetch('/api/templates/'+id,{method:'DELETE'}));location.reload()}catch(error){showToast(error.message,'error')}}
+    async function triggerTmpl(id){if(!await ask(text('dialog.triggerTemplate'),text('dialog.triggerTemplateBody')))return;try{const data=await readJson(await fetch('/api/templates/'+id+'/trigger',{method:'POST'}));showToast(text('feedback.triggered',{id:data.taskId}));setTimeout(()=>location.reload(),550)}catch(error){showToast(error.message,'error')}}
+    function toggleLog(id,button){const panel=document.getElementById('log-'+id);const hidden=!panel.hidden;panel.hidden=hidden;button.setAttribute('aria-expanded',String(!hidden));button.textContent=text(hidden?'action.logs':'action.hideLogs');}
+    function filterTasks(value){const query=value.trim().toLocaleLowerCase();let visible=0;document.querySelectorAll('[data-task-row]').forEach(row=>{const match=!query||row.dataset.search.toLocaleLowerCase().includes(query);row.hidden=!match;if(match)visible++});const empty=document.getElementById('search-empty');if(empty)empty.hidden=visible!==0;}
+    async function clearDatabase(){if(!await askDanger())return;try{const data=await readJson(await fetch('/api/database/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirmation:'CLEAR'})}));showToast(text('feedback.databaseCleared',{path:data.backupPath}));setTimeout(()=>location.reload(),1000)}catch(error){showToast(error.message,'error')}}
+    async function saveConfig(){const form=document.getElementById('config-form');const data={worker:{maxConcurrency:Number(form.mc.value),pollIntervalMs:Number(form.pi.value),heartbeatIntervalMs:Number(form.hi.value)*1000,taskTimeoutMs:Number(form.to.value)*60000},scheduler:{enabled:form.se.checked,checkIntervalMs:Number(form.si.value)},watchdog:{heartbeatTimeoutMs:Number(form.wt.value)*1000,checkIntervalMs:Number(form.wci.value)*1000,cleanupIntervalMs:Number(form.wcl.value)*3600000,retentionDays:Number(form.rd.value)}};try{await readJson(await fetch('/api/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}));showToast(text('feedback.configSaved'))}catch(error){showToast(error.message,'error')}}
+  </script>
+</body>
+</html>`;
+}
+var ZH, EN, STYLES, PAGE_KEYS;
+var init_ui = __esm({
+  "src/web/ui.ts"() {
+    "use strict";
+    ZH = {
+      "app.name": "SuperTask",
+      "app.dashboard": "\u63A7\u5236\u53F0",
+      "app.tagline": "\u53EF\u9760\u7684\u672C\u5730 Agent \u8C03\u5EA6\u4E2D\u5FC3",
+      "app.local": "\u672C\u5730\u8FD0\u884C",
+      "app.footer": "Local-first \xB7 \u6570\u636E\u7559\u5728\u4F60\u7684\u8BBE\u5907\u4E0A",
+      "nav.tasks": "\u4EFB\u52A1",
+      "nav.templates": "\u8C03\u5EA6",
+      "nav.runs": "\u6267\u884C\u8BB0\u5F55",
+      "nav.system": "\u7CFB\u7EDF",
+      "page.tasks.title": "\u4EFB\u52A1\u961F\u5217",
+      "page.tasks.description": "\u67E5\u770B\u4F18\u5148\u7EA7\u3001\u6267\u884C\u72B6\u6001\u4E0E\u91CD\u8BD5\u60C5\u51B5\uFF0C\u5FEB\u901F\u5904\u7406\u9700\u8981\u5173\u6CE8\u7684\u4EFB\u52A1\u3002",
+      "page.templates.title": "\u8C03\u5EA6\u6A21\u677F",
+      "page.templates.description": "\u7BA1\u7406 Cron\u3001\u5EF6\u8FDF\u548C\u5FAA\u73AF\u4EFB\u52A1\uFF0C\u8BA9\u91CD\u590D\u5DE5\u4F5C\u6309\u8BA1\u5212\u81EA\u52A8\u8FD0\u884C\u3002",
+      "page.runs.title": "\u6267\u884C\u8BB0\u5F55",
+      "page.runs.description": "\u8FFD\u8E2A\u6BCF\u6B21 Agent \u6267\u884C\u7684\u72B6\u6001\u3001\u8017\u65F6\u3001\u5FC3\u8DF3\u4E0E\u8F93\u51FA\u3002",
+      "page.system.title": "\u7CFB\u7EDF\u8BBE\u7F6E",
+      "page.system.description": "\u8C03\u6574 Gateway \u8FD0\u884C\u53C2\u6570\uFF0C\u68C0\u67E5\u5B9E\u65F6\u4EFB\u52A1\u5E76\u7BA1\u7406\u672C\u5730\u6570\u636E\u3002",
+      "action.refresh": "\u5237\u65B0",
+      "action.details": "\u8BE6\u60C5",
+      "action.retry": "\u91CD\u8BD5",
+      "action.cancel": "\u53D6\u6D88",
+      "action.delete": "\u5220\u9664",
+      "action.enable": "\u542F\u7528",
+      "action.disable": "\u7981\u7528",
+      "action.trigger": "\u7ACB\u5373\u89E6\u53D1",
+      "action.logs": "\u67E5\u770B\u65E5\u5FD7",
+      "action.hideLogs": "\u6536\u8D77\u65E5\u5FD7",
+      "action.save": "\u4FDD\u5B58\u8BBE\u7F6E",
+      "action.copy": "\u590D\u5236 JSON",
+      "action.close": "\u5173\u95ED",
+      "action.confirm": "\u786E\u8BA4",
+      "action.clearDatabase": "\u6E05\u7A7A\u6570\u636E\u5E93",
+      "status.pending": "\u5F85\u6267\u884C",
+      "status.running": "\u8FD0\u884C\u4E2D",
+      "status.done": "\u5DF2\u5B8C\u6210",
+      "status.failed": "\u5931\u8D25",
+      "status.dead_letter": "\u6B7B\u4FE1",
+      "status.cancelled": "\u5DF2\u53D6\u6D88",
+      "status.unknown": "\u672A\u77E5",
+      "stats.total": "\u603B\u4EFB\u52A1",
+      "stats.pending": "\u5F85\u6267\u884C",
+      "stats.running": "\u8FD0\u884C\u4E2D",
+      "stats.done": "\u5DF2\u5B8C\u6210",
+      "stats.failedDead": "\u5931\u8D25\u4E0E\u6B7B\u4FE1",
+      "stats.templates": "\u6A21\u677F\u603B\u6570",
+      "stats.enabled": "\u5DF2\u542F\u7528",
+      "stats.disabled": "\u5DF2\u7981\u7528",
+      "stats.records": "\u6267\u884C\u603B\u6570",
+      "stats.pageDone": "\u672C\u9875\u6210\u529F",
+      "stats.pageFailed": "\u672C\u9875\u5931\u8D25",
+      "stats.pageRunning": "\u672C\u9875\u8FD0\u884C\u4E2D",
+      "filter.all": "\u5168\u90E8",
+      "filter.searchTasks": "\u641C\u7D22\u5F53\u524D\u9875\u7684\u4EFB\u52A1\u3001Agent \u6216\u63D0\u793A\u8BCD",
+      "filter.noResults": "\u6CA1\u6709\u7B26\u5408\u5F53\u524D\u641C\u7D22\u6761\u4EF6\u7684\u4EFB\u52A1",
+      "table.id": "ID",
+      "table.task": "\u4EFB\u52A1",
+      "table.name": "\u540D\u79F0",
+      "table.agent": "Agent",
+      "table.status": "\u72B6\u6001",
+      "table.duration": "\u8017\u65F6",
+      "table.retries": "\u91CD\u8BD5",
+      "table.actions": "\u64CD\u4F5C",
+      "table.type": "\u7C7B\u578B",
+      "table.rule": "\u89C4\u5219",
+      "table.lastRun": "\u4E0A\u6B21\u6267\u884C",
+      "table.nextRun": "\u4E0B\u6B21\u6267\u884C",
+      "table.run": "Run",
+      "table.heartbeat": "\u5FC3\u8DF3",
+      "table.session": "Session",
+      "table.model": "\u6A21\u578B",
+      "table.startedAt": "\u542F\u52A8\u65F6\u95F4",
+      "table.pid": "PID",
+      "pagination.previous": "\u4E0A\u4E00\u9875",
+      "pagination.next": "\u4E0B\u4E00\u9875",
+      "pagination.summary": "\u7B2C {page} \u9875\uFF0C\u5171 {pages} \u9875 \xB7 {total} \u6761",
+      "empty.tasks": "\u961F\u5217\u91CC\u8FD8\u6CA1\u6709\u4EFB\u52A1",
+      "empty.tasksHint": "\u901A\u8FC7 OpenCode \u63D2\u4EF6\u6216 supertask add \u521B\u5EFA\u7B2C\u4E00\u4E2A\u4EFB\u52A1\u3002",
+      "empty.templates": "\u8FD8\u6CA1\u6709\u8C03\u5EA6\u6A21\u677F",
+      "empty.templatesHint": "\u4F7F\u7528 CLI \u521B\u5EFA\uFF1Asupertask template add",
+      "empty.runs": "\u8FD8\u6CA1\u6709\u6267\u884C\u8BB0\u5F55",
+      "empty.running": "\u5F53\u524D\u6CA1\u6709\u8FD0\u884C\u4E2D\u7684\u4EFB\u52A1",
+      "schedule.cron": "Cron",
+      "schedule.recurring": "\u5FAA\u73AF",
+      "schedule.delayed": "\u5EF6\u8FDF",
+      "schedule.unknown": "\u672A\u77E5",
+      "schedule.enabled": "\u5DF2\u542F\u7528",
+      "schedule.disabled": "\u5DF2\u7981\u7528",
+      "schedule.minutes": "{count} \u5206\u949F",
+      "schedule.seconds": "{count} \u79D2",
+      "schedule.hours": "{count} \u5C0F\u65F6",
+      "schedule.days": "{count} \u5929",
+      "schedule.overdue": "\u5DF2\u5230\u671F",
+      "system.worker": "Worker",
+      "system.scheduler": "Scheduler",
+      "system.watchdog": "Watchdog",
+      "system.maxConcurrency": "\u6700\u5927\u5E76\u53D1",
+      "system.pollInterval": "\u8F6E\u8BE2\u95F4\u9694",
+      "system.heartbeatInterval": "\u5FC3\u8DF3\u95F4\u9694",
+      "system.taskTimeout": "\u4EFB\u52A1\u8D85\u65F6",
+      "system.schedulerEnabled": "\u542F\u7528\u8C03\u5EA6",
+      "system.checkInterval": "\u68C0\u67E5\u95F4\u9694",
+      "system.heartbeatTimeout": "\u5FC3\u8DF3\u8D85\u65F6",
+      "system.cleanupInterval": "\u6E05\u7406\u95F4\u9694",
+      "system.retentionDays": "\u6570\u636E\u4FDD\u7559",
+      "system.milliseconds": "\u6BEB\u79D2",
+      "system.seconds": "\u79D2",
+      "system.minutes": "\u5206\u949F",
+      "system.hours": "\u5C0F\u65F6",
+      "system.days": "\u5929",
+      "system.activeTemplates": "\u6D3B\u8DC3\u6A21\u677F",
+      "system.saveHint": "\u4FDD\u5B58\u540E\u9700\u91CD\u542F Gateway \u751F\u6548",
+      "system.runningTasks": "\u5F53\u524D\u8FD0\u884C\u4EFB\u52A1\uFF08{running} / {limit} \u5E76\u53D1\uFF09",
+      "system.taskStats": "\u4EFB\u52A1\u6982\u89C8",
+      "system.configFile": "\u914D\u7F6E\u6587\u4EF6",
+      "system.path": "\u8DEF\u5F84",
+      "system.fileExists": "\u6587\u4EF6\u5B58\u5728",
+      "system.yes": "\u662F",
+      "system.noDefault": "\u5426\uFF0C\u5F53\u524D\u4F7F\u7528\u9ED8\u8BA4\u503C",
+      "system.danger": "\u5371\u9669\u64CD\u4F5C",
+      "system.dangerDescription": "\u7CFB\u7EDF\u4F1A\u5148\u521B\u5EFA\u53EF\u6821\u9A8C\u5907\u4EFD\uFF0C\u518D\u4E8B\u52A1\u6027\u6E05\u7A7A\u4EFB\u52A1\u3001\u6267\u884C\u8BB0\u5F55\u548C\u8C03\u5EA6\u6A21\u677F\uFF1B\u5B58\u5728\u8FD0\u884C\u4EFB\u52A1\u65F6\u4F1A\u62D2\u7EDD\u64CD\u4F5C\u3002",
+      "theme.label": "\u4E3B\u9898",
+      "theme.system": "\u8DDF\u968F\u7CFB\u7EDF",
+      "theme.light": "\u6D45\u8272",
+      "theme.dark": "\u6DF1\u8272",
+      "language.label": "\u8BED\u8A00",
+      "details.title": "\u6570\u636E\u8BE6\u60C5",
+      "details.subtitle": "\u539F\u59CB\u8BB0\u5F55\uFF08JSON\uFF09",
+      "details.copySuccess": "JSON \u5DF2\u590D\u5236",
+      "dialog.cancelTask": "\u53D6\u6D88\u4EFB\u52A1 #{id}\uFF1F",
+      "dialog.cancelTaskBody": "\u8FD0\u884C\u4E2D\u7684\u4EFB\u52A1\u4F1A\u5728\u4E0B\u4E00\u4E2A\u8F6E\u8BE2\u5468\u671F\u7EC8\u6B62\u5BF9\u5E94\u8FDB\u7A0B\u6811\u3002",
+      "dialog.retryTask": "\u91CD\u8BD5\u4EFB\u52A1 #{id}\uFF1F",
+      "dialog.retryTaskBody": "\u4EFB\u52A1\u5C06\u56DE\u5230\u5F85\u6267\u884C\u72B6\u6001\uFF0C\u5E76\u91CD\u7F6E\u81EA\u52A8\u91CD\u8BD5\u9884\u7B97\u3002",
+      "dialog.deleteTask": "\u5220\u9664\u4EFB\u52A1 #{id}\uFF1F",
+      "dialog.deleteTaskBody": "\u4EFB\u52A1\u53CA\u5173\u8054\u6267\u884C\u8BB0\u5F55\u5C06\u6C38\u4E45\u5220\u9664\uFF0C\u6B64\u64CD\u4F5C\u65E0\u6CD5\u64A4\u9500\u3002",
+      "dialog.disableTemplate": "\u7981\u7528\u8FD9\u4E2A\u8C03\u5EA6\u6A21\u677F\uFF1F",
+      "dialog.disableTemplateBody": "\u6A21\u677F\u5C06\u505C\u6B62\u81EA\u52A8\u521B\u5EFA\u65B0\u4EFB\u52A1\uFF0C\u5DF2\u6709\u4EFB\u52A1\u4E0D\u53D7\u5F71\u54CD\u3002",
+      "dialog.deleteTemplate": "\u5220\u9664\u8FD9\u4E2A\u8C03\u5EA6\u6A21\u677F\uFF1F",
+      "dialog.deleteTemplateBody": "\u6A21\u677F\u914D\u7F6E\u5C06\u6C38\u4E45\u5220\u9664\uFF0C\u6B64\u64CD\u4F5C\u65E0\u6CD5\u64A4\u9500\u3002",
+      "dialog.triggerTemplate": "\u7ACB\u5373\u89E6\u53D1\u4E00\u6B21\uFF1F",
+      "dialog.triggerTemplateBody": "\u7CFB\u7EDF\u4F1A\u6309\u5F53\u524D\u6A21\u677F\u521B\u5EFA\u4E00\u4E2A\u65B0\u4EFB\u52A1\uFF0C\u5E76\u9075\u5B88\u6700\u5927\u5B9E\u4F8B\u9650\u5236\u3002",
+      "dialog.clearTitle": "\u786E\u8BA4\u6E05\u7A7A\u6570\u636E\u5E93",
+      "dialog.clearBody": "\u8FD9\u4F1A\u5220\u9664\u5168\u90E8\u4EFB\u52A1\u3001\u6267\u884C\u8BB0\u5F55\u548C\u8C03\u5EA6\u6A21\u677F\u3002\u7CFB\u7EDF\u4F1A\u5148\u81EA\u52A8\u5907\u4EFD\u3002",
+      "dialog.clearInstruction": "\u8F93\u5165 CLEAR \u4EE5\u786E\u8BA4",
+      "feedback.retryFailed": "\u91CD\u8BD5\u5931\u8D25",
+      "feedback.cancelFailed": "\u53D6\u6D88\u5931\u8D25",
+      "feedback.deleteFailed": "\u5220\u9664\u5931\u8D25",
+      "feedback.requestFailed": "\u8BF7\u6C42\u5931\u8D25",
+      "feedback.triggered": "\u5DF2\u521B\u5EFA\u4EFB\u52A1 #{id}",
+      "feedback.configSaved": "\u8BBE\u7F6E\u5DF2\u4FDD\u5B58\uFF0C\u91CD\u542F Gateway \u540E\u751F\u6548",
+      "feedback.databaseCleared": "\u6570\u636E\u5E93\u5DF2\u6E05\u7A7A\uFF0C\u5907\u4EFD\u4F4D\u4E8E\uFF1A{path}",
+      "feedback.copyFailed": "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u9009\u62E9\u5185\u5BB9",
+      "a11y.skip": "\u8DF3\u5230\u4E3B\u8981\u5185\u5BB9",
+      "a11y.refreshing": "\u6B63\u5728\u5237\u65B0"
+    };
+    EN = {
+      "app.name": "SuperTask",
+      "app.dashboard": "Dashboard",
+      "app.tagline": "Reliable local agent orchestration",
+      "app.local": "Running locally",
+      "app.footer": "Local-first \xB7 Your data stays on this device",
+      "nav.tasks": "Tasks",
+      "nav.templates": "Schedules",
+      "nav.runs": "Runs",
+      "nav.system": "System",
+      "page.tasks.title": "Task queue",
+      "page.tasks.description": "Track priority, execution state, and retries, then act on tasks that need attention.",
+      "page.templates.title": "Schedule templates",
+      "page.templates.description": "Manage cron, delayed, and recurring work so repeated tasks run on time.",
+      "page.runs.title": "Execution history",
+      "page.runs.description": "Inspect the status, duration, heartbeat, and output of every agent run.",
+      "page.system.title": "System settings",
+      "page.system.description": "Tune Gateway behavior, inspect active work, and manage local data.",
+      "action.refresh": "Refresh",
+      "action.details": "Details",
+      "action.retry": "Retry",
+      "action.cancel": "Cancel",
+      "action.delete": "Delete",
+      "action.enable": "Enable",
+      "action.disable": "Disable",
+      "action.trigger": "Run now",
+      "action.logs": "View log",
+      "action.hideLogs": "Hide log",
+      "action.save": "Save settings",
+      "action.copy": "Copy JSON",
+      "action.close": "Close",
+      "action.confirm": "Confirm",
+      "action.clearDatabase": "Clear database",
+      "status.pending": "Pending",
+      "status.running": "Running",
+      "status.done": "Done",
+      "status.failed": "Failed",
+      "status.dead_letter": "Dead letter",
+      "status.cancelled": "Cancelled",
+      "status.unknown": "Unknown",
+      "stats.total": "Total tasks",
+      "stats.pending": "Pending",
+      "stats.running": "Running",
+      "stats.done": "Completed",
+      "stats.failedDead": "Failed & dead",
+      "stats.templates": "Templates",
+      "stats.enabled": "Enabled",
+      "stats.disabled": "Disabled",
+      "stats.records": "Total runs",
+      "stats.pageDone": "Succeeded here",
+      "stats.pageFailed": "Failed here",
+      "stats.pageRunning": "Running here",
+      "filter.all": "All",
+      "filter.searchTasks": "Search tasks, agents, or prompts on this page",
+      "filter.noResults": "No tasks match this search",
+      "table.id": "ID",
+      "table.task": "Task",
+      "table.name": "Name",
+      "table.agent": "Agent",
+      "table.status": "Status",
+      "table.duration": "Duration",
+      "table.retries": "Retries",
+      "table.actions": "Actions",
+      "table.type": "Type",
+      "table.rule": "Rule",
+      "table.lastRun": "Last run",
+      "table.nextRun": "Next run",
+      "table.run": "Run",
+      "table.heartbeat": "Heartbeat",
+      "table.session": "Session",
+      "table.model": "Model",
+      "table.startedAt": "Started",
+      "table.pid": "PID",
+      "pagination.previous": "Previous",
+      "pagination.next": "Next",
+      "pagination.summary": "Page {page} of {pages} \xB7 {total} items",
+      "empty.tasks": "Your queue is empty",
+      "empty.tasksHint": "Create the first task with the OpenCode plugin or supertask add.",
+      "empty.templates": "No schedule templates yet",
+      "empty.templatesHint": "Create one with: supertask template add",
+      "empty.runs": "No execution history yet",
+      "empty.running": "No tasks are running right now",
+      "schedule.cron": "Cron",
+      "schedule.recurring": "Recurring",
+      "schedule.delayed": "Delayed",
+      "schedule.unknown": "Unknown",
+      "schedule.enabled": "Enabled",
+      "schedule.disabled": "Disabled",
+      "schedule.minutes": "{count} min",
+      "schedule.seconds": "{count} sec",
+      "schedule.hours": "{count} hr",
+      "schedule.days": "{count} days",
+      "schedule.overdue": "Overdue",
+      "system.worker": "Worker",
+      "system.scheduler": "Scheduler",
+      "system.watchdog": "Watchdog",
+      "system.maxConcurrency": "Max concurrency",
+      "system.pollInterval": "Poll interval",
+      "system.heartbeatInterval": "Heartbeat interval",
+      "system.taskTimeout": "Task timeout",
+      "system.schedulerEnabled": "Enable scheduler",
+      "system.checkInterval": "Check interval",
+      "system.heartbeatTimeout": "Heartbeat timeout",
+      "system.cleanupInterval": "Cleanup interval",
+      "system.retentionDays": "Data retention",
+      "system.milliseconds": "ms",
+      "system.seconds": "seconds",
+      "system.minutes": "minutes",
+      "system.hours": "hours",
+      "system.days": "days",
+      "system.activeTemplates": "Active templates",
+      "system.saveHint": "Restart Gateway to apply saved settings",
+      "system.runningTasks": "Active tasks ({running} / {limit} concurrent)",
+      "system.taskStats": "Task overview",
+      "system.configFile": "Configuration file",
+      "system.path": "Path",
+      "system.fileExists": "File exists",
+      "system.yes": "Yes",
+      "system.noDefault": "No, using defaults",
+      "system.danger": "Danger zone",
+      "system.dangerDescription": "A verified backup is created first, then tasks, runs, and templates are cleared transactionally. Active work blocks this operation.",
+      "theme.label": "Theme",
+      "theme.system": "System",
+      "theme.light": "Light",
+      "theme.dark": "Dark",
+      "language.label": "Language",
+      "details.title": "Data details",
+      "details.subtitle": "Raw record (JSON)",
+      "details.copySuccess": "JSON copied",
+      "dialog.cancelTask": "Cancel task #{id}?",
+      "dialog.cancelTaskBody": "A running task will terminate its process tree on the next worker poll.",
+      "dialog.retryTask": "Retry task #{id}?",
+      "dialog.retryTaskBody": "The task returns to pending and its automatic retry budget is reset.",
+      "dialog.deleteTask": "Delete task #{id}?",
+      "dialog.deleteTaskBody": "The task and its execution history will be permanently deleted.",
+      "dialog.disableTemplate": "Disable this schedule?",
+      "dialog.disableTemplateBody": "It will stop creating new tasks automatically. Existing tasks are unchanged.",
+      "dialog.deleteTemplate": "Delete this schedule?",
+      "dialog.deleteTemplateBody": "This template configuration will be permanently deleted.",
+      "dialog.triggerTemplate": "Run this schedule now?",
+      "dialog.triggerTemplateBody": "A new task is created from the template, subject to its instance limit.",
+      "dialog.clearTitle": "Confirm database clear",
+      "dialog.clearBody": "This deletes every task, run, and schedule template after creating a backup.",
+      "dialog.clearInstruction": "Type CLEAR to confirm",
+      "feedback.retryFailed": "Retry failed",
+      "feedback.cancelFailed": "Cancellation failed",
+      "feedback.deleteFailed": "Delete failed",
+      "feedback.requestFailed": "Request failed",
+      "feedback.triggered": "Task #{id} created",
+      "feedback.configSaved": "Settings saved. Restart Gateway to apply them.",
+      "feedback.databaseCleared": "Database cleared. Backup: {path}",
+      "feedback.copyFailed": "Copy failed. Select the content manually.",
+      "a11y.skip": "Skip to main content",
+      "a11y.refreshing": "Refreshing"
+    };
+    STYLES = `
+<style>
+  :root {
+    color-scheme: light;
+    --bg:#f5f7fb; --bg-glow:rgba(99,102,241,.12); --surface:#ffffff; --surface-2:#f8fafc;
+    --surface-3:#eef2f7; --text:#172033; --text-2:#58657a; --text-3:#8792a5;
+    --border:#dfe5ee; --border-strong:#cbd4e1; --primary:#5957d9; --primary-hover:#4846c7;
+    --primary-soft:#eeedff; --green:#15805d; --green-soft:#e7f7f0; --red:#c63f4f; --red-soft:#fdecef;
+    --yellow:#a66608; --yellow-soft:#fff4d9; --blue:#2563b8; --blue-soft:#e8f1ff; --purple:#7552c8;
+    --shadow-sm:0 1px 2px rgba(16,24,40,.04); --shadow-md:0 12px 30px rgba(30,41,59,.08);
+    --shadow-lg:0 24px 60px rgba(30,41,59,.18); --radius:14px; --radius-sm:9px;
+    --focus:0 0 0 3px rgba(89,87,217,.22);
+  }
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --bg:#090d15; --bg-glow:rgba(99,102,241,.18); --surface:#111722; --surface-2:#151d2a;
+    --surface-3:#1c2635; --text:#edf2f8; --text-2:#a6b1c2; --text-3:#738095;
+    --border:#273244; --border-strong:#344258; --primary:#8b87ff; --primary-hover:#a19eff;
+    --primary-soft:#242347; --green:#48c78e; --green-soft:#16362b; --red:#ff7180; --red-soft:#3b1e27;
+    --yellow:#f0b34b; --yellow-soft:#392d18; --blue:#6ea8ff; --blue-soft:#192d4b; --purple:#b89cff;
+    --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow-md:0 16px 36px rgba(0,0,0,.28);
+    --shadow-lg:0 28px 70px rgba(0,0,0,.45); --focus:0 0 0 3px rgba(139,135,255,.25);
+  }
+  * { box-sizing:border-box; }
+  html { min-height:100%; background:var(--bg); }
+  body { min-height:100vh; margin:0; color:var(--text); background:
+    radial-gradient(circle at 10% -10%,var(--bg-glow),transparent 34rem),var(--bg);
+    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
+  button,input,select { font:inherit; }
+  button,a,select,input { -webkit-tap-highlight-color:transparent; }
+  a { color:inherit; }
+  code,.mono,.m { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
+  .skip-link { position:fixed; left:16px; top:-60px; z-index:200; padding:10px 14px; border-radius:8px;
+    color:#fff; background:var(--primary); transition:top .2s ease; }
+  .skip-link:focus { top:16px; }
+  .app-shell { width:min(1440px,100%); margin:0 auto; padding:0 28px 28px; }
+  .topbar { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px;
+    border-bottom:1px solid var(--border); }
+  .brand { display:flex; align-items:center; gap:12px; min-width:0; }
+  .brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#fff; border-radius:11px;
+    background:linear-gradient(145deg,#7773ff,#514ec8); box-shadow:0 9px 22px rgba(89,87,217,.28); }
+  .brand-mark .icon { width:23px; height:23px; }
+  .brand-name { display:flex; align-items:baseline; gap:7px; font-size:17px; font-weight:760; letter-spacing:-.025em; }
+  .brand-name span { color:var(--text-3); font-size:12px; font-weight:650; letter-spacing:.02em; text-transform:uppercase; }
+  .brand-tagline { color:var(--text-2); font-size:12px; margin-top:1px; }
+  .top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
+  .local-chip { display:inline-flex; align-items:center; gap:7px; color:var(--text-2); font-size:12px; padding:7px 10px;
+    border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--surface) 78%,transparent); }
+  .live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
+  .control { height:36px; border:1px solid var(--border); border-radius:9px; background:var(--surface);
+    color:var(--text-2); box-shadow:var(--shadow-sm); }
+  .select-wrap { position:relative; display:flex; align-items:center; }
+  .select-wrap>.icon { width:15px; height:15px; position:absolute; left:10px; pointer-events:none; color:var(--text-3); }
+  .select-wrap select { appearance:none; padding:0 29px 0 31px; cursor:pointer; outline:none; }
+  .select-wrap::after { content:""; position:absolute; right:11px; width:6px; height:6px; border-right:1.5px solid currentColor;
+    border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); pointer-events:none; color:var(--text-3); }
+  .language-switch { display:flex; padding:3px; gap:2px; }
+  .language-switch button { height:28px; min-width:34px; padding:0 8px; border:0; border-radius:6px; color:var(--text-3);
+    background:transparent; cursor:pointer; font-size:12px; font-weight:650; }
+  .language-switch button.active { background:var(--surface-3); color:var(--text); }
+  .icon-button { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px;
+    color:var(--text-2); background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; }
+  .icon-button .icon { width:17px; height:17px; }
+  .icon-button:hover,.control:hover { border-color:var(--border-strong); color:var(--text); }
+  .icon-button.refreshing .icon { animation:spin .7s linear infinite; }
+  .tabs { display:flex; gap:6px; margin:18px 0 30px; padding:5px; width:max-content; max-width:100%; overflow-x:auto;
+    border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface) 82%,transparent); box-shadow:var(--shadow-sm); }
+  .tabs a { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:8px; color:var(--text-2);
+    font-weight:650; font-size:13px; text-decoration:none; white-space:nowrap; transition:background .16s ease,color .16s ease,box-shadow .16s ease; }
+  .tabs a .icon { width:16px; height:16px; }
+  .tabs a:hover { color:var(--text); background:var(--surface-2); }
+  .tabs a.active { color:var(--primary); background:var(--surface); box-shadow:0 1px 4px rgba(16,24,40,.08); }
+  main { outline:none; }
+  .page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }
+  .page-heading h1 { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.035em; }
+  .page-heading p { margin:7px 0 0; color:var(--text-2); max-width:720px; }
+  .stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
+  .stats-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
+  .stat-card { position:relative; min-height:118px; padding:19px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius);
+    background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));
+    box-shadow:var(--shadow-sm); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
+  .stat-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
+  .stat-card::after { content:""; position:absolute; width:90px; height:90px; right:-38px; top:-45px; border-radius:50%; background:var(--tone-soft); }
+  .stat-top { display:flex; justify-content:space-between; align-items:center; }
+  .stat-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:var(--tone); background:var(--tone-soft); }
+  .stat-icon .icon { width:17px; height:17px; }
+  .stat-value { margin-top:13px; font-size:28px; font-weight:760; line-height:1; letter-spacing:-.04em; color:var(--tone); }
+  .stat-label { margin-top:7px; color:var(--text-2); font-size:12px; font-weight:650; }
+  .tone-neutral { --tone:var(--text-2); --tone-soft:var(--surface-3); }
+  .tone-blue { --tone:var(--blue); --tone-soft:var(--blue-soft); }
+  .tone-green { --tone:var(--green); --tone-soft:var(--green-soft); }
+  .tone-red { --tone:var(--red); --tone-soft:var(--red-soft); }
+  .tone-purple { --tone:var(--purple); --tone-soft:var(--primary-soft); }
+  .toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 0 12px; }
+  .filters { display:flex; gap:6px; overflow-x:auto; padding:2px; }
+  .filter-chip { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--border); border-radius:9px;
+    color:var(--text-2); background:var(--surface); text-decoration:none; font-size:12px; font-weight:650; white-space:nowrap; }
+  .filter-chip:hover { border-color:var(--border-strong); color:var(--text); }
+  .filter-chip.active { border-color:color-mix(in srgb,var(--primary) 38%,var(--border)); color:var(--primary); background:var(--primary-soft); }
+  .search-box { position:relative; width:min(320px,100%); flex:0 1 320px; }
+  .search-box .icon { position:absolute; left:11px; top:50%; width:16px; height:16px; color:var(--text-3); transform:translateY(-50%); }
+  .search-box input { width:100%; height:36px; padding:0 12px 0 36px; border:1px solid var(--border); border-radius:9px;
+    outline:none; color:var(--text); background:var(--surface); box-shadow:var(--shadow-sm); }
+  .search-box input::placeholder { color:var(--text-3); }
+  .search-box input:focus { border-color:var(--primary); box-shadow:var(--focus); }
+  .panel,.card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
+  .panel { overflow:hidden; margin-bottom:16px; }
+  .panel-head { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px;
+    border-bottom:1px solid var(--border); }
+  .panel-head h2,.panel-head h3 { margin:0; font-size:14px; letter-spacing:-.01em; }
+  .table-wrap { width:100%; overflow-x:auto; }
+  table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
+  th { height:42px; padding:0 13px; color:var(--text-3); background:var(--surface-2); border-bottom:1px solid var(--border);
+    font-size:11px; font-weight:730; letter-spacing:.045em; text-align:left; text-transform:uppercase; white-space:nowrap; }
+  td { padding:12px 13px; border-bottom:1px solid var(--border); vertical-align:middle; }
+  tbody tr:last-child td { border-bottom:0; }
+  tbody tr { transition:background .14s ease; }
+  tbody tr:hover { background:color-mix(in srgb,var(--primary-soft) 30%,transparent); }
+  .task-name { font-weight:680; color:var(--text); }
+  .task-prompt { max-width:520px; margin-top:3px; color:var(--text-2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .muted,.mu { color:var(--text-2); }
+  .faint { color:var(--text-3); }
+  .small,.sm { font-size:12px; }
+  .tag { display:inline-flex; align-items:center; min-height:23px; max-width:180px; padding:0 8px; border:1px solid var(--border);
+    border-radius:7px; color:var(--text-2); background:var(--surface-2); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .badge { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:720; white-space:nowrap; }
+  .badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
+  .b-pending { color:var(--text-2); background:var(--surface-3); }
+  .b-running { color:var(--blue); background:var(--blue-soft); }
+  .b-running::before { animation:pulse 1.7s ease-in-out infinite; }
+  .b-done { color:var(--green); background:var(--green-soft); }
+  .b-failed { color:var(--red); background:var(--red-soft); }
+  .b-dead_letter { color:var(--yellow); background:var(--yellow-soft); }
+  .b-cancelled,.b-unknown { color:var(--text-3); background:var(--surface-3); }
+  .t-cron { color:var(--purple); } .t-recurring { color:var(--blue); } .t-delayed { color:var(--yellow); }
+  .actions { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
+  .btn { min-height:32px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 11px; border:1px solid var(--border);
+    border-radius:8px; color:var(--text-2); background:var(--surface); text-decoration:none; cursor:pointer; font-size:12px; font-weight:650;
+    transition:transform .12s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease; }
+  .btn:hover { color:var(--text); border-color:var(--border-strong); background:var(--surface-2); }
+  .btn:active { transform:scale(.97); }
+  .btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
+  .btn-primary { color:#fff; border-color:var(--primary); background:var(--primary); }
+  .btn-primary:hover { color:#fff; border-color:var(--primary-hover); background:var(--primary-hover); }
+  .btn-danger { color:var(--red); }
+  .btn-danger:hover { color:var(--red); border-color:color-mix(in srgb,var(--red) 55%,var(--border)); background:var(--red-soft); }
+  .btn-warning:hover { color:var(--yellow); border-color:color-mix(in srgb,var(--yellow) 55%,var(--border)); background:var(--yellow-soft); }
+  .btn .icon { width:14px; height:14px; }
+  .pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin:18px 0 4px; }
+  .pagination .summary { color:var(--text-2); font-size:12px; }
+  .empty-state { display:grid; place-items:center; min-height:230px; padding:36px; text-align:center; }
+  .empty-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:var(--primary-soft); }
+  .empty-icon .icon { width:23px; height:23px; }
+  .empty-state h3 { margin:13px 0 4px; font-size:15px; }
+  .empty-state p { margin:0; color:var(--text-2); font-size:12px; }
+  .empty-state code { display:inline-block; margin-top:10px; padding:5px 8px; border-radius:6px; background:var(--surface-3); }
+  .settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
+  .settings-card { padding:18px; }
+  .settings-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; font-size:14px; }
+  .settings-title span:first-child { display:flex; align-items:center; gap:8px; }
+  .settings-title .icon { width:17px; height:17px; color:var(--primary); }
+  .field { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:12px; margin:11px 0; }
+  .field label { color:var(--text-2); font-size:12px; }
+  .input-unit { position:relative; }
+  .input-unit input { width:100%; height:36px; padding:0 47px 0 10px; border:1px solid var(--border); border-radius:8px; outline:none;
+    color:var(--text); background:var(--surface-2); }
+  .input-unit span { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:10px; pointer-events:none; }
+  .input-unit input:focus { border-color:var(--primary); box-shadow:var(--focus); background:var(--surface); }
+  .switch-field { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:11px 0; color:var(--text-2); font-size:12px; }
+  .switch { position:relative; width:42px; height:24px; flex:0 0 auto; }
+  .switch input { position:absolute; opacity:0; }
+  .switch span { position:absolute; inset:0; border-radius:999px; background:var(--surface-3); border:1px solid var(--border-strong); cursor:pointer; transition:.2s ease; }
+  .switch span::after { content:""; position:absolute; width:17px; height:17px; left:2px; top:2px; border-radius:50%; background:var(--surface);
+    box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .2s ease; }
+  .switch input:checked+span { background:var(--primary); border-color:var(--primary); }
+  .switch input:checked+span::after { transform:translateX(18px); }
+  .save-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin:0 0 24px; }
+  .info-list { padding:4px 18px; }
+  .info-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--border); }
+  .info-row:last-child { border-bottom:0; }
+  .info-key { color:var(--text-2); }
+  .info-value { font-weight:650; text-align:right; overflow-wrap:anywhere; }
+  .overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:18px; }
+  .overview-item { padding:13px; border-radius:10px; background:var(--surface-2); }
+  .overview-item span { color:var(--text-2); font-size:11px; }
+  .overview-item strong { display:block; margin-top:5px; font-size:19px; }
+  .danger-card { margin-top:16px; padding:18px; border-color:color-mix(in srgb,var(--red) 40%,var(--border)); background:linear-gradient(145deg,var(--surface),var(--red-soft)); }
+  .danger-card h2 { display:flex; align-items:center; gap:8px; margin:0 0 5px; color:var(--red); font-size:14px; }
+  .danger-card h2 .icon { width:17px; height:17px; }
+  .danger-card p { max-width:800px; margin:0 0 14px; color:var(--text-2); font-size:12px; }
+  .log-panel { margin:12px 0; animation:reveal .18s ease both; }
+  .log-box { max-height:360px; overflow:auto; padding:16px; color:var(--text-2); background:#0b1018; font-family:"SFMono-Regular",Consolas,monospace;
+    font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
+  :root[data-theme="light"] .log-box { color:#dbe5f3; }
+  dialog { width:min(760px,calc(100% - 32px)); padding:0; border:1px solid var(--border); border-radius:16px; color:var(--text);
+    background:var(--surface); box-shadow:var(--shadow-lg); }
+  dialog[open] { animation:dialog-in .18s ease both; }
+  dialog::backdrop { background:rgba(8,12,20,.62); backdrop-filter:blur(3px); animation:fade-in .18s ease both; }
+  .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; border-bottom:1px solid var(--border); }
+  .dialog-head h2 { margin:0; font-size:15px; }
+  .dialog-head p { margin:3px 0 0; color:var(--text-2); font-size:11px; }
+  .dialog-body { max-height:70vh; overflow:auto; padding:18px; }
+  .dialog-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }
+  .json-view { min-height:160px; margin:0; padding:15px; overflow:auto; border:1px solid var(--border); border-radius:10px; color:var(--text-2);
+    background:var(--surface-2); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
+  .confirm-copy { color:var(--text-2); margin:0; }
+  .confirm-copy strong { display:block; margin-bottom:5px; color:var(--text); font-size:15px; }
+  .danger-input { width:100%; height:40px; margin-top:14px; padding:0 12px; border:1px solid var(--border); border-radius:9px; outline:none;
+    color:var(--text); background:var(--surface-2); font-family:"SFMono-Regular",Consolas,monospace; text-transform:uppercase; }
+  .danger-input:focus { border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent); }
+  .toast-region { position:fixed; top:18px; right:18px; z-index:300; display:grid; gap:8px; pointer-events:none; }
+  .toast { min-width:260px; max-width:min(420px,calc(100vw - 36px)); display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
+    border:1px solid var(--border); border-radius:11px; color:var(--text); background:var(--surface); box-shadow:var(--shadow-lg); animation:toast-in .22s ease both; }
+  .toast .icon { width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
+  .toast.ok .icon { color:var(--green); } .toast.error .icon { color:var(--red); }
+  .toast.leaving { animation:toast-out .18s ease both; }
+  footer { display:flex; justify-content:center; padding:24px 0 4px; color:var(--text-3); font-size:11px; }
+  [hidden] { display:none!important; }
+  :focus-visible { outline:none; box-shadow:var(--focus); }
+  .ui-ready,.ui-ready * { transition-property:background-color,border-color,color,box-shadow; transition-duration:.16s; transition-timing-function:ease; }
+  .reveal { animation:reveal .28s ease both; }
+  .reveal-delay-1 { animation-delay:.04s; } .reveal-delay-2 { animation-delay:.08s; }
+  @keyframes spin { to { transform:rotate(360deg); } }
+  @keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 currentColor; } 50% { opacity:.7; box-shadow:0 0 0 4px transparent; } }
+  @keyframes reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
+  @keyframes dialog-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
+  @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
+  @keyframes toast-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
+  @keyframes toast-out { to { opacity:0; transform:translateY(-6px) scale(.98); } }
+  @media (max-width:1000px) {
+    .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
+    .settings-grid { grid-template-columns:1fr; }
+    .local-chip { display:none; }
+  }
+  @media (max-width:720px) {
+    .app-shell { padding:0 16px 20px; }
+    .topbar { min-height:72px; }
+    .brand-tagline,.brand-name span { display:none; }
+    .top-actions { gap:5px; }
+    .select-wrap select { width:42px; color:transparent; padding:0; }
+    .select-wrap>.icon { left:12px; color:var(--text-2); }
+    .select-wrap::after { display:none; }
+    .language-switch { display:none; }
+    .mobile-language { display:grid!important; }
+    .tabs { width:100%; margin:14px 0 24px; }
+    .tabs a { flex:1; justify-content:center; padding:0 10px; }
+    .tabs a span { display:none; }
+    .page-heading { align-items:flex-start; }
+    .page-heading h1 { font-size:24px; }
+    .page-heading p { font-size:13px; }
+    .stats-grid,.stats-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
+    .stat-card { min-height:105px; padding:15px; }
+    .toolbar { align-items:stretch; flex-direction:column; }
+    .search-box { width:100%; flex-basis:auto; }
+    .filters { order:2; }
+    .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
+    .save-row { align-items:flex-end; flex-direction:column-reverse; }
+    .save-row .btn { width:100%; }
+    .responsive-table { display:block; padding:10px; }
+    .responsive-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+    .responsive-table tbody { display:grid; gap:10px; }
+    .responsive-table tr { display:grid; gap:0; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
+    .responsive-table td { min-width:0; display:grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:10px; padding:6px 0; border:0; }
+    .responsive-table td::before { content:attr(data-label); color:var(--text-3); font-size:10px; font-weight:730; letter-spacing:.045em; text-transform:uppercase; }
+    .responsive-table td[data-primary] { display:block; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--border); }
+    .responsive-table td[data-primary]::before { display:none; }
+    .responsive-table .task-prompt { max-width:100%; }
+    .responsive-table .actions { justify-content:flex-start; }
+  }
+  @media (max-width:520px) {
+    .stats-grid,.stats-grid.three { grid-template-columns:1fr 1fr; }
+    .stat-card { min-height:98px; }
+    .stat-value { font-size:24px; }
+    .page-heading p { max-width:95%; }
+    .field { grid-template-columns:minmax(0,1fr) 105px; }
+    .overview-grid { grid-template-columns:1fr 1fr; padding:12px; }
+    .pagination .summary { max-width:150px; text-align:center; }
+  }
+  @media (prefers-reduced-motion:reduce) {
+    *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
+  }
+</style>`;
+    PAGE_KEYS = {
+      tasks: { title: "page.tasks.title", description: "page.tasks.description" },
+      templates: { title: "page.templates.title", description: "page.templates.description" },
+      runs: { title: "page.runs.title", description: "page.runs.description" },
+      system: { title: "page.system.title", description: "page.system.description" }
+    };
+  }
+});
+
 // src/web/index.tsx
 var web_exports = {};
 __export(web_exports, {
   dashboardApp: () => dashboardApp,
   default: () => web_default
 });
-import { existsSync as existsSync6, readFileSync as readFileSync3, writeFileSync as writeFileSync2, mkdirSync as mkdirSync3, renameSync as renameSync2 } from "fs";
+import { existsSync as existsSync6, mkdirSync as mkdirSync3, readFileSync as readFileSync3, renameSync as renameSync2, writeFileSync as writeFileSync2 } from "fs";
 import { dirname as dirname6 } from "path";
 function parsePositiveInteger(value) {
   if (!/^\d+$/.test(value)) return null;
@@ -19950,41 +20646,34 @@ function parseTaskStatus(value) {
 function safeStatus(value) {
   return value && TASK_STATUSES.has(value) ? value : "unknown";
 }
+function resolveLocale(c) {
+  const requested = c.req.query("lang");
+  if (requested === "en" || requested === "zh-CN") return requested;
+  const cookie = c.req.header("Cookie") ?? "";
+  const match2 = /(?:^|;\s*)supertask_locale=([^;]+)/.exec(cookie);
+  if (match2) {
+    try {
+      const saved = decodeURIComponent(match2[1]);
+      if (saved === "en" || saved === "zh-CN") return saved;
+    } catch {
+    }
+  }
+  const accepted = c.req.header("Accept-Language")?.toLowerCase() ?? "";
+  return accepted.startsWith("en") ? "en" : "zh-CN";
+}
 function formatDuration(startAt, endAt) {
-  if (!startAt) return "-";
+  if (!startAt) return "\u2014";
   const start = new Date(startAt).getTime();
   const end = endAt ? new Date(endAt).getTime() : Date.now();
   const seconds = Math.floor((end - start) / 1e3);
   if (seconds < 0) return "0s";
   if (seconds < 60) return `${seconds}s`;
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m${seconds % 60}s`;
-  return `${Math.floor(seconds / 3600)}h${Math.floor(seconds % 3600 / 60)}m`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  return `${Math.floor(seconds / 3600)}h ${Math.floor(seconds % 3600 / 60)}m`;
 }
-function timeAgo(ms) {
-  if (!ms) return "-";
-  const diff = Date.now() - ms;
-  if (diff < 6e4) return `${Math.floor(diff / 1e3)}\u79D2\u524D`;
-  if (diff < 36e5) return `${Math.floor(diff / 6e4)}\u5206\u949F\u524D`;
-  if (diff < 864e5) return `${Math.floor(diff / 36e5)}\u5C0F\u65F6\u524D`;
-  return `${Math.floor(diff / 864e5)}\u5929\u524D`;
-}
-function timeUntil(ms) {
-  if (!ms) return "-";
-  const diff = ms - Date.now();
-  if (diff < 0) return "\u5DF2\u5230\u671F";
-  if (diff < 6e4) return `${Math.floor(diff / 1e3)}\u79D2\u540E`;
-  if (diff < 36e5) return `${Math.floor(diff / 6e4)}\u5206\u949F\u540E`;
-  if (diff < 864e5) return `${Math.floor(diff / 36e5)}\u5C0F\u65F6\u540E`;
-  return `${Math.floor(diff / 864e5)}\u5929\u540E`;
-}
-function formatDate(ts) {
-  if (!ts) return "-";
-  const d = ts instanceof Date ? ts : new Date(ts);
-  return d.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
-function esc(s) {
-  if (!s) return "";
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function esc(value) {
+  if (!value) return "";
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function readCurrentConfig() {
   const configPath = getConfigPath();
@@ -20003,94 +20692,51 @@ function writeConfig(cfg) {
   writeFileSync2(tempPath, JSON.stringify(cfg, null, 2) + "\n", { mode: 384 });
   renameSync2(tempPath, configPath);
 }
-function renderLayout(title, activeTab, body) {
-  return `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>${title} - SuperTask</title>${SHARED_STYLES}
-<script>
-async function retryTask(id){if(!confirm('\u786E\u5B9A\u91CD\u8BD5\u4EFB\u52A1 #'+id+'?'))return;const r=await fetch('/api/tasks/'+id+'/retry',{method:'POST'});const d=await r.json();if(!r.ok){alert('\u91CD\u8BD5\u5931\u8D25: '+d.error);return;}location.reload();}
-async function cancelTask(id){if(!confirm('\u786E\u5B9A\u53D6\u6D88\u4EFB\u52A1 #'+id+'?'))return;const r=await fetch('/api/tasks/'+id+'/cancel',{method:'POST'});const d=await r.json();if(!r.ok){alert('\u53D6\u6D88\u5931\u8D25: '+d.error);return;}location.reload();}
-async function deleteTask(id){if(!confirm('\u786E\u5B9A\u5220\u9664\u4EFB\u52A1 #'+id+'?'))return;const r=await fetch('/api/tasks/'+id,{method:'DELETE'});const d=await r.json();if(!r.ok){alert('\u5220\u9664\u5931\u8D25: '+d.error);return;}location.reload();}
-async function showDetail(id){try{const r=await fetch('/api/tasks/'+id);const t=await r.json();document.getElementById('dc').textContent=JSON.stringify(t,null,2);document.getElementById('dd').showModal();}catch(e){alert('\u83B7\u53D6\u8BE6\u60C5\u5931\u8D25');}}
-async function showRunDetail(id){try{const r=await fetch('/api/runs/'+id);const t=await r.json();document.getElementById('dc').textContent=JSON.stringify(t,null,2);document.getElementById('dd').showModal();}catch(e){alert('\u83B7\u53D6\u8BE6\u60C5\u5931\u8D25');}}
-async function showTemplateDetail(id){try{const r=await fetch('/api/templates/'+id);const t=await r.json();document.getElementById('dc').textContent=JSON.stringify(t,null,2);document.getElementById('dd').showModal();}catch(e){alert('\u83B7\u53D6\u8BE6\u60C5\u5931\u8D25');}}
-async function enableTmpl(id){await fetch('/api/templates/'+id+'/enable',{method:'POST'});location.reload();}
-async function disableTmpl(id){if(!confirm('\u786E\u5B9A\u7981\u7528\u6B64\u6A21\u677F?'))return;await fetch('/api/templates/'+id+'/disable',{method:'POST'});location.reload();}
-async function deleteTmpl(id){if(!confirm('\u786E\u5B9A\u5220\u9664\u6B64\u6A21\u677F? \u6B64\u64CD\u4F5C\u4E0D\u53EF\u6062\u590D!'))return;await fetch('/api/templates/'+id,{method:'DELETE'});location.reload();}
-async function triggerTmpl(id){if(!confirm('\u7ACB\u5373\u89E6\u53D1\u4E00\u6B21?'))return;const r=await fetch('/api/templates/'+id+'/trigger',{method:'POST'});const d=await r.json();if(d.success){alert('\u5DF2\u521B\u5EFA\u4EFB\u52A1 #'+d.taskId);location.reload();}else{alert('\u89E6\u53D1\u5931\u8D25');}}
-function toggleLog(id){const el=document.getElementById('log-'+id);el.style.display=el.style.display==='none'?'block':'none';}
-
-async function clearDatabase(){
-  if(!confirm('\u786E\u5B9A\u6E05\u7A7A\u6240\u6709\u4EFB\u52A1\u6570\u636E\uFF1F\u7CFB\u7EDF\u4F1A\u5148\u81EA\u52A8\u521B\u5EFA\u5907\u4EFD\u3002'))return;
-  if(!confirm('\u518D\u6B21\u786E\u8BA4\uFF1A\u5C06\u4E8B\u52A1\u6027\u5220\u9664\u6240\u6709\u4EFB\u52A1\u3001\u6267\u884C\u8BB0\u5F55\u548C\u8C03\u5EA6\u6A21\u677F\u3002'))return;
-  try{
-    const r=await fetch('/api/database/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({confirmation:'CLEAR'})});
-    const d=await r.json();
-    if(d.success){alert('\u6570\u636E\u5E93\u5DF2\u6E05\u7A7A\uFF0C\u81EA\u52A8\u5907\u4EFD\uFF1A'+d.backupPath);location.reload();}
-    else{alert('\u6E05\u7A7A\u5931\u8D25: '+d.error);}
-  }catch(e){alert('\u6E05\u7A7A\u5931\u8D25: '+e.message);}
+function statCard(value, label, tone, cardIcon, delay = "") {
+  return `<div class="stat-card ${tone} reveal ${delay}">
+      <div class="stat-top"><div class="stat-icon">${cardIcon}</div></div>
+      <div class="stat-value">${value}</div><div class="stat-label">${label}</div>
+    </div>`;
 }
-
-async function saveConfig(){
-  const form=document.getElementById('config-form');
-    const data={
-    worker:{
-      maxConcurrency:Number(form.mc.value),
-      pollIntervalMs:Number(form.pi.value),
-      heartbeatIntervalMs:Number(form.hi.value)*1000,
-      taskTimeoutMs:Number(form.to.value)*60000,
-    },
-    scheduler:{
-      enabled:form.se.checked,
-      checkIntervalMs:Number(form.si.value),
-    },
-    watchdog:{
-      heartbeatTimeoutMs:Number(form.wt.value)*1000,
-      checkIntervalMs:Number(form.wci.value)*1000,
-      cleanupIntervalMs:Number(form.wcl.value)*3600000,
-      retentionDays:Number(form.rd.value),
-    }
-  };
-  try{
-    const r=await fetch('/api/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
-    const d=await r.json();
-    if(d.success){document.getElementById('toast').textContent='\u914D\u7F6E\u5DF2\u4FDD\u5B58\uFF0C\u91CD\u542F Gateway \u540E\u751F\u6548';document.getElementById('toast').style.display='block';setTimeout(()=>document.getElementById('toast').style.display='none',3000);}
-    else{alert('\u4FDD\u5B58\u5931\u8D25: '+d.error);}
-  }catch(e){alert('\u4FDD\u5B58\u5931\u8D25: '+e.message);}
+function emptyState(title, hint, code = "") {
+  return `<div class="empty-state"><div><div class="empty-icon">${icon("inbox")}</div>
+      <h3>${title}</h3><p>${hint}</p>${code ? `<code>${code}</code>` : ""}</div></div>`;
 }
-</script>
-</head>
-<body>
-<div id="toast" class="toast toast-ok"></div>
-<div class="c">
-  <header>
-    <div><h1>SuperTask Dashboard</h1><span class="mu sm">\u4EFB\u52A1\u8C03\u5EA6\u7BA1\u7406\u4E2D\u5FC3</span></div>
-    <div><a href="${activeTab === "tasks" ? "/" : "/" + activeTab}" class="rf">\u5237\u65B0</a></div>
-  </header>
-  <nav class="tabs">
-    <a href="/" class="${activeTab === "tasks" ? "active" : ""}">\u4EFB\u52A1\u961F\u5217</a>
-    <a href="/templates" class="${activeTab === "templates" ? "active" : ""}">\u5B9A\u65F6\u4EFB\u52A1</a>
-    <a href="/runs" class="${activeTab === "runs" ? "active" : ""}">\u6267\u884C\u65E5\u5FD7</a>
-    <a href="/system" class="${activeTab === "system" ? "active" : ""}">\u7CFB\u7EDF\u72B6\u6001</a>
-  </nav>
-  ${body}
-</div>
-<dialog id="dd"><div class="dh"><h3 style="margin:0">\u8BE6\u60C5</h3><button class="cb" onclick="document.getElementById('dd').close()">&times;</button></div><div class="db"><pre id="dc"></pre></div></dialog>
-</body></html>`;
+function formatInterval(milliseconds, locale) {
+  const formatter = new Intl.NumberFormat(locale === "en" ? "en-US" : "zh-CN", {
+    maximumFractionDigits: 1
+  });
+  if (milliseconds < 6e4) {
+    return t(locale, "schedule.seconds", { count: formatter.format(milliseconds / 1e3) });
+  }
+  if (milliseconds < 36e5) {
+    return t(locale, "schedule.minutes", { count: formatter.format(milliseconds / 6e4) });
+  }
+  if (milliseconds < 864e5) {
+    return t(locale, "schedule.hours", { count: formatter.format(milliseconds / 36e5) });
+  }
+  return t(locale, "schedule.days", { count: formatter.format(milliseconds / 864e5) });
 }
-var app, TASK_STATUSES, SHARED_STYLES, dashboardApp, web_default;
+function pagination(locale, basePath, page, pages, total, suffix = "") {
+  const previous = page > 1 ? `<a class="btn" href="${basePath}?page=${page - 1}${suffix}">${icon("chevronLeft")}${t(locale, "pagination.previous")}</a>` : "";
+  const next = page < pages ? `<a class="btn" href="${basePath}?page=${page + 1}${suffix}">${t(locale, "pagination.next")}${icon("chevronRight")}</a>` : "";
+  return `<div class="pagination">${previous}<span class="summary">${t(locale, "pagination.summary", { page, pages, total })}</span>${next}</div>`;
+}
+var app, TASK_STATUSES, dashboardApp, web_default;
 var init_web = __esm({
   "src/web/index.tsx"() {
     "use strict";
     init_dist();
-    init_html2();
-    init_task_service();
-    init_task_run_service();
-    init_task_template_service();
-    init_database_maintenance_service();
     init_drizzle_orm();
     init_db2();
+    init_database_maintenance_service();
+    init_task_run_service();
+    init_task_service();
+    init_task_template_service();
     init_config();
     init_health();
     init_job_templates();
+    init_ui();
     app = new Hono2();
     TASK_STATUSES = /* @__PURE__ */ new Set([
       "pending",
@@ -20131,84 +20777,9 @@ var init_web = __esm({
       const health = getGatewayHealth();
       return c.json(health, health.status === "ok" ? 200 : 503);
     });
-    SHARED_STYLES = html`
-<style>
-  :root { --bg:#0d1117; --card:#161b22; --border:#30363d; --t1:#c9d1d9; --t2:#8b949e; --green:#238636; --red:#da3633; --yellow:#d29922; --blue:#1f6feb; --purple:#8957e5; }
-  * { box-sizing:border-box; }
-  body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:var(--bg); color:var(--t1); margin:0; line-height:1.5; }
-  .c { max-width:1280px; margin:0 auto; padding:20px; }
-  header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:16px; }
-  h1 { font-size:22px; margin:0; color:#fff; }
-  nav.tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border); }
-  nav.tabs a { display:block; padding:10px 20px; color:var(--t2); text-decoration:none; font-size:14px; font-weight:500; border-bottom:2px solid transparent; }
-  nav.tabs a:hover { color:var(--t1); }
-  nav.tabs a.active { color:#fff; border-bottom-color:var(--blue); }
-  .g4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
-  .g3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:24px; }
-  .card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; }
-  .sv { font-size:28px; font-weight:bold; }
-  .sl { color:var(--t2); font-size:12px; text-transform:uppercase; margin-top:4px; }
-  .panel { background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:16px; }
-  .ph { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
-  .ph h3 { margin:0; font-size:14px; }
-  table { width:100%; border-collapse:collapse; font-size:13px; }
-  th { background:#21262d; color:var(--t2); font-weight:600; text-align:left; padding:8px 12px; white-space:nowrap; }
-  td { padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
-  tr:last-child td { border-bottom:none; }
-  tr:hover { background:rgba(255,255,255,0.02); }
-  .badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
-  .b-pending { background:rgba(110,118,129,0.3); color:#8b949e; }
-  .b-running { background:rgba(56,139,253,0.15); color:#58a6ff; }
-  .b-done { background:rgba(46,160,67,0.15); color:#3fb950; }
-  .b-failed { background:rgba(248,81,73,0.15); color:#f85149; }
-  .b-dead_letter { background:rgba(210,153,34,0.15); color:#d29922; }
-  .b-cancelled { background:rgba(110,118,129,0.2); color:#6e7681; }
-  .btn { appearance:none; background:transparent; border:1px solid var(--border); color:var(--t2); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; margin-right:4px; text-decoration:none; }
-  .btn:hover { background:#30363d; color:#fff; }
-  .btn-sm { padding:2px 6px; font-size:11px; }
-  .btn-primary { background:var(--green); border-color:var(--green); color:#fff; }
-  .btn-primary:hover { opacity:0.85; color:#fff; }
-  .btn-danger:hover { color:var(--red); border-color:var(--red); }
-  .btn-warn:hover { color:var(--yellow); border-color:var(--yellow); }
-  .rf { background:var(--green); color:white; border:none; padding:6px 16px; border-radius:6px; font-weight:600; cursor:pointer; text-decoration:none; }
-  .rf:hover { opacity:0.9; }
-  .m { font-family:monospace; font-size:12px; }
-  .mu { color:var(--t2); }
-  .sm { font-size:12px; }
-  .el { max-width:400px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle; }
-  .tag { display:inline-block; background:#21262d; padding:1px 6px; border-radius:4px; font-size:11px; }
-  .t-cron { color:var(--purple); }
-  .t-recurring { color:var(--blue); }
-  .t-delayed { color:var(--yellow); }
-  .pn { margin-top:16px; display:flex; justify-content:center; gap:10px; align-items:center; }
-  .ir { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
-  .ir:last-child { border-bottom:none; }
-  .ik { color:var(--t2); }
-  .iv { font-weight:500; }
-  .form-row { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
-  .form-row label { color:var(--t2); font-size:13px; min-width:100px; }
-  .form-row input, .form-row select { background:#0d1117; border:1px solid var(--border); color:var(--t1); padding:6px 10px; border-radius:4px; font-size:13px; }
-  .form-row input:focus, .form-row select:focus { outline:none; border-color:var(--blue); }
-  .log-box { background:#0d1117; border:1px solid var(--border); border-radius:4px; padding:12px; font-family:monospace; font-size:12px; max-height:300px; overflow-y:auto; white-space:pre-wrap; color:var(--t1); margin-top:8px; }
-  dialog { background:var(--card); color:var(--t1); border:1px solid var(--border); border-radius:8px; padding:0; max-width:900px; width:90%; }
-  dialog::backdrop { background:rgba(0,0,0,0.6); }
-  .dh { padding:16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
-  .db { padding:16px; max-height:70vh; overflow-y:auto; }
-  pre { margin:0; white-space:pre-wrap; font-size:12px; }
-  .cb { background:transparent; border:none; color:var(--t2); cursor:pointer; font-size:20px; }
-  .mt8 { margin-top:8px; }
-  .mt16 { margin-top:16px; }
-  .mb0 { margin-bottom:0; }
-  .ta-center { text-align:center; }
-  .p30 { padding:30px; }
-  .toast { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:6px; color:#fff; font-size:14px; z-index:9999; display:none; }
-  .toast-ok { background:var(--green); }
-  .toast-err { background:var(--red); }
-</style>
-`;
     app.get("/", async (c) => {
-      const pageParam = c.req.query("page") || "1";
-      const page = parsePositiveInteger(pageParam);
+      const locale = resolveLocale(c);
+      const page = parsePositiveInteger(c.req.query("page") || "1");
       if (page === null) return c.text("invalid page", 400);
       const statusFilter = c.req.query("status") || "";
       const parsedStatus = statusFilter ? parseTaskStatus(statusFilter) : null;
@@ -20219,8 +20790,7 @@ var init_web = __esm({
         TaskService.list({ limit, offset, ...parsedStatus ? { status: parsedStatus } : {} }),
         TaskService.stats({})
       ]);
-      const taskIds = tasks4.map((t) => t.id);
-      const latestRuns = await TaskRunService.getLatestByTaskIds(taskIds);
+      const latestRuns = await TaskRunService.getLatestByTaskIds(tasks4.map((task) => task.id));
       const counts = {
         pending: statsData.pending || 0,
         running: statsData.running || 0,
@@ -20228,253 +20798,211 @@ var init_web = __esm({
         failed: (statsData.failed || 0) + (statsData.dead_letter || 0),
         total: statsData.total || 0
       };
-      const totalPages = Math.ceil(counts.total / limit);
-      let filterBtns = `<div style="margin-bottom:12px;display:flex;gap:6px;">
-      <a href="/" class="btn ${!statusFilter ? "btn-primary" : ""}">\u5168\u90E8</a>
-      <a href="/?status=pending" class="btn ${statusFilter === "pending" ? "btn-primary" : ""}">Pending</a>
-      <a href="/?status=running" class="btn ${statusFilter === "running" ? "btn-primary" : ""}">Running</a>
-      <a href="/?status=done" class="btn ${statusFilter === "done" ? "btn-primary" : ""}">Done</a>
-      <a href="/?status=failed" class="btn ${statusFilter === "failed" ? "btn-primary" : ""}">Failed</a>
-      <a href="/?status=dead_letter" class="btn ${statusFilter === "dead_letter" ? "btn-primary" : ""}">Dead Letter</a>
-    </div>`;
-      let rows = "";
-      for (const task of tasks4) {
+      const filteredTotal = parsedStatus ? Number(statsData[parsedStatus] ?? 0) : counts.total;
+      const totalPages = Math.max(1, Math.ceil(filteredTotal / limit));
+      const filterItems = [
+        { status: "", label: t(locale, "filter.all") },
+        { status: "pending", label: statusText(locale, "pending") },
+        { status: "running", label: statusText(locale, "running") },
+        { status: "done", label: statusText(locale, "done") },
+        { status: "failed", label: statusText(locale, "failed") },
+        { status: "dead_letter", label: statusText(locale, "dead_letter") },
+        { status: "cancelled", label: statusText(locale, "cancelled") }
+      ];
+      const filters = filterItems.map(({ status, label }) => {
+        const href = status ? `/?status=${status}` : "/";
+        return `<a href="${href}" class="filter-chip ${statusFilter === status ? "active" : ""}">${label}</a>`;
+      }).join("");
+      const rows = tasks4.map((task) => {
         const status = safeStatus(task.status);
-        const st = status.toUpperCase();
         const executionActive = latestRuns.get(task.id)?.status === "running";
-        rows += `<tr>
-          <td class="mu">#${task.id}</td>
-          <td><div style="font-weight:500">${esc(task.name)}</div><div class="mu sm el">${esc(task.prompt.substring(0, 120))}</div></td>
-          <td><span class="tag">${esc(task.agent)}</span></td>
-          <td><span class="badge b-${status}">${st}</span></td>
-          <td class="sm ${task.status === "running" ? "" : "mu"}">${formatDuration(task.startedAt, task.finishedAt)}</td>
-          <td class="mu sm">${(task.retryCount ?? 0) > 0 ? task.retryCount : "-"}</td>
-          <td>
-            <button class="btn btn-sm" onclick="showDetail(${task.id})">\u8BE6\u60C5</button>
-            ${task.status === "failed" || task.status === "dead_letter" ? `<button class="btn btn-sm btn-warn" onclick="retryTask(${task.id})">\u91CD\u8BD5</button>` : ""}
-            ${["pending", "running", "failed"].includes(task.status ?? "") ? `<button class="btn btn-sm btn-warn" onclick="cancelTask(${task.id})">\u53D6\u6D88</button>` : ""}
-            ${task.status === "running" || executionActive ? "" : `<button class="btn btn-sm btn-danger" onclick="deleteTask(${task.id})">\u5220\u9664</button>`}
-          </td></tr>`;
-      }
-      const qp = statusFilter ? `&status=${statusFilter}` : "";
-      let paging = `<div class="pn">`;
-      if (page > 1) paging += `<a href="/?page=${page - 1}${qp}" class="btn">\u4E0A\u4E00\u9875</a>`;
-      paging += `<span class="mu sm">\u7B2C ${page} \u9875 / \u5171 ${totalPages} \u9875 (${counts.total} \u6761)</span>`;
-      if (page < totalPages) paging += `<a href="/?page=${page + 1}${qp}" class="btn">\u4E0B\u4E00\u9875</a>`;
-      paging += `</div>`;
+        const searchable = esc(`${task.name} ${task.agent} ${task.prompt}`);
+        return `<tr data-task-row data-search="${searchable}">
+          <td class="faint" data-label="${t(locale, "table.id")}">#${task.id}</td>
+          <td data-primary data-label="${t(locale, "table.task")}"><div class="task-name">${esc(task.name)}</div><div class="task-prompt" title="${esc(task.prompt)}">${esc(task.prompt.substring(0, 160))}</div></td>
+          <td data-label="${t(locale, "table.agent")}"><span class="tag">${esc(task.agent)}</span></td>
+          <td data-label="${t(locale, "table.status")}"><span class="badge b-${status}">${statusText(locale, status)}</span></td>
+          <td data-label="${t(locale, "table.duration")}" class="small ${task.status === "running" ? "" : "muted"}">${formatDuration(task.startedAt, task.finishedAt)}</td>
+          <td data-label="${t(locale, "table.retries")}" class="muted small">${(task.retryCount ?? 0) > 0 ? task.retryCount : "\u2014"}</td>
+          <td data-label="${t(locale, "table.actions")}"><div class="actions">
+            <button type="button" class="btn" onclick="showDetail(${task.id})">${t(locale, "action.details")}</button>
+            ${task.status === "failed" || task.status === "dead_letter" ? `<button type="button" class="btn btn-warning" onclick="retryTask(${task.id})">${t(locale, "action.retry")}</button>` : ""}
+            ${["pending", "running", "failed"].includes(task.status ?? "") ? `<button type="button" class="btn btn-warning" onclick="cancelTask(${task.id})">${t(locale, "action.cancel")}</button>` : ""}
+            ${task.status === "running" || executionActive ? "" : `<button type="button" class="btn btn-danger" onclick="deleteTask(${task.id})">${t(locale, "action.delete")}</button>`}
+          </div></td>
+        </tr>`;
+      }).join("");
+      const table = tasks4.length === 0 ? emptyState(t(locale, "empty.tasks"), t(locale, "empty.tasksHint")) : `<div class="table-wrap"><table class="responsive-table">
+            <thead><tr><th>ID</th><th>${t(locale, "table.task")}</th><th>${t(locale, "table.agent")}</th><th>${t(locale, "table.status")}</th><th>${t(locale, "table.duration")}</th><th>${t(locale, "table.retries")}</th><th>${t(locale, "table.actions")}</th></tr></thead>
+            <tbody>${rows}</tbody>
+          </table></div>
+          <div id="search-empty" hidden>${emptyState(t(locale, "filter.noResults"), "")}</div>`;
+      const suffix = statusFilter ? `&status=${statusFilter}` : "";
       const body = `
-      <div class="g4">
-        <div class="card"><div class="sv" style="color:var(--t2)">${counts.pending}</div><div class="sl">Pending</div></div>
-        <div class="card"><div class="sv" style="color:var(--blue)">${counts.running}</div><div class="sl">Running</div></div>
-        <div class="card"><div class="sv" style="color:var(--green)">${counts.done}</div><div class="sl">Done</div></div>
-        <div class="card"><div class="sv" style="color:var(--red)">${counts.failed}</div><div class="sl">Failed / Dead</div></div>
+      <div class="stats-grid">
+        ${statCard(counts.pending, t(locale, "stats.pending"), "tone-neutral", icon("clock"))}
+        ${statCard(counts.running, t(locale, "stats.running"), "tone-blue", icon("activity"), "reveal-delay-1")}
+        ${statCard(counts.done, t(locale, "stats.done"), "tone-green", icon("check"), "reveal-delay-1")}
+        ${statCard(counts.failed, t(locale, "stats.failedDead"), "tone-red", icon("alert"), "reveal-delay-2")}
+      </div>
+      <div class="toolbar reveal reveal-delay-1">
+        <div class="filters">${filters}</div>
+        <label class="search-box">${icon("search")}<input type="search" oninput="filterTasks(this.value)" placeholder="${t(locale, "filter.searchTasks")}" aria-label="${t(locale, "filter.searchTasks")}"></label>
       </div>
-      ${filterBtns}
-      <div class="panel"><table>
-        <thead><tr><th width="50">ID</th><th>\u4EFB\u52A1</th><th>Agent</th><th width="90">\u72B6\u6001</th><th width="70">\u8017\u65F6</th><th width="60">\u91CD\u8BD5</th><th>\u64CD\u4F5C</th></tr></thead>
-        <tbody>${rows}</tbody>
-      </table></div>
-      ${paging}`;
-      return c.html(renderLayout("\u4EFB\u52A1\u961F\u5217", "tasks", body));
+      <section class="panel reveal reveal-delay-2">${table}</section>
+      ${pagination(locale, "/", page, totalPages, filteredTotal, suffix)}`;
+      return c.html(renderLayout({ locale, activeTab: "tasks", body }));
     });
     app.get("/templates", async (c) => {
+      const locale = resolveLocale(c);
       const templates = await TaskTemplateService.list(100);
-      const enabled = templates.filter((t) => t.enabled).length;
+      const enabled = templates.filter((template) => template.enabled).length;
       const disabled = templates.length - enabled;
-      let rows = "";
-      for (const t of templates) {
-        const scheduleType = ["cron", "recurring", "delayed"].includes(t.scheduleType) ? t.scheduleType : "unknown";
-        const typeLabel = scheduleType === "cron" ? "Cron" : scheduleType === "recurring" ? "\u5FAA\u73AF" : scheduleType === "delayed" ? "\u5B9A\u65F6" : "\u672A\u77E5";
-        const typeClass = "tag t-" + scheduleType;
-        let rule = "-";
-        if (t.scheduleType === "cron") rule = t.cronExpr || "-";
-        else if (t.scheduleType === "recurring") rule = t.intervalMs ? `${Math.floor(t.intervalMs / 6e4)}\u5206\u949F` : "-";
-        else if (t.scheduleType === "delayed") rule = formatDate(t.runAt);
-        const statusBadge = t.enabled ? '<span class="badge b-done">\u542F\u7528</span>' : '<span class="badge b-cancelled">\u7981\u7528</span>';
-        const toggleBtn = t.enabled ? `<button class="btn btn-sm btn-warn" onclick="disableTmpl(${t.id})">\u7981\u7528</button>` : `<button class="btn btn-sm" onclick="enableTmpl(${t.id})">\u542F\u7528</button>`;
-        rows += `<tr>
-          <td class="mu">#${t.id}</td>
-          <td><div style="font-weight:500">${esc(t.name)}</div><div class="mu sm el">${esc(t.prompt.substring(0, 100))}</div>
-            <div class="sm" style="margin-top:2px"><span class="tag">${esc(t.agent)}</span>${t.model && t.model !== "default" ? ` <span class="tag">${esc(t.model)}</span>` : ""}</div></td>
-          <td><span class="${typeClass}">${typeLabel}</span></td>
-          <td class="m sm">${esc(rule)}</td>
-          <td>${statusBadge}</td>
-          <td class="sm">${t.lastRunAt ? timeAgo(t.lastRunAt) : "-"}</td>
-          <td class="sm">${t.nextRunAt ? timeUntil(t.nextRunAt) : "-"}</td>
-          <td>
-            <button class="btn btn-sm" onclick="showTemplateDetail(${t.id})">\u8BE6\u60C5</button>
-            <button class="btn btn-sm btn-primary" onclick="triggerTmpl(${t.id})">\u89E6\u53D1</button>
-            ${toggleBtn}
-            <button class="btn btn-sm btn-danger" onclick="deleteTmpl(${t.id})">\u5220\u9664</button>
-          </td></tr>`;
-      }
-      const emptyRow = templates.length === 0 ? `<tr><td colspan="8" class="ta-center mu p30">\u6682\u65E0\u5B9A\u65F6\u4EFB\u52A1\u6A21\u677F\u3002\u4F7F\u7528 CLI \u521B\u5EFA\uFF1A<code>supertask template add</code></td></tr>` : "";
+      const rows = templates.map((template) => {
+        const scheduleType = ["cron", "recurring", "delayed"].includes(template.scheduleType) ? template.scheduleType : "unknown";
+        const typeLabel = scheduleType === "cron" ? t(locale, "schedule.cron") : scheduleType === "recurring" ? t(locale, "schedule.recurring") : scheduleType === "delayed" ? t(locale, "schedule.delayed") : t(locale, "schedule.unknown");
+        let rule = "\u2014";
+        if (template.scheduleType === "cron") rule = template.cronExpr || "\u2014";
+        if (template.scheduleType === "recurring" && template.intervalMs) rule = formatInterval(template.intervalMs, locale);
+        if (template.scheduleType === "delayed") rule = formatDateTime(template.runAt, locale);
+        const toggle = template.enabled ? `<button type="button" class="btn btn-warning" onclick="disableTmpl(${template.id})">${t(locale, "action.disable")}</button>` : `<button type="button" class="btn" onclick="enableTmpl(${template.id})">${t(locale, "action.enable")}</button>`;
+        return `<tr>
+          <td class="faint" data-label="${t(locale, "table.id")}">#${template.id}</td>
+          <td data-primary data-label="${t(locale, "table.name")}"><div class="task-name">${esc(template.name)}</div><div class="task-prompt" title="${esc(template.prompt)}">${esc(template.prompt.substring(0, 140))}</div>
+            <div class="actions" style="margin-top:5px"><span class="tag">${esc(template.agent)}</span>${template.model && template.model !== "default" ? `<span class="tag">${esc(template.model)}</span>` : ""}</div></td>
+          <td data-label="${t(locale, "table.type")}"><span class="tag t-${scheduleType}">${typeLabel}</span></td>
+          <td data-label="${t(locale, "table.rule")}" class="m small">${esc(rule)}</td>
+          <td data-label="${t(locale, "table.status")}"><span class="badge ${template.enabled ? "b-done" : "b-cancelled"}">${t(locale, template.enabled ? "schedule.enabled" : "schedule.disabled")}</span></td>
+          <td data-label="${t(locale, "table.lastRun")}" class="small muted">${formatRelative(template.lastRunAt, locale)}</td>
+          <td data-label="${t(locale, "table.nextRun")}" class="small">${formatFuture(template.nextRunAt, locale)}</td>
+          <td data-label="${t(locale, "table.actions")}"><div class="actions"><button type="button" class="btn" onclick="showTemplateDetail(${template.id})">${t(locale, "action.details")}</button>
+            <button type="button" class="btn btn-primary" onclick="triggerTmpl(${template.id})">${t(locale, "action.trigger")}</button>${toggle}
+            <button type="button" class="btn btn-danger" onclick="deleteTmpl(${template.id})">${t(locale, "action.delete")}</button></div></td>
+        </tr>`;
+      }).join("");
       const body = `
-      <div class="g3">
-        <div class="card"><div class="sv" style="color:var(--purple)">${templates.length}</div><div class="sl">\u6A21\u677F\u603B\u6570</div></div>
-        <div class="card"><div class="sv" style="color:var(--green)">${enabled}</div><div class="sl">\u5DF2\u542F\u7528</div></div>
-        <div class="card"><div class="sv" style="color:var(--t2)">${disabled}</div><div class="sl">\u5DF2\u7981\u7528</div></div>
+      <div class="stats-grid three">
+        ${statCard(templates.length, t(locale, "stats.templates"), "tone-purple", icon("templates"))}
+        ${statCard(enabled, t(locale, "stats.enabled"), "tone-green", icon("check"), "reveal-delay-1")}
+        ${statCard(disabled, t(locale, "stats.disabled"), "tone-neutral", icon("clock"), "reveal-delay-2")}
       </div>
-      <div class="panel">
-        <div class="ph"><h3>\u8C03\u5EA6\u6A21\u677F</h3></div>
-        <table>
-          <thead><tr><th width="50">ID</th><th>\u540D\u79F0</th><th>\u7C7B\u578B</th><th>\u89C4\u5219</th><th width="90">\u72B6\u6001</th><th>\u4E0A\u6B21\u6267\u884C</th><th>\u4E0B\u6B21\u6267\u884C</th><th>\u64CD\u4F5C</th></tr></thead>
-          <tbody>${rows}${emptyRow}</tbody>
-        </table>
-      </div>`;
-      return c.html(renderLayout("\u5B9A\u65F6\u4EFB\u52A1", "templates", body));
+      <section class="panel reveal reveal-delay-2">
+        <div class="panel-head"><h2>${t(locale, "page.templates.title")}</h2></div>
+        ${templates.length === 0 ? emptyState(t(locale, "empty.templates"), t(locale, "empty.templatesHint"), "supertask template add") : `<div class="table-wrap"><table class="responsive-table"><thead><tr><th>ID</th><th>${t(locale, "table.name")}</th><th>${t(locale, "table.type")}</th><th>${t(locale, "table.rule")}</th><th>${t(locale, "table.status")}</th><th>${t(locale, "table.lastRun")}</th><th>${t(locale, "table.nextRun")}</th><th>${t(locale, "table.actions")}</th></tr></thead><tbody>${rows}</tbody></table></div>`}
+      </section>`;
+      return c.html(renderLayout({ locale, activeTab: "templates", body }));
     });
     app.get("/runs", async (c) => {
+      const locale = resolveLocale(c);
       const page = parsePositiveInteger(c.req.query("page") || "1");
       if (page === null) return c.text("invalid page", 400);
       const limit = 50;
       const offset = (page - 1) * limit;
-      const { taskRuns: tr, tasks: tk } = schema_exports;
+      const { taskRuns: taskRuns4, tasks: tasks4 } = schema_exports;
       const runs = await db.select({
-        id: tr.id,
-        taskId: tr.taskId,
-        sessionId: tr.sessionId,
-        model: tr.model,
-        status: tr.status,
-        startedAt: tr.startedAt,
-        finishedAt: tr.finishedAt,
-        log: tr.log,
-        heartbeatAt: tr.heartbeatAt,
-        workerPid: tr.workerPid,
-        childPid: tr.childPid,
-        taskName: tk.name,
-        taskAgent: tk.agent
-      }).from(tr).innerJoin(tk, eq(tr.taskId, tk.id)).orderBy(desc(tr.startedAt), desc(tr.id)).limit(limit).offset(offset);
-      const totalResult = await db.select({ count: sql`count(*)` }).from(tr);
+        id: taskRuns4.id,
+        taskId: taskRuns4.taskId,
+        sessionId: taskRuns4.sessionId,
+        model: taskRuns4.model,
+        status: taskRuns4.status,
+        startedAt: taskRuns4.startedAt,
+        finishedAt: taskRuns4.finishedAt,
+        log: taskRuns4.log,
+        heartbeatAt: taskRuns4.heartbeatAt,
+        workerPid: taskRuns4.workerPid,
+        childPid: taskRuns4.childPid,
+        taskName: tasks4.name,
+        taskAgent: tasks4.agent
+      }).from(taskRuns4).innerJoin(tasks4, eq(taskRuns4.taskId, tasks4.id)).orderBy(desc(taskRuns4.startedAt), desc(taskRuns4.id)).limit(limit).offset(offset);
+      const totalResult = await db.select({ count: sql`count(*)` }).from(taskRuns4);
       const total = Number(totalResult[0]?.count ?? 0);
-      const totalPages = Math.ceil(total / limit);
-      let rows = "";
-      const logsHtml = [];
-      for (const run of runs) {
+      const totalPages = Math.max(1, Math.ceil(total / limit));
+      const logs = [];
+      const rows = runs.map((run) => {
         const status = safeStatus(run.status);
-        const shortSession = run.sessionId ? run.sessionId.slice(4, 7) + "***" + run.sessionId.slice(-3) : "-";
-        const logBtn = run.log ? `<button class="btn btn-sm" onclick="toggleLog(${run.id})">\u65E5\u5FD7</button>` : "";
-        rows += `<tr>
-          <td class="mu">#${run.id}</td>
-          <td><div style="font-weight:500">${esc(run.taskName)} <span class="mu">(#${run.taskId})</span></div>
-            ${run.model ? `<div class="sm"><span class="tag">${esc(run.model)}</span></div>` : ""}</td>
-          <td><span class="tag">${esc(run.taskAgent)}</span></td>
-          <td><span class="badge b-${status}">${status.toUpperCase()}</span></td>
-          <td class="sm">${formatDuration(run.startedAt, run.finishedAt)}</td>
-          <td class="sm mu">${run.heartbeatAt ? timeAgo(run.heartbeatAt) : "-"}</td>
-          <td><button class="btn btn-sm" onclick="showRunDetail(${run.id})">\u8BE6\u60C5</button>${logBtn}</td>
-        </tr>`;
         if (run.log) {
-          logsHtml.push(`<div id="log-${run.id}" style="display:none" class="mt8">
-              <div class="panel"><div class="ph"><h3>Run #${run.id} \u65E5\u5FD7 \u2014 ${esc(run.taskName)}</h3></div>
-              <div class="log-box">${esc(run.log)}</div></div></div>`);
-        }
-      }
-      let paging = `<div class="pn">`;
-      if (page > 1) paging += `<a href="/runs?page=${page - 1}" class="btn">\u4E0A\u4E00\u9875</a>`;
-      paging += `<span class="mu sm">\u7B2C ${page} \u9875 / \u5171 ${totalPages} \u9875 (${total} \u6761)</span>`;
-      if (page < totalPages) paging += `<a href="/runs?page=${page + 1}" class="btn">\u4E0B\u4E00\u9875</a>`;
-      paging += `</div>`;
-      const emptyRow = runs.length === 0 ? `<tr><td colspan="7" class="ta-center mu p30">\u6682\u65E0\u6267\u884C\u8BB0\u5F55</td></tr>` : "";
+          logs.push(`<section id="log-${run.id}" class="panel log-panel" hidden><div class="panel-head"><h3>Run #${run.id} \xB7 ${esc(run.taskName)}</h3></div><div class="log-box">${esc(run.log)}</div></section>`);
+        }
+        return `<tr>
+          <td class="faint" data-label="${t(locale, "table.run")}">#${run.id}</td>
+          <td data-primary data-label="${t(locale, "table.task")}"><div class="task-name">${esc(run.taskName)} <span class="faint">#${run.taskId}</span></div>${run.model ? `<div style="margin-top:4px"><span class="tag">${esc(run.model)}</span></div>` : ""}</td>
+          <td data-label="${t(locale, "table.agent")}"><span class="tag">${esc(run.taskAgent)}</span></td>
+          <td data-label="${t(locale, "table.status")}"><span class="badge b-${status}">${statusText(locale, status)}</span></td>
+          <td data-label="${t(locale, "table.duration")}" class="small">${formatDuration(run.startedAt, run.finishedAt)}</td>
+          <td data-label="${t(locale, "table.heartbeat")}" class="small muted">${formatRelative(run.heartbeatAt, locale)}</td>
+          <td data-label="${t(locale, "table.actions")}"><div class="actions"><button type="button" class="btn" onclick="showRunDetail(${run.id})">${t(locale, "action.details")}</button>
+            ${run.log ? `<button type="button" class="btn" aria-expanded="false" onclick="toggleLog(${run.id},this)">${t(locale, "action.logs")}</button>` : ""}</div></td>
+        </tr>`;
+      }).join("");
       const body = `
-      <div class="g4">
-        <div class="card"><div class="sv">${total}</div><div class="sl">\u603B\u8BB0\u5F55</div></div>
-        <div class="card"><div class="sv" style="color:var(--green)">${runs.filter((r) => r.status === "done").length}</div><div class="sl">\u672C\u9875\u6210\u529F</div></div>
-        <div class="card"><div class="sv" style="color:var(--red)">${runs.filter((r) => r.status === "failed").length}</div><div class="sl">\u672C\u9875\u5931\u8D25</div></div>
-        <div class="card"><div class="sv" style="color:var(--blue)">${runs.filter((r) => r.status === "running").length}</div><div class="sl">\u672C\u9875\u8FD0\u884C\u4E2D</div></div>
+      <div class="stats-grid">
+        ${statCard(total, t(locale, "stats.records"), "tone-purple", icon("runs"))}
+        ${statCard(runs.filter((run) => run.status === "done").length, t(locale, "stats.pageDone"), "tone-green", icon("check"), "reveal-delay-1")}
+        ${statCard(runs.filter((run) => run.status === "failed").length, t(locale, "stats.pageFailed"), "tone-red", icon("alert"), "reveal-delay-1")}
+        ${statCard(runs.filter((run) => run.status === "running").length, t(locale, "stats.pageRunning"), "tone-blue", icon("activity"), "reveal-delay-2")}
       </div>
-      <div class="panel"><table>
-        <thead><tr><th width="50">Run</th><th>\u4EFB\u52A1</th><th>Agent</th><th width="90">\u72B6\u6001</th><th width="70">\u8017\u65F6</th><th>\u5FC3\u8DF3</th><th>\u64CD\u4F5C</th></tr></thead>
-        <tbody>${rows}${emptyRow}</tbody>
-      </table></div>
-      ${logsHtml.join("")}
-      ${paging}`;
-      return c.html(renderLayout("\u6267\u884C\u65E5\u5FD7", "runs", body));
+      <section class="panel reveal reveal-delay-2">${runs.length === 0 ? emptyState(t(locale, "empty.runs"), "") : `<div class="table-wrap"><table class="responsive-table"><thead><tr><th>${t(locale, "table.run")}</th><th>${t(locale, "table.task")}</th><th>${t(locale, "table.agent")}</th><th>${t(locale, "table.status")}</th><th>${t(locale, "table.duration")}</th><th>${t(locale, "table.heartbeat")}</th><th>${t(locale, "table.actions")}</th></tr></thead><tbody>${rows}</tbody></table></div>`}</section>
+      ${logs.join("")}${pagination(locale, "/runs", page, totalPages, total)}`;
+      return c.html(renderLayout({ locale, activeTab: "runs", body }));
     });
     app.get("/system", async (c) => {
+      const locale = resolveLocale(c);
       const config = loadConfig();
       const configPath = getConfigPath();
-      const stats = await TaskService.stats({});
-      const runningRuns = await TaskRunService.getAllRunningRuns();
-      const templates = await TaskTemplateService.list(100);
+      const [stats, runningRuns, templates] = await Promise.all([
+        TaskService.stats({}),
+        TaskRunService.getAllRunningRuns(),
+        TaskTemplateService.list(100)
+      ]);
       const configExists = existsSync6(configPath);
-      let runRows = "";
-      if (runningRuns.length > 0) {
-        for (const run of runningRuns) {
-          const shortS = run.sessionId ? run.sessionId.slice(4, 7) + "***" + run.sessionId.slice(-3) : "-";
-          runRows += `<tr>
-              <td class="mu">#${run.id}</td><td>#${run.taskId}</td>
-              <td class="m sm">${esc(shortS)}</td>
-              <td class="sm">${esc(run.model) || "-"}</td>
-              <td class="sm">${formatDate(run.startedAt)}</td>
-              <td class="sm">${run.heartbeatAt ? timeAgo(run.heartbeatAt) : "-"}</td>
-              <td class="m sm">W:${run.workerPid ?? "-"} C:${run.childPid ?? "-"}</td>
-              <td class="sm">${formatDuration(run.startedAt, null)}</td>
-            </tr>`;
-        }
-      }
-      const schedulerStatus = config.scheduler.enabled ? '<span class="badge b-done">\u5DF2\u542F\u7528</span>' : '<span class="badge b-cancelled">\u5DF2\u7981\u7528</span>';
-      const configFileStatus = configExists ? '<span class="badge b-done">\u662F</span>' : '<span class="badge b-cancelled">\u5426 (\u4F7F\u7528\u9ED8\u8BA4\u503C)</span>';
+      const runRows = runningRuns.map((run) => {
+        const session = run.sessionId ? `${run.sessionId.slice(4, 7)}***${run.sessionId.slice(-3)}` : "\u2014";
+        return `<tr><td class="faint" data-label="${t(locale, "table.run")}">#${run.id}</td><td data-primary data-label="${t(locale, "table.task")}">#${run.taskId}</td><td data-label="${t(locale, "table.session")}" class="m small">${esc(session)}</td>
+          <td data-label="${t(locale, "table.model")}" class="small">${esc(run.model) || "\u2014"}</td><td data-label="${t(locale, "table.startedAt")}" class="small">${formatDateTime(run.startedAt, locale)}</td>
+          <td data-label="${t(locale, "table.heartbeat")}" class="small muted">${formatRelative(run.heartbeatAt, locale)}</td><td data-label="${t(locale, "table.pid")}" class="m small">W:${run.workerPid ?? "\u2014"} C:${run.childPid ?? "\u2014"}</td>
+          <td data-label="${t(locale, "table.duration")}" class="small">${formatDuration(run.startedAt, null)}</td></tr>`;
+      }).join("");
+      const unitInput = (name, value, min, unit, max) => `<div class="input-unit"><input id="${name}" type="number" name="${name}" value="${value}" min="${min}" ${max ? `max="${max}"` : ""}><span>${unit}</span></div>`;
       const body = `
-      <form id="config-form" onsubmit="event.preventDefault();saveConfig();">
-      <div class="g3">
-        <div class="card">
-          <h3 style="margin:0 0 12px;font-size:14px">Worker \u914D\u7F6E</h3>
-          <div class="form-row"><label>\u6700\u5927\u5E76\u53D1</label><input type="number" name="mc" value="${config.worker.maxConcurrency}" min="1" max="20" style="width:80px"></div>
-          <div class="form-row"><label>\u8F6E\u8BE2\u95F4\u9694(ms)</label><input type="number" name="pi" value="${config.worker.pollIntervalMs}" min="100" style="width:100px"></div>
-          <div class="form-row"><label>\u5FC3\u8DF3\u95F4\u9694(\u79D2)</label><input type="number" name="hi" value="${config.worker.heartbeatIntervalMs / 1e3}" min="5" style="width:100px"></div>
-          <div class="form-row"><label>\u4EFB\u52A1\u8D85\u65F6(\u5206\u949F)</label><input type="number" name="to" value="${config.worker.taskTimeoutMs / 6e4}" min="1" style="width:100px"></div>
-        </div>
-        <div class="card">
-          <h3 style="margin:0 0 12px;font-size:14px">Scheduler \u914D\u7F6E</h3>
-          <div class="form-row"><label>\u542F\u7528\u8C03\u5EA6</label><input type="checkbox" name="se" ${config.scheduler.enabled ? "checked" : ""}></div>
-          <div class="form-row"><label>\u68C0\u67E5\u95F4\u9694(ms)</label><input type="number" name="si" value="${config.scheduler.checkIntervalMs}" min="100" style="width:100px"></div>
-          <div class="ir"><span class="ik">\u6D3B\u8DC3\u6A21\u677F</span><span class="iv">${templates.filter((t) => t.enabled).length} / ${templates.length}</span></div>
+      <form id="config-form" onsubmit="event.preventDefault();saveConfig()">
+        <div class="settings-grid reveal">
+          <section class="card settings-card"><h2 class="settings-title"><span>${icon("activity")}${t(locale, "system.worker")}</span></h2>
+            <div class="field"><label for="mc">${t(locale, "system.maxConcurrency")}</label>${unitInput("mc", config.worker.maxConcurrency, 1, "\xD7", 20)}</div>
+            <div class="field"><label for="pi">${t(locale, "system.pollInterval")}</label>${unitInput("pi", config.worker.pollIntervalMs, 100, t(locale, "system.milliseconds"))}</div>
+            <div class="field"><label for="hi">${t(locale, "system.heartbeatInterval")}</label>${unitInput("hi", config.worker.heartbeatIntervalMs / 1e3, 5, t(locale, "system.seconds"))}</div>
+            <div class="field"><label for="to">${t(locale, "system.taskTimeout")}</label>${unitInput("to", config.worker.taskTimeoutMs / 6e4, 1, t(locale, "system.minutes"))}</div>
+          </section>
+          <section class="card settings-card reveal-delay-1"><h2 class="settings-title"><span>${icon("templates")}${t(locale, "system.scheduler")}</span><span class="badge ${config.scheduler.enabled ? "b-done" : "b-cancelled"}">${t(locale, config.scheduler.enabled ? "schedule.enabled" : "schedule.disabled")}</span></h2>
+            <div class="switch-field"><label for="se">${t(locale, "system.schedulerEnabled")}</label><label class="switch"><input id="se" type="checkbox" name="se" ${config.scheduler.enabled ? "checked" : ""}><span></span></label></div>
+            <div class="field"><label for="si">${t(locale, "system.checkInterval")}</label>${unitInput("si", config.scheduler.checkIntervalMs, 100, t(locale, "system.milliseconds"))}</div>
+            <div class="info-row"><span class="info-key">${t(locale, "system.activeTemplates")}</span><span class="info-value">${templates.filter((template) => template.enabled).length} / ${templates.length}</span></div>
+          </section>
+          <section class="card settings-card reveal-delay-2"><h2 class="settings-title"><span>${icon("system")}${t(locale, "system.watchdog")}</span></h2>
+            <div class="field"><label for="wt">${t(locale, "system.heartbeatTimeout")}</label>${unitInput("wt", config.watchdog.heartbeatTimeoutMs / 1e3, 10, t(locale, "system.seconds"))}</div>
+            <div class="field"><label for="wci">${t(locale, "system.checkInterval")}</label>${unitInput("wci", config.watchdog.checkIntervalMs / 1e3, 1, t(locale, "system.seconds"))}</div>
+            <div class="field"><label for="wcl">${t(locale, "system.cleanupInterval")}</label>${unitInput("wcl", config.watchdog.cleanupIntervalMs / 36e5, 1, t(locale, "system.hours"))}</div>
+            <div class="field"><label for="rd">${t(locale, "system.retentionDays")}</label>${unitInput("rd", config.watchdog.retentionDays, 1, t(locale, "system.days"))}</div>
+          </section>
         </div>
-        <div class="card">
-          <h3 style="margin:0 0 12px;font-size:14px">Watchdog \u914D\u7F6E</h3>
-          <div class="form-row"><label>\u5FC3\u8DF3\u8D85\u65F6(\u79D2)</label><input type="number" name="wt" value="${config.watchdog.heartbeatTimeoutMs / 1e3}" min="10" style="width:100px"></div>
-          <div class="form-row"><label>\u68C0\u67E5\u95F4\u9694(\u79D2)</label><input type="number" name="wci" value="${config.watchdog.checkIntervalMs / 1e3}" min="1" style="width:100px"></div>
-          <div class="form-row"><label>\u6E05\u7406\u95F4\u9694(\u5C0F\u65F6)</label><input type="number" name="wcl" value="${config.watchdog.cleanupIntervalMs / 36e5}" min="1" style="width:100px"></div>
-          <div class="form-row"><label>\u6570\u636E\u4FDD\u7559(\u5929)</label><input type="number" name="rd" value="${config.watchdog.retentionDays}" min="1" style="width:100px"></div>
-        </div>
-      </div>
-      <div style="text-align:center;margin-bottom:24px">
-        <button type="submit" class="rf" style="font-size:14px;padding:10px 30px">\u4FDD\u5B58\u914D\u7F6E</button>
-        <span class="mu sm" style="margin-left:12px">\u4FDD\u5B58\u540E\u9700\u91CD\u542F Gateway \u751F\u6548</span>
-      </div>
+        <div class="save-row"><span class="muted small">${t(locale, "system.saveHint")}</span><button type="submit" class="btn btn-primary">${t(locale, "action.save")}</button></div>
       </form>
-
-      <div class="panel mt8">
-        <div class="ph"><h3>\u5F53\u524D\u8FD0\u884C\u4E2D\u7684\u4EFB\u52A1 (${runningRuns.length} / ${config.worker.maxConcurrency} \u5E76\u53D1)</h3></div>
-        ${runningRuns.length > 0 ? `<table>
-          <thead><tr><th>Run</th><th>\u4EFB\u52A1</th><th>Session</th><th>\u6A21\u578B</th><th>\u542F\u52A8\u65F6\u95F4</th><th>\u6700\u540E\u5FC3\u8DF3</th><th>PID</th><th>\u8017\u65F6</th></tr></thead>
-          <tbody>${runRows}</tbody>
-        </table>` : `<div class="ta-center mu p30">\u5F53\u524D\u65E0\u8FD0\u884C\u4E2D\u7684\u4EFB\u52A1</div>`}
-      </div>
-
-      <div class="card mt16">
-        <h3 style="margin:0 0 12px;font-size:14px">\u4EFB\u52A1\u7EDF\u8BA1</h3>
-        <div class="g4 mb0">
-          <div><span class="mu sm">Pending:</span> <strong>${stats.pending || 0}</strong></div>
-          <div><span class="mu sm">Running:</span> <strong style="color:var(--blue)">${stats.running || 0}</strong></div>
-          <div><span class="mu sm">Done:</span> <strong style="color:var(--green)">${stats.done || 0}</strong></div>
-          <div><span class="mu sm">Failed/Dead:</span> <strong style="color:var(--red)">${(stats.failed || 0) + (stats.dead_letter || 0)}</strong></div>
-        </div>
-      </div>
-
-      <div class="card mt16">
-        <h3 style="margin:0 0 12px;font-size:14px">\u914D\u7F6E\u6587\u4EF6</h3>
-        <div class="ir"><span class="ik">\u8DEF\u5F84</span><span class="iv m sm">${esc(configPath)}</span></div>
-        <div class="ir"><span class="ik">\u6587\u4EF6\u5B58\u5728</span><span class="iv">${configFileStatus}</span></div>
-      </div>
-
-      <div class="card mt16" style="border-color:var(--red)">
-        <h3 style="margin:0 0 12px;font-size:14px;color:var(--red)">\u5371\u9669\u64CD\u4F5C</h3>
-        <p class="sm mu" style="margin:0 0 12px">\u81EA\u52A8\u5907\u4EFD\u540E\u4E8B\u52A1\u6027\u6E05\u7A7A tasks\u3001task_runs \u548C task_templates\uFF1B\u5B58\u5728\u8FD0\u884C\u4E2D\u4EFB\u52A1\u65F6\u4F1A\u62D2\u7EDD\u6267\u884C\u3002</p>
-        <button class="btn btn-danger" style="border-color:var(--red);color:var(--red);padding:6px 16px" onclick="clearDatabase()">\u6E05\u7A7A\u6570\u636E\u5E93</button>
-      </div>`;
-      return c.html(renderLayout("\u7CFB\u7EDF\u72B6\u6001", "system", body));
+      <section class="panel reveal">
+        <div class="panel-head"><h2>${t(locale, "system.runningTasks", { running: runningRuns.length, limit: config.worker.maxConcurrency })}</h2></div>
+        ${runningRuns.length === 0 ? emptyState(t(locale, "empty.running"), "") : `<div class="table-wrap"><table class="responsive-table"><thead><tr><th>${t(locale, "table.run")}</th><th>${t(locale, "table.task")}</th><th>${t(locale, "table.session")}</th><th>${t(locale, "table.model")}</th><th>${t(locale, "table.startedAt")}</th><th>${t(locale, "table.heartbeat")}</th><th>${t(locale, "table.pid")}</th><th>${t(locale, "table.duration")}</th></tr></thead><tbody>${runRows}</tbody></table></div>`}
+      </section>
+      <section class="panel reveal reveal-delay-1"><div class="panel-head"><h2>${t(locale, "system.taskStats")}</h2></div><div class="overview-grid">
+        <div class="overview-item"><span>${statusText(locale, "pending")}</span><strong>${stats.pending || 0}</strong></div>
+        <div class="overview-item"><span>${statusText(locale, "running")}</span><strong style="color:var(--blue)">${stats.running || 0}</strong></div>
+        <div class="overview-item"><span>${statusText(locale, "done")}</span><strong style="color:var(--green)">${stats.done || 0}</strong></div>
+        <div class="overview-item"><span>${t(locale, "stats.failedDead")}</span><strong style="color:var(--red)">${(stats.failed || 0) + (stats.dead_letter || 0)}</strong></div>
+      </div></section>
+      <section class="panel reveal reveal-delay-1"><div class="panel-head"><h2>${t(locale, "system.configFile")}</h2></div><div class="info-list">
+        <div class="info-row"><span class="info-key">${t(locale, "system.path")}</span><span class="info-value m small">${esc(configPath)}</span></div>
+        <div class="info-row"><span class="info-key">${t(locale, "system.fileExists")}</span><span class="badge ${configExists ? "b-done" : "b-cancelled"}">${t(locale, configExists ? "system.yes" : "system.noDefault")}</span></div>
+      </div></section>
+      <section class="card danger-card reveal reveal-delay-2"><h2>${icon("alert")}${t(locale, "system.danger")}</h2><p>${t(locale, "system.dangerDescription")}</p>
+        <button type="button" class="btn btn-danger" onclick="clearDatabase()">${icon("database")}${t(locale, "action.clearDatabase")}</button></section>`;
+      return c.html(renderLayout({ locale, activeTab: "system", body }));
     });
     app.get("/api/tasks/:id", async (c) => {
       const id = parsePositiveInteger(c.req.param("id"));
@@ -20494,9 +21022,9 @@ var init_web = __esm({
     app.get("/api/templates/:id", async (c) => {
       const id = parsePositiveInteger(c.req.param("id"));
       if (id === null) return c.json({ error: "invalid id" }, 400);
-      const tmpl = await TaskTemplateService.getById(id);
-      if (!tmpl) return c.json({ error: "not found" }, 404);
-      return c.json(tmpl);
+      const template = await TaskTemplateService.getById(id);
+      if (!template) return c.json({ error: "not found" }, 404);
+      return c.json(template);
     });
     app.post("/api/tasks/:id/retry", async (c) => {
       const id = parsePositiveInteger(c.req.param("id"));
@@ -20540,14 +21068,14 @@ var init_web = __esm({
     app.delete("/api/templates/:id", async (c) => {
       const id = parsePositiveInteger(c.req.param("id"));
       if (id === null) return c.json({ error: "invalid id" }, 400);
-      const ok = await TaskTemplateService.delete(id);
-      return ok ? c.json({ success: true }) : c.json({ error: "not found" }, 404);
+      const deleted = await TaskTemplateService.delete(id);
+      return deleted ? c.json({ success: true }) : c.json({ error: "not found" }, 404);
     });
     app.post("/api/templates/:id/trigger", async (c) => {
       const id = parsePositiveInteger(c.req.param("id"));
       if (id === null) return c.json({ error: "invalid id" }, 400);
-      const tmpl = await TaskTemplateService.getById(id);
-      if (!tmpl) return c.json({ error: "not found" }, 404);
+      const template = await TaskTemplateService.getById(id);
+      if (!template) return c.json({ error: "not found" }, 404);
       const task = await triggerTaskFromTemplate(id);
       if (!task) return c.json({ error: "maxInstances reached" }, 409);
       return c.json({ success: true, taskId: task.id });
@@ -20556,24 +21084,27 @@ var init_web = __esm({
       try {
         const body = await c.req.json();
         const current = readCurrentConfig();
-        const curW = current.worker ?? {};
-        const curS = current.scheduler ?? {};
-        const curD = current.watchdog ?? {};
-        const bW = body.worker ?? {};
-        const bS = body.scheduler ?? {};
-        const bD = body.watchdog ?? {};
+        const currentWorker = current.worker ?? {};
+        const currentScheduler = current.scheduler ?? {};
+        const currentWatchdog = current.watchdog ?? {};
+        const bodyWorker = body.worker ?? {};
+        const bodyScheduler = body.scheduler ?? {};
+        const bodyWatchdog = body.watchdog ?? {};
         const merged = {
           ...current,
           ...body,
           configVersion: 2,
-          worker: { ...curW, ...bW },
-          scheduler: { ...curS, ...bS },
-          watchdog: { ...curD, ...bD }
+          worker: { ...currentWorker, ...bodyWorker },
+          scheduler: { ...currentScheduler, ...bodyScheduler },
+          watchdog: { ...currentWatchdog, ...bodyWatchdog }
         };
         writeConfig(validateConfig(merged));
         return c.json({ success: true });
-      } catch (err) {
-        return c.json({ success: false, error: err instanceof Error ? err.message : String(err) }, 400);
+      } catch (error) {
+        return c.json({
+          success: false,
+          error: error instanceof Error ? error.message : String(error)
+        }, 400);
       }
     });
     app.post("/api/database/clear", async (c) => {
@@ -20584,9 +21115,12 @@ var init_web = __esm({
       try {
         const result = DatabaseMaintenanceService.clear({ allowCurrentGateway: true });
         return c.json({ success: true, ...result });
-      } catch (err) {
-        const status = err instanceof DatabaseMaintenanceConflictError ? 409 : 500;
-        return c.json({ success: false, error: err instanceof Error ? err.message : String(err) }, status);
+      } catch (error) {
+        const status = error instanceof DatabaseMaintenanceConflictError ? 409 : 500;
+        return c.json({
+          success: false,
+          error: error instanceof Error ? error.message : String(error)
+        }, status);
       }
     });
     dashboardApp = app;