@aaayeaaa-p1ws/dsh-plugin-auto-update 0.0.0-stage → 1.1.0

package/client.js

@@ -0,0 +1,713 @@
+'use strict';
+// Client half of @local/dsh-auto-update:
+//   1) shell.overlay 弹窗 —— 每天第一次打开 DSH 时报告这次更新装了什么/哪里失败，
+//      失败原因是「插件正在使用中」时给一键「关闭 → 更新 → 重启 DSH」。
+//   2) settings.section 设置页 —— 检查时机（打开时 / 每天定时 / 每 N 小时）、
+//      自动检查与自动安装开关、更新日志、立即检查。
+// 所有数据都来自 Host 的 /dsh-auto-update/*（见 index.js 的路由表）。
+window.__ModuleLoader__.load({
+  id: '@local/dsh-auto-update',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+    const { useState, useEffect, useRef, useCallback } = React;
+
+    const API = '/dsh-auto-update';
+
+    async function api(path, init) {
+      const res = await fetch(API + path, {
+        credentials: 'same-origin',
+        cache: 'no-store',
+        headers: init && init.body ? { 'content-type': 'application/json' } : undefined,
+        ...init,
+      });
+      let body = null;
+      try {
+        body = await res.json();
+      } catch {
+        body = null;
+      }
+      if (!res.ok) {
+        const message = (body && body.error) || `HTTP ${res.status}`;
+        throw new Error(message);
+      }
+      return body;
+    }
+
+    const fmtTime = (iso) => {
+      if (!iso) return '';
+      const d = new Date(iso);
+      if (Number.isNaN(d.getTime())) return String(iso);
+      const pad = (n) => String(n).padStart(2, '0');
+      return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    };
+
+    const S = {
+      backdrop: {
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0, 0, 0, 0.45)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1200,
+        padding: 24,
+      },
+      card: {
+        width: 'min(560px, 100%)',
+        maxHeight: '80vh',
+        overflow: 'auto',
+        background: 'var(--dsw-alias-bg-layer-2, #1f2329)',
+        color: 'var(--dsw-alias-label-primary, #e6e8eb)',
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.12))',
+        borderRadius: 12,
+        padding: '18px 20px',
+        boxShadow: '0 18px 48px rgba(0, 0, 0, 0.35)',
+        fontSize: 13,
+        lineHeight: 1.6,
+      },
+      title: { fontSize: 15, fontWeight: 600, marginBottom: 4 },
+      sub: { fontSize: 12, color: 'var(--dsw-alias-label-secondary, #9aa4b6)', marginBottom: 12 },
+      row: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
+      ok: { color: 'var(--dsw-alias-state-success-primary, #3fb950)' },
+      bad: { color: 'var(--dsw-alias-state-error-primary, #f85149)' },
+      warn: { color: 'var(--dsw-alias-state-warn-primary, #d29922)' },
+      list: { margin: '6px 0 12px', padding: 0, listStyle: 'none' },
+      item: { padding: '4px 0', borderBottom: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.08))' },
+      // 按钮统一走「显式前景色 + 可见背景」，不要用 color: inherit / transparent：
+      // 设置页/弹窗里按钮继承到的前景色在深色主题下会和背景糊成一片。
+      btn: {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        border: '1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.28))',
+        background: 'var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.12))',
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        borderRadius: 8,
+        padding: '6px 14px',
+        fontSize: 13,
+        fontFamily: 'inherit',
+        lineHeight: 1.45,
+        fontWeight: 500,
+        textShadow: 'none',
+        cursor: 'pointer',
+        opacity: 1,
+      },
+      primary: {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        border: '1px solid var(--dsw-alias-brand-primary, #4c8dff)',
+        background: 'var(--dsw-alias-brand-primary, #4c8dff)',
+        color: 'var(--dsw-alias-bg-base, #0f1115)',
+        borderRadius: 8,
+        padding: '6px 14px',
+        fontSize: 13,
+        fontFamily: 'inherit',
+        lineHeight: 1.45,
+        fontWeight: 600,
+        textShadow: 'none',
+        cursor: 'pointer',
+        opacity: 1,
+      },
+      section: { marginBottom: 18 },
+      h3: { fontSize: 13, fontWeight: 600, margin: '0 0 6px' },
+      hint: { fontSize: 12, color: 'var(--dsw-alias-label-secondary, #9aa4b6)', marginBottom: 8 },
+      field: { display: 'flex', alignItems: 'center', gap: 10, margin: '6px 0', flexWrap: 'wrap' },
+      input: {
+        background: 'var(--dsw-alias-bg-layer-1, rgba(255,255,255,0.06))',
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.22))',
+        borderRadius: 6,
+        padding: '4px 8px',
+        fontSize: 13,
+        fontFamily: 'inherit',
+      },
+      log: {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        fontSize: 11.5,
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        background: 'var(--dsw-alias-bg-layer-1, rgba(255,255,255,0.06))',
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.1))',
+        borderRadius: 8,
+        padding: '8px 10px',
+        maxHeight: 260,
+        overflow: 'auto',
+        whiteSpace: 'pre-wrap',
+      },
+    };
+
+    const describeFailure = (item) => {
+      const reason = item.reason || item.message || item.code || '未知原因';
+      return item.inUse ? `插件正在使用中 —— ${reason}` : String(reason);
+    };
+
+    // ------------------------------------------------------------------ 弹窗
+    function UpdatePopup() {
+      const [data, setData] = useState(null);
+      const [error, setError] = useState(null);
+      const [busy, setBusy] = useState(false);
+      const [fix, setFix] = useState(null);
+      const [hidden, setHidden] = useState(false);
+      const pollRef = useRef(null);
+
+      const load = useCallback(async () => {
+        try {
+          const payload = await api('/status');
+          setData(payload);
+          if (payload && payload.fix) setFix(payload.fix);
+          setError(null);
+          return payload;
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+          return null;
+        }
+      }, []);
+
+      useEffect(() => {
+        void load();
+        // 开机那轮检查在宿主启动约 12 秒后才跑，所以这里轮询得勤一点，装完就能弹出来。
+        const timer = setInterval(() => {
+          if (document.visibilityState === 'visible') void load();
+        }, 20 * 1000);
+        return () => clearInterval(timer);
+      }, [load]);
+
+      useEffect(() => () => {
+        if (pollRef.current) clearInterval(pollRef.current);
+      }, []);
+
+      const ack = useCallback(async () => {
+        setHidden(true);
+        try {
+          await api('/popup/ack', { method: 'POST', body: '{}' });
+        } catch {
+          /* 记录失败不影响关闭 */
+        }
+      }, []);
+
+      const startFix = useCallback(async () => {
+        setBusy(true);
+        setError(null);
+        try {
+          await api('/fix', { method: 'POST', body: '{}' });
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+        }
+        // 修复过程在 Host 侧跑（关插件 → 更新 → 重启），这边只负责把步骤刷出来。
+        const started = Date.now();
+        if (pollRef.current) clearInterval(pollRef.current);
+        pollRef.current = setInterval(async () => {
+          const payload = await load();
+          const job = payload && payload.fix;
+          if ((job && job.done) || (job && job.error) || Date.now() - started > 5 * 60 * 1000) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
+            setBusy(false);
+          }
+        }, 1500);
+      }, [load]);
+
+      if (hidden) return null;
+      const popup = data && data.popup;
+      if (!popup || popup.show !== true) return null;
+
+      const result = popup.result || {};
+      const applied = Array.isArray(result.applied) ? result.applied : [];
+      const failed = Array.isArray(result.failed) ? result.failed : [];
+      const deferred = Array.isArray(result.deferred) ? result.deferred : [];
+      const blocked = failed.filter((item) => item && item.inUse === true);
+      const steps = (fix && Array.isArray(fix.steps) ? fix.steps : []).filter(Boolean);
+
+      return h('div', { style: S.backdrop, role: 'dialog', 'aria-modal': 'true' },
+        h('div', { style: S.card },
+          h('div', { style: { ...S.row, justifyContent: 'space-between' } },
+            h('div', { style: S.title }, '插件自动更新'),
+            h('button', { style: S.btn, onClick: () => void ack() }, '×'),
+          ),
+          h('div', { style: S.sub }, `${fmtTime(popup.at) || ''} 检查了 ${result.checked || 0} 个插件，${applied.length} 个已更新`),
+
+          applied.length
+            ? h('div', null,
+                h('div', { style: { ...S.h3, ...S.ok } }, `已更新 ${applied.length} 个`),
+                h('ul', { style: S.list }, applied.map((item, index) =>
+                  h('li', { key: `${item.name}-${index}`, style: S.item },
+                    h('span', null, item.name),
+                    h('span', { style: { color: 'var(--dsw-alias-label-secondary, #9aa4b6)' } },
+                      `  ${item.from || '旧版本'} → ${item.to || '新版本'}`),
+                  ),
+                )),
+              )
+            : null,
+
+          failed.length
+            ? h('div', null,
+                h('div', { style: { ...S.h3, ...S.bad } }, `更新失败 ${failed.length} 个`),
+                h('ul', { style: S.list }, failed.map((item, index) =>
+                  h('li', { key: `${item.name}-${index}`, style: S.item },
+                    h('span', null, item.name),
+                    h('span', { style: item.inUse ? S.warn : S.bad }, `  ${describeFailure(item)}`),
+                  ),
+                )),
+              )
+            : null,
+
+          deferred.length
+            ? h('div', { style: { ...S.hint, marginTop: 4 } },
+                `延后重试：${deferred.map((item) => item.name).filter(Boolean).join('、')}（市场正忙或 agent 在跑）`)
+            : null,
+
+          steps.length
+            ? h('div', { style: { marginTop: 10 } },
+                h('div', { style: S.h3 }, '正在处理'),
+                h('ul', { style: S.list }, steps.map((step, index) =>
+                  h('li', { key: index, style: S.item },
+                    step.name
+                      ? `${step.name}：${step.step === 'disable' ? (step.ok === false ? '关闭失败' : '已关闭') : step.step}`
+                      : step.step === 'update'
+                        ? `重新更新：装上 ${(step.applied || []).length} 个，失败 ${(step.failed || []).length} 个`
+                        : step.step === 'restart'
+                          ? step.ok === false
+                            ? `未重启：${step.reason || '没有需要重启的变化'}`
+                            : '已安排重启 DeepSeek Harness'
+                          : String(step.step || ''),
+                  ),
+                )),
+              )
+            : null,
+
+          error ? h('div', { style: { ...S.bad, marginTop: 8 } }, error) : null,
+          fix && fix.error ? h('div', { style: { ...S.bad, marginTop: 8 } }, fix.error) : null,
+
+          h('div', { style: { ...S.row, justifyContent: 'flex-end', marginTop: 14 } },
+            blocked.length && !busy
+              ? h('button', { style: S.primary, onClick: () => void startFix() },
+                  '关闭插件并更新，然后重启 DSH')
+              : null,
+            busy ? h('span', { style: S.hint }, '处理中…') : null,
+            h('button', { style: S.btn, onClick: () => void ack(), disabled: busy }, '稍后'),
+          ),
+        ),
+      );
+    }
+
+    // ------------------------------------------------------------------ 设置页
+    // 版式照 DSH 原生设置页：卡片 + 行（左边标签/说明，右边控件），行间一条细分隔线。
+    const T = {
+      card: {
+        background: 'var(--dsw-alias-bg-layer-1, rgba(255,255,255,0.04))',
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.1))',
+        borderRadius: 10,
+        padding: '0 16px',
+        margin: '0 0 14px',
+      },
+      cardTitle: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        margin: '14px 0 2px',
+        lineHeight: 1.5,
+      },
+      cardHint: {
+        fontSize: 12.5,
+        color: 'var(--dsw-alias-label-secondary, #9aa4b6)',
+        margin: '0 0 12px',
+        lineHeight: 1.6,
+      },
+      row: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        padding: '13px 0',
+        borderTop: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.08))',
+      },
+      label: {
+        fontSize: 13.5,
+        fontWeight: 500,
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        lineHeight: 1.5,
+      },
+      hint: {
+        fontSize: 12.5,
+        color: 'var(--dsw-alias-label-secondary, #9aa4b6)',
+        marginTop: 3,
+        lineHeight: 1.55,
+      },
+      control: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 },
+      select: {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        minWidth: 128,
+        padding: '7px 30px 7px 12px',
+        borderRadius: 8,
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.16))',
+        background:
+          'var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.08)) url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'10\' height=\'6\'><path d=\'M1 1l4 4 4-4\' fill=\'none\' stroke=\'%238b93a1\' stroke-width=\'1.5\'/></svg>") no-repeat right 11px center',
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        fontSize: 13,
+        fontFamily: 'inherit',
+        lineHeight: 1.45,
+        cursor: 'pointer',
+      },
+      input: {
+        width: 96,
+        padding: '7px 10px',
+        borderRadius: 8,
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.16))',
+        background: 'var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.08))',
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        fontSize: 13,
+        fontFamily: 'inherit',
+        lineHeight: 1.45,
+        textAlign: 'center',
+      },
+      unit: { fontSize: 13, color: 'var(--dsw-alias-label-secondary, #9aa4b6)' },
+      linkBtn: {
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        color: 'var(--dsw-alias-brand-primary, #4c8dff)',
+        fontSize: 13,
+        fontFamily: 'inherit',
+        cursor: 'pointer',
+      },
+      log: {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: 12,
+        lineHeight: 1.65,
+        color: 'var(--dsw-alias-label-primary, #e8eaed)',
+        background: 'var(--dsw-alias-bg-base, rgba(0,0,0,0.2))',
+        border: '1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.08))',
+        borderRadius: 8,
+        padding: '10px 12px',
+        margin: '0 0 14px',
+        maxHeight: 280,
+        overflow: 'auto',
+        whiteSpace: 'pre-wrap',
+      },
+    };
+
+    const Card = ({ title, hint, children }) =>
+      h(
+        'section',
+        { style: T.card },
+        title ? h('div', { style: T.cardTitle }, title) : null,
+        hint ? h('div', { style: T.cardHint }, hint) : null,
+        children,
+      );
+
+    const Row = ({ label, hint, control, first }) =>
+      h(
+        'div',
+        { style: first ? { ...T.row, borderTop: 'none' } : T.row },
+        h(
+          'div',
+          { style: { minWidth: 0, flex: '1 1 auto' } },
+          h('div', { style: T.label }, label),
+          hint ? h('div', { style: T.hint }, hint) : null,
+        ),
+        h('div', { style: T.control }, control),
+      );
+
+    // 原生风格开关：44×24 圆角胶囊 + 18px 圆点。
+    const Toggle = ({ checked, onChange }) =>
+      h(
+        'button',
+        {
+          type: 'button',
+          role: 'switch',
+          'aria-checked': checked ? 'true' : 'false',
+          onClick: () => onChange(!checked),
+          style: {
+            position: 'relative',
+            width: 44,
+            height: 24,
+            borderRadius: 999,
+            border: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            background: checked
+              ? 'var(--dsw-alias-brand-primary, #4c8dff)'
+              : 'var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.16))',
+            boxShadow: checked ? 'none' : 'inset 0 0 0 1px var(--dsw-alias-border-l1, rgba(255,255,255,0.22))',
+            transition: 'background 120ms ease',
+          },
+        },
+        h('span', {
+          style: {
+            position: 'absolute',
+            top: 3,
+            left: checked ? 23 : 3,
+            width: 18,
+            height: 18,
+            borderRadius: '50%',
+            background: checked
+              ? 'var(--dsw-alias-bg-base, #0f1115)'
+              : 'var(--dsw-alias-label-secondary, #c3ccdb)',
+            transition: 'left 120ms ease, background 120ms ease',
+          },
+        }),
+      );
+
+    function SettingsPage() {
+      const [data, setData] = useState(null);
+      const [form, setForm] = useState(null);
+      const [log, setLog] = useState([]);
+      const [busy, setBusy] = useState(false);
+      const [note, setNote] = useState(null);
+      const [error, setError] = useState(null);
+
+      const loadLog = useCallback(async () => {
+        try {
+          const payload = await api('/log?limit=40');
+          setLog(Array.isArray(payload && payload.entries) ? payload.entries : []);
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+        }
+      }, []);
+
+      const load = useCallback(async () => {
+        try {
+          const payload = await api('/status');
+          setData(payload);
+          setForm((prev) => prev || { ...payload.config });
+          setError(null);
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+        }
+      }, []);
+
+      useEffect(() => {
+        void load();
+        void loadLog();
+      }, [load, loadLog]);
+
+      const patch = (next) => setForm((prev) => ({ ...(prev || {}), ...next }));
+
+      const save = useCallback(async () => {
+        if (!form) return;
+        setBusy(true);
+        setNote(null);
+        try {
+          const payload = await api('/config', { method: 'POST', body: JSON.stringify(form) });
+          setForm({ ...payload.config });
+          setNote('已保存');
+          await load();
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+        } finally {
+          setBusy(false);
+        }
+      }, [form, load]);
+
+      const runNow = useCallback(async () => {
+        setBusy(true);
+        setNote('正在检查…');
+        try {
+          const payload = await api('/run', { method: 'POST', body: '{}' });
+          const result = payload && payload.result;
+          setNote(
+            payload && payload.skipped
+              ? `跳过：${payload.skipped}`
+              : result
+                ? `检查 ${result.checked || 0} 个，更新 ${(result.applied || []).length} 个，失败 ${(result.failed || []).length} 个`
+                : '已完成',
+          );
+          await load();
+          await loadLog();
+        } catch (err) {
+          setError(String(err && err.message ? err.message : err));
+        } finally {
+          setBusy(false);
+        }
+      }, [load, loadLog]);
+
+      const cfg = form || {};
+      const mode = cfg.mode || 'startup';
+      const modeHint =
+        mode === 'startup'
+          ? '每次启动 DSH 时检查一轮（20 分钟内不重复检查）。'
+          : mode === 'daily'
+            ? '每天到点后的第一轮检查；当天已经检查过就不再重复。'
+            : '距上次检查满 N 小时后，下个复查周期自动跑一轮。';
+
+      return h(
+        'div',
+        { style: { color: 'var(--dsw-alias-label-primary, #e8eaed)', paddingBottom: 8 } },
+
+        h(
+          Card,
+          {
+            title: '插件自动更新',
+            hint:
+              '自动检查插件市场里已安装插件的更新并在后台安装。市场对发布时间有冷静期（默认 6 小时），' +
+              '刚发布的版本会晚一点才装得上；安装时插件正在使用（bundle-in-use）会失败，可在开机弹窗里一键处理。',
+          },
+          null,
+        ),
+
+        h(
+          Card,
+          { title: '检查时机' },
+          h(Row, {
+            first: true,
+            label: '何时检查',
+            hint: modeHint,
+            control: h(
+              'select',
+              {
+                style: T.select,
+                value: mode,
+                onChange: (event) => patch({ mode: event.target.value }),
+              },
+              h('option', { value: 'startup' }, '每次打开 DSH'),
+              h('option', { value: 'daily' }, '每天定时'),
+              h('option', { value: 'interval' }, '每隔一段时间'),
+            ),
+          }),
+          mode === 'daily'
+            ? h(Row, {
+                label: '每天几点',
+                hint: '当地时间，到点后自动跑一轮。',
+                control: h('input', {
+                  type: 'time',
+                  style: T.input,
+                  value: cfg.dailyAt || '09:30',
+                  onChange: (event) => patch({ dailyAt: event.target.value }),
+                }),
+              })
+            : null,
+          mode === 'interval'
+            ? h(Row, {
+                label: '检查间隔',
+                hint: '1–48 小时，跨重启保留。',
+                control: [
+                  h('input', {
+                    key: 'hours',
+                    type: 'number',
+                    min: 1,
+                    max: 48,
+                    style: T.input,
+                    value: cfg.intervalHours || 6,
+                    onChange: (event) => patch({ intervalHours: Number(event.target.value) || 6 }),
+                  }),
+                  h('span', { key: 'unit', style: T.unit }, '小时'),
+                ],
+              })
+            : null,
+        ),
+
+        h(
+          Card,
+          { title: '行为' },
+          h(Row, {
+            first: true,
+            label: '启用自动检查',
+            hint: '关掉后不再自动检查更新（手动「立即检查」仍然可用）。',
+            control: h(Toggle, {
+              checked: cfg.enabled !== false,
+              onChange: (value) => patch({ enabled: value }),
+            }),
+          }),
+          h(Row, {
+            label: '发现更新就自动安装',
+            hint: '关掉则只检查、不安装。',
+            control: h(Toggle, {
+              checked: cfg.autoApply !== false,
+              onChange: (value) => patch({ autoApply: value }),
+            }),
+          }),
+          h(Row, {
+            label: '开机弹窗汇报结果',
+            hint: '当天第一次打开 DSH 时，弹窗列出已更新与失败的插件；点「稍后」当天不再弹。',
+            control: h(Toggle, {
+              checked: cfg.popupEnabled !== false,
+              onChange: (value) => patch({ popupEnabled: value }),
+            }),
+          }),
+        ),
+
+        h(
+          Card,
+          { title: '操作' },
+          h(Row, {
+            first: true,
+            label: '保存设置',
+            hint: note || '改动会写进 config.json，重载后仍然保留。',
+            control: h(
+              'div',
+              { style: { display: 'flex', gap: 8 } },
+              h('button', { style: S.btn, disabled: busy, onClick: () => void runNow() }, '立即检查'),
+              h('button', { style: S.primary, disabled: busy, onClick: () => void save() }, '保存'),
+            ),
+          }),
+          error
+            ? h(Row, {
+                label: '出错了',
+                hint: String(error),
+                control: null,
+              })
+            : null,
+        ),
+
+        h(
+          'div',
+          { style: { display: 'flex', alignItems: 'baseline', gap: 12, margin: '18px 2px 8px' } },
+          h('div', { style: { ...T.cardTitle, margin: 0 } }, '更新日志'),
+          h(
+            'button',
+            { style: T.linkBtn, onClick: () => void loadLog() },
+            '刷新',
+          ),
+          data && data.state
+            ? h(
+                'div',
+                { style: { ...T.hint, marginTop: 0, marginLeft: 'auto' } },
+                `上次检查 ${fmtTime(data.state.lastCheckAt) || '从未'}　·　今天 ${data.state.lastDay || '-'}` +
+                  (data.desktop && data.desktop.isDesktop ? '' : '　·　当前不是桌面端，一键重启不可用'),
+              )
+            : null,
+        ),
+        h(
+          'div',
+          { style: T.log },
+          log.length
+            ? log
+                .map(
+                  (entry) =>
+                    `${fmtTime(entry.at)}  ${entry.level === 'error' ? '✗' : entry.level === 'warn' ? '!' : '·'} ${entry.message || entry.event}`,
+                )
+                .join('\n')
+            : '（还没有记录）',
+        ),
+      );
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        ctx.slots.inject('shell.overlay', () =>
+          ctx.slots.register({ name: 'shell.overlay', id: 'dsh-auto-update-popup', order: 62 }, UpdatePopup),
+        );
+        ctx.slots.inject('settings.section', () =>
+          ctx.slots.register(
+            {
+              name: 'settings.section',
+              id: 'dsh-auto-update-settings',
+              order: 63,
+              label: () => {
+                const locale = (() => {
+                  try {
+                    return ctx.get('locale')?.getLocale()?.active || 'zh-CN';
+                  } catch {
+                    return 'zh-CN';
+                  }
+                })();
+                return String(locale).toLowerCase().startsWith('en') ? 'Plugin auto update' : '插件自动更新';
+              },
+            },
+            SettingsPage,
+          ),
+        );
+      },
+    };
+  },
+});