@goodandready/dsh-cron 0.2.37 → 0.2.38

package/README.md

@@ -452,6 +452,7 @@ Developer-facing, no behaviour change. `parseScheduleExpression` was split into
 - **Modular Client Architecture (#150)**: Decomposed monolithic `lib/client.js` (~3950 lines) into 14 focused, single-responsibility fragments under `lib/client-src/` (none exceeding 580 lines). Integrated zero-dependency build script `scripts/build-client.mjs` wired into `package.json` (`build:client`, `pretest`). Development fragments are excluded from npm distribution via `"files": ["lib/*.js", ...]`.
 - **DSH Theme Tokens & Visual Standardization (#149)**: Replaced inline styles on task type badges (`onSuccess`, `onFailure`, `heartbeat`, `targetSession`, `preflight`) with dedicated `.dsh-cron-tag-*` CSS classes powered by semantic `--dsh-cron-*` theme variables. Modal overlay now adapts dynamically using `var(--dsw-alias-bg-mask, rgba(0, 0, 0, 0.75))`, and keyframe pulse animations use theme variables without hardcoded RGBA.
 - **Label Governance & Triage Audit (#95)**: Standardized 100% of repository issues and triage on the canonical repo-level label set.
+- **Style Self-Healing on Dynamic DOM Sweeps (#263 / GH-4)**: Watches `<head>` and `<html>` via `MutationObserver` alongside a 2s backstop interval and `visibilitychange` listener (`startStyleSelfHeal`), automatically re-attaching or repairing the `<style id="dsh-cron-styles">` tag if swept by host head re-renders, theme switches, or neighbor cleanups.
 
 ---
 

package/README.ru.md

@@ -319,6 +319,7 @@ cron({
 - **Модульная архитектура клиентской части (#150)**: Монолитный файл `lib/client.js` (~3950 строк) декомпозирован на 14 независимых специализированных модулей в каталоге `lib/client-src/` (каждый строго <= 580 строк). Сборка `lib/client.js` выполняется легковесным скриптом `scripts/build-client.mjs` перед запуском тестов и сборки. Исходные фрагменты исключены из npm-дистрибутива через `"files": ["lib/*.js", ...]`.
 - **Семантические токены тем DSH (#149)**: Инлайн-стили тегов типа задач (`onSuccess`, `onFailure`, `heartbeat`, `targetSession`, `preflight`) переведены на выделенные CSS-классы `.dsh-cron-tag-*` на базе переменных темы `--dsh-cron-*`. Оверлей модальных окон переведен на адаптивную маску `var(--dsw-alias-bg-mask, rgba(0, 0, 0, 0.75))`, а анимация пульсации избавлена от захардкоженных значений RGBA.
 - **Аудит меток репозитория (#95)**: Подтверждена 100% консистентность использования канонического репозиторного набора меток и фильтрации задач.
+- **Самовосстановление стилей при динамических перерисовках DOM (#263 / GH-4)**: Отслеживает `<head>` и `<html>` через `MutationObserver`, резервный интервал 2с и событие `visibilitychange` (`startStyleSelfHeal`), мгновенно восстанавливая узел `<style id="dsh-cron-styles">` при перерисовке заголовка хостом, смене темы или очистке соседними модулями.
 
 ---
 

package/README.zh.md

@@ -444,6 +444,7 @@ bash deploy.sh verify [exact-version]
 - **客户端模块化架构 (#150)**: 将庞大的单文件 `lib/client.js` (约 3950 行) 拆分为 `lib/client-src/` 下的 14 个高内聚模块文件 (各模块严格 <= 580 行)。集成零依赖构建脚本 `scripts/build-client.mjs` 并接入 `package.json` (`build:client`, `pretest`)，通过 `"files": ["lib/*.js", ...]` 避免开发源码冗余打包进 npm 发布包。
 - **DSH 语义化主题变量对齐 (#149)**: 将任务类型标签 (`onSuccess`, `onFailure`, `heartbeat`, `targetSession`, `preflight`) 的内联样式全部替换为基于主题变量的 `.dsh-cron-tag-*` 类；模态框遮罩层接入自适应主题遮罩变量 `var(--dsw-alias-bg-mask, rgba(0, 0, 0, 0.75))`，移除脉冲动画关键帧中的硬编码 RGBA。
 - **标签治理与工单审计 (#95)**: 审计并确认全仓库 100% 统一规范使用仓库级标签集。
+- **动态 DOM 清理下的样式自动恢复（#263 / GH-4）**: 通过 `MutationObserver`、2 秒兜底定时器与 `visibilitychange` 事件（`startStyleSelfHeal`）监听 `<head>` 与 `<html>`，当宿主重绘 `<head>`、切换主题或邻近插件清理样式时，自动重新注入并修复 `<style id="dsh-cron-styles">` 标签。
 
 ---
 

package/lib/client.js

@@ -847,17 +847,63 @@ window.__ModuleLoader__.load({
       }
     `;
 
+    const STYLE_ID = 'dsh-cron-styles';
+
     function ensureStyles() {
-      if (typeof document === 'undefined') return;
-      let el = document.getElementById('dsh-cron-styles');
-      if (!el) {
+      if (typeof document === 'undefined') return null;
+      let el = document.getElementById(STYLE_ID);
+      if (el === null) {
+        const head = document.head || document.documentElement;
+        if (!head) return null;
         el = document.createElement('style');
-        el.id = 'dsh-cron-styles';
+        el.id = STYLE_ID;
         // Mark ownership before insertion so neighbor cleanups leave it alone (#91)
         el.dataset.dshPlugin = 'dsh-cron';
-        document.head.appendChild(el);
+        el.textContent = STYLES;
+        head.appendChild(el);
+        return el;
       }
-      el.textContent = STYLES;
+      if (el.textContent !== STYLES) el.textContent = STYLES;
+      return el;
+    }
+
+    // Registry is shared across hot reloads so the newest instance owns exactly
+    // one watcher instead of stacking one per module evaluation.
+    const STYLE_HEAL_KEY = '__dshCronStyleHeal';
+    const STYLE_HEAL_INTERVAL_MS = 2000;
+
+    /**
+     * Keep the stylesheet attached: watch <head> (and <html>, which catches a
+     * replaced <head>) and re-attach on demand, with a slow interval as the
+     * backstop. heal() is idempotent and writes nothing while healthy.
+     */
+    function startStyleSelfHeal() {
+      if (typeof document === 'undefined') return () => {};
+      if (typeof window !== 'undefined' && typeof window[STYLE_HEAL_KEY] === 'function') {
+        try { window[STYLE_HEAL_KEY](); } catch (_err) { void _err; }
+      }
+      const heal = () => { try { ensureStyles(); } catch (_err) { void _err; } };
+      heal();
+      let observer = null;
+      try {
+        if (typeof MutationObserver === 'function') {
+          observer = new MutationObserver(heal);
+          if (document.head) observer.observe(document.head, { childList: true });
+          if (document.documentElement) observer.observe(document.documentElement, { childList: true });
+        }
+      } catch (_err) { observer = null; }
+      let timer = null;
+      try { timer = setInterval(heal, STYLE_HEAL_INTERVAL_MS); } catch (_err) { timer = null; }
+      const onVisibility = () => { if (document.visibilityState !== 'hidden') heal(); };
+      try { document.addEventListener('visibilitychange', onVisibility); } catch (_err) { void _err; }
+      const stop = () => {
+        try { if (observer) observer.disconnect(); } catch (_err) { void _err; }
+        try { if (timer !== null) clearInterval(timer); } catch (_err) { void _err; }
+        try { document.removeEventListener('visibilitychange', onVisibility); } catch (_err) { void _err; }
+        if (typeof window !== 'undefined' && window[STYLE_HEAL_KEY] === stop) window[STYLE_HEAL_KEY] = undefined;
+      };
+      if (typeof window !== 'undefined') window[STYLE_HEAL_KEY] = stop;
+      return stop;
     }
 
     function createErrorBoundary() {
@@ -4014,6 +4060,9 @@ window.__ModuleLoader__.load({
 
       const applyActive = () => {
         if (toggle.isOpen()) {
+          // Repair a dropped stylesheet before the panel paints, so opening the
+          // screen never shows an unstyled page (see startStyleSelfHeal).
+          ensureStyles();
           document.documentElement.setAttribute(ACTIVE_ATTR, '');
           document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL }));
         } else {
@@ -4070,7 +4119,7 @@ window.__ModuleLoader__.load({
     }
 
     function apply(ctx) {
-      ensureStyles();
+      const stopStyleSelfHeal = startStyleSelfHeal();
 
       // Register the English canonical strings; rebinding the translator lets
       // the translation plugin drive the active language at runtime (#87).
@@ -4158,7 +4207,7 @@ window.__ModuleLoader__.load({
           mountSidebarJobs(toggle, translate('sidebar.jobsTitle'), (taskId) => { pendingTaskHighlight = taskId; }),
           mountCronScreen(ctx, toggle)
         ];
-        return () => { for (const dispose of off) dispose(); };
+        return () => { for (const dispose of off) dispose(); stopStyleSelfHeal(); };
       }, 'dsh-cron: client overlay');
 
       exports.slots = { card: cardSlot, chip: chipSlot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-cron",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "description": "Background automation runner for DSH: isolated agent runs, script/HTTP/SSH/Docker runtimes, cost guard, notifications, heartbeats.",
   "type": "module",
   "main": "lib/index.js",