@goodandready/dsh-cron 0.3.25 → 0.3.26

package/lib/client-src/70-settings-card.js

@@ -0,0 +1,420 @@
+    function CronSettingsCard(props) {
+      const { ctx, toggle } = props;
+      const t = props.t || translate;
+      const [token, setToken] = React.useState('');
+      const [chatId, setChatId] = React.useState('');
+      const [notify, setNotify] = React.useState(false);
+      const [onlyFailure, setOnlyFailure] = React.useState(false);
+      const [llmActionsEnabled, setLlmActionsEnabled] = React.useState(false);
+      const [enableDynamicCredentials, setEnableDynamicCredentials] = React.useState(false);
+      const [kanbanUrl, setKanbanUrl] = React.useState('http://127.0.0.1:3000');
+      const [delivery, setDelivery] = React.useState({});
+      const [sections, setSections] = React.useState({ channels: true });
+      const [hasDefault, setHasDefault] = React.useState(false);
+      const [saved, setSaved] = React.useState(false);
+      const [testInfo, setTestInfo] = React.useState(null);
+      // Collapsed by default, head is the toggle (canonical card contract, #100)
+      const [cardOpen, setCardOpen] = React.useState(false);
+      const [updateState, setUpdateState] = React.useState({
+        checking: false,
+        updating: false,
+        currentVersion: '',
+        latestVersion: undefined,
+        updateAvailable: false,
+        notice: null,
+        error: null
+      });
+
+      const checkUpdates = async () => {
+        setUpdateState(prev => ({ ...prev, checking: true, error: null, notice: null }));
+        try {
+          const { res, data } = await fetchJsonWithTimeout('/api/dsh-cron/update');
+          if (data && data.currentVersion) {
+            setUpdateState(prev => ({
+              ...prev,
+              checking: false,
+              currentVersion: data.currentVersion,
+              latestVersion: data.latestVersion,
+              updateAvailable: Boolean(data.updateAvailable),
+              error: data.latestCheckFailed ? 'Registry check failed' : null
+            }));
+          } else {
+            setUpdateState(prev => ({ ...prev, checking: false, error: data.error || 'Check failed' }));
+          }
+        } catch (err) {
+          setUpdateState(prev => ({ ...prev, checking: false, error: err.message }));
+        }
+      };
+
+      const runUpdate = async () => {
+        setUpdateState(prev => ({ ...prev, updating: true, error: null, notice: null }));
+        try {
+          const { res, data } = await fetchJsonWithTimeout('/api/dsh-cron/update', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'x-dsh-plugin-update': '1' }
+          });
+          if (data && data.updated) {
+            setUpdateState(prev => ({
+              ...prev,
+              updating: false,
+              updateAvailable: false,
+              currentVersion: data.updatedVersion || data.latestVersion,
+              notice: T_KEY(t, 'updater.success', { version: data.updatedVersion || data.latestVersion })
+            }));
+          } else {
+            setUpdateState(prev => ({
+              ...prev,
+              updating: false,
+              error: data.error || data.message || 'Update failed'
+            }));
+          }
+        } catch (err) {
+          setUpdateState(prev => ({ ...prev, updating: false, error: err.message }));
+        }
+      };
+
+      // Settings snapshot status (#102): never render phantom inputs before
+      // the snapshot arrives; offer a retry when it is unavailable.
+      const [loadState, setLoadState] = React.useState('loading');
+      const [reloadTick, setReloadTick] = React.useState(0);
+
+      React.useEffect(() => {
+        let active = true;
+        setLoadState('loading');
+        fetchJsonWithTimeout('/dsh-cron/settings')
+          .then(({ data }) => {
+            if (!active) return;
+            if (data && data.ok && data.settings) {
+              setToken(data.settings.botToken || '');
+              setChatId(data.settings.chatId || '');
+              setNotify(Boolean(data.settings.notifyTelegram));
+              setOnlyFailure(Boolean(data.settings.onlyOnFailure));
+              setLlmActionsEnabled(Boolean(data.settings.llmActionsEnabled));
+              setEnableDynamicCredentials(Boolean(data.settings.enableDynamicCredentials));
+              setKanbanUrl(data.settings.kanbanBaseUrl || 'http://127.0.0.1:3000');
+              setDelivery(pickDeliverySettings(data.settings));
+              setHasDefault(Boolean(data.settings.hasDefaultCredentials));
+              if (data.settings.version) {
+                setUpdateState(prev => ({ ...prev, currentVersion: data.settings.version }));
+              }
+              setLoadState('ready');
+            } else {
+              setLoadState('error');
+            }
+          })
+          .catch(() => { if (active) setLoadState('error'); });
+        return () => { active = false; };
+      }, [reloadTick]);
+
+      const saveSettings = async (e) => {
+        if (e) e.preventDefault();
+        try {
+          const { res, data } = await fetchJsonWithTimeout('/dsh-cron/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(Object.assign({
+              botToken: token,
+              chatId,
+              notifyTelegram: notify,
+              onlyOnFailure: onlyFailure,
+              llmActionsEnabled: llmActionsEnabled,
+              enableDynamicCredentials: enableDynamicCredentials,
+              kanbanBaseUrl: kanbanUrl
+            }, delivery))
+          });
+          if (data && data.ok) {
+            setSaved(true);
+            setTimeout(() => setSaved(false), 2500);
+          }
+        } catch (err) {
+          console.debug('[dsh-cron] save settings failed', err);
+        }
+      };
+
+      const testTelegram = async () => {
+        setTestInfo({ loading: true, message: T_KEY(t, 'settings.sending') });
+        try {
+          const { res, data } = await fetchJsonWithTimeout('/dsh-cron/telegram/test', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ botToken: token, chatId })
+          });
+          if (data && data.ok) {
+            setTestInfo({ success: true, message: T_KEY(t, 'settings.testOk') });
+          } else {
+            setTestInfo({ success: false, message: T_KEY(t, 'settings.testFail', { error: (data && data.error) || '' }) });
+          }
+        } catch (err) {
+          setTestInfo({ success: false, message: T_KEY(t, 'settings.testFail', { error: err.message }) });
+        }
+      };
+
+      const testKanban = async () => {
+        setTestInfo({ loading: true, message: T_KEY(t, 'settings.checkingKanban') });
+        try {
+          const { res, data } = await fetchJsonWithTimeout('/dsh-cron/kanban/test', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ kanbanBaseUrl: kanbanUrl })
+          });
+          if (data && data.ok) {
+            setTestInfo({ success: true, message: T_KEY(t, 'settings.kanbanOk') });
+          } else {
+            setTestInfo({ success: false, message: T_KEY(t, 'settings.kanbanFail', { error: (data && data.error) || '' }) });
+          }
+        } catch (err) {
+          setTestInfo({ success: false, message: T_KEY(t, 'settings.kanbanFail', { error: err.message }) });
+        }
+      };
+
+      if (loadState !== 'ready') {
+        return React.createElement('div', { className: 'dsh-cron-card' },
+          React.createElement('div', { className: 'dsh-cron-card-title' }, T_KEY(t, 'settings.cardTitle')),
+          React.createElement('div', {
+            className: 'dsh-cron-status-banner',
+            'data-type': loadState === 'error' ? 'error' : 'info',
+            style: { marginTop: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '10px' }
+          },
+            React.createElement('span', null, loadState === 'error' ? T_KEY(t, 'settings.unavailable') : T_KEY(t, 'settings.loading')),
+            loadState === 'error' && React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-secondary',
+              onClick: () => setReloadTick(x => x + 1)
+            }, T_KEY(t, 'settings.retry'))
+          )
+        );
+      }
+
+      // Row seat (plugins.row.config): the host page draws title/icon/crumb and the
+      // padding, so the summary is a one-liner and the page drops our card chrome.
+      if (props && props.view === 'summary') {
+        return React.createElement('span', { className: 'dsh-cron-card-desc' }, T_KEY(t, 'settings.cardDesc'));
+      }
+      const page = !!(props && props.view === 'page');
+      return React.createElement('div', { className: page ? 'dsh-cron-page' : 'dsh-cron-card' },
+        React.createElement('button', {
+          type: 'button',
+          className: 'dsh-cron-card-head-btn',
+          style: page ? { display: 'none' } : undefined,
+          'aria-expanded': (page || cardOpen) ? 'true' : 'false',
+          onClick: () => setCardOpen(!cardOpen)
+        },
+          React.createElement('span', { className: 'dsh-cron-card-title' }, T_KEY(t, 'settings.cardTitle')),
+          React.createElement('span', { className: 'dsh-cron-chev' + (cardOpen ? ' dsh-cron-chev-open' : '') }, chevronNode())
+        ),
+        (page || cardOpen) && React.createElement('div', { className: 'dsh-cron-card-body' },
+          React.createElement('div', { className: 'dsh-cron-card-desc' }, T_KEY(t, 'settings.cardDesc')),
+          React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: '12px' } },
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-primary',
+              onClick: () => { if (toggle) toggle.set(true); }
+            }, T_KEY(t, 'settings.openPanel'))
+          ),
+          React.createElement('form', { onSubmit: saveSettings, style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
+          React.createElement('div', { className: 'dsh-cron-form-group', style: { marginBottom: 0 } },
+            React.createElement('label', null, T_KEY(t, 'settings.tokenLabel')),
+            React.createElement('input', {
+              type: 'password',
+              value: token,
+              placeholder: hasDefault ? T_KEY(t, 'settings.tokenPlaceholderDefault') : T_KEY(t, 'settings.tokenPlaceholder'),
+              onChange: (e) => setToken(e.target.value)
+            }),
+            hasDefault && React.createElement('div', { className: 'dsh-cron-hint' }, T_KEY(t, 'settings.defaultHint'))
+          ),
+          React.createElement('div', { className: 'dsh-cron-form-group', style: { marginBottom: 0 } },
+            React.createElement('label', null, T_KEY(t, 'settings.chatIdLabel')),
+            React.createElement('input', {
+              value: chatId,
+              placeholder: T_KEY(t, 'settings.chatIdPlaceholder'),
+              onChange: (e) => setChatId(e.target.value)
+            })
+          ),
+          React.createElement('div', { className: 'dsh-cron-form-group', style: { marginBottom: 0 } },
+            React.createElement('label', null, T_KEY(t, 'settings.kanbanUrlLabel')),
+            React.createElement('input', {
+              value: kanbanUrl,
+              placeholder: 'http://127.0.0.1:3000',
+              onChange: (e) => setKanbanUrl(e.target.value)
+            })
+          ),
+          React.createElement('div', { style: { background: 'var(--dsw-alias-bg-layer-3, color-mix(in srgb, var(--dsw-alias-label-primary) 2%, transparent))', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '6px', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '8px' } },
+            React.createElement('label', { className: 'dsh-cron-checkbox-row' },
+              React.createElement('input', {
+                type: 'checkbox',
+                checked: notify,
+                onChange: (e) => setNotify(e.target.checked)
+              }),
+              React.createElement('span', null, T_KEY(t, 'settings.globalNotify'))
+            ),
+            React.createElement('label', { className: 'dsh-cron-checkbox-row' },
+              React.createElement('input', {
+                type: 'checkbox',
+                checked: onlyFailure,
+                onChange: (e) => setOnlyFailure(e.target.checked)
+              }),
+              React.createElement('span', null, T_KEY(t, 'settings.globalOnlyFailure'))
+            ),
+            React.createElement('label', { className: 'dsh-cron-checkbox-row' },
+              React.createElement('input', {
+                type: 'checkbox',
+                checked: llmActionsEnabled,
+                onChange: (e) => setLlmActionsEnabled(e.target.checked)
+              }),
+              React.createElement('span', null, 'Enable Structured LLM Actions (trigger tasks, notify, create issues)')
+            ),
+            React.createElement('label', { className: 'dsh-cron-checkbox-row' },
+              React.createElement('input', {
+                type: 'checkbox',
+                checked: enableDynamicCredentials,
+                onChange: (e) => setEnableDynamicCredentials(e.target.checked)
+              }),
+              React.createElement('span', null, T_KEY(t, 'settings.dynamicCredentials'))
+            )
+          ),
+          ...renderDeliverySettings({
+            T: (key, vars) => T_KEY(t, key, vars),
+            values: delivery,
+            onChange: (key, value) => setDelivery((prev) => {
+              const next = Object.assign({}, prev);
+              if (value === undefined) delete next[key];
+              else next[key] = value;
+              return next;
+            }),
+            onChannelTemplate: (channelId, value) => setDelivery((prev) => {
+              const templates = Object.assign({}, prev.channelTemplates || {});
+              if (value && value.trim()) templates[channelId] = value;
+              else delete templates[channelId];
+              return Object.assign({}, prev, { channelTemplates: templates });
+            }),
+            sections,
+            onToggleSection: (key) => setSections((prev) => Object.assign({}, prev, { [key]: !prev[key] })),
+          }),
+          testInfo && testInfo.message && React.createElement('div', {
+            className: 'dsh-cron-status-banner',
+            'data-type': testInfo.success ? 'success' : 'error',
+            style: { margin: 0, padding: '8px 12px' }
+          }, testInfo.message),
+          React.createElement('div', {
+            className: 'dsh-cron-form-group',
+            style: {
+              background: 'var(--dsw-alias-bg-layer-2, color-mix(in srgb, var(--dsw-alias-label-primary) 3%, transparent))',
+              border: '1px solid var(--dsw-alias-border-l2, color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent))',
+              borderRadius: '8px',
+              padding: '14px',
+              marginBottom: '16px'
+            }
+          },
+            React.createElement('div', {
+              style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }
+            },
+              React.createElement('div', { style: { fontWeight: '600', fontSize: '14px' } }, `🚀 ${T_KEY(t, 'updater.title')}`),
+              React.createElement('div', { style: { display: 'flex', gap: '8px' } },
+                React.createElement('button', {
+                  type: 'button',
+                  className: 'dsh-cron-btn-secondary',
+                  style: { padding: '4px 10px', fontSize: '12px' },
+                  disabled: updateState.checking || updateState.updating,
+                  onClick: checkUpdates
+                }, updateState.checking ? T_KEY(t, 'updater.checking') : T_KEY(t, 'updater.btnCheck')),
+                updateState.updateAvailable ? React.createElement('button', {
+                  type: 'button',
+                  className: 'dsh-cron-btn-primary',
+                  style: { padding: '4px 10px', fontSize: '12px' },
+                  disabled: updateState.updating,
+                  onClick: runUpdate
+                }, updateState.updating ? T_KEY(t, 'updater.updating') : T_KEY(t, 'updater.btnUpdate', { version: updateState.latestVersion })) : null
+              )
+            ),
+            React.createElement('div', {
+              style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #999)', marginBottom: '8px' }
+            }, T_KEY(t, 'updater.desc')),
+            React.createElement('div', {
+              style: { display: 'flex', alignItems: 'center', gap: '12px', fontSize: '13px' }
+            },
+              React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary, #aaa)' } },
+                updateState.currentVersion ? T_KEY(t, 'updater.current', { version: updateState.currentVersion }) : ''
+              ),
+              updateState.checking ? React.createElement('span', { className: 'dsh-cron-badge dsh-cron-badge-info' }, T_KEY(t, 'updater.checking')) :
+              updateState.updateAvailable ? React.createElement('span', { className: 'dsh-cron-badge dsh-cron-badge-warn' }, T_KEY(t, 'updater.available', { version: updateState.latestVersion })) :
+              updateState.currentVersion && !updateState.error && !updateState.checking ? React.createElement('span', { className: 'dsh-cron-badge dsh-cron-badge-ok' }, `✓ ${T_KEY(t, 'updater.upToDate')}`) : null
+            ),
+            updateState.notice ? React.createElement('div', {
+              style: { marginTop: '8px', color: 'var(--dsw-alias-success)', fontSize: '12px' }
+            }, updateState.notice) : null,
+            updateState.error ? React.createElement('div', {
+              style: { marginTop: '8px', color: 'var(--dsw-alias-error)', fontSize: '12px' }
+            }, updateState.error) : null
+          ),
+          React.createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', marginTop: '4px' } },
+            React.createElement('button', {
+              type: 'submit',
+              className: 'dsh-cron-btn-primary',
+              style: { minWidth: '140px' }
+            }, saved ? T_KEY(t, 'settings.saved') : T_KEY(t, 'settings.save')),
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-secondary',
+              onClick: testTelegram,
+              disabled: testInfo?.loading
+            }, T_KEY(t, 'settings.testTelegram')),
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-secondary',
+              onClick: testKanban,
+              disabled: testInfo?.loading
+            }, T_KEY(t, 'settings.testKanban'))
+          )
+        )
+      )
+    );
+    }
+
+    function nativeButton() {
+      const nodes = document.querySelectorAll('button[class*="newSession"]');
+      for (const node of nodes) {
+        if (String(node.className).indexOf('newSessionLabel') === -1) return node;
+      }
+      return undefined;
+    }
+
+    function createEntry(target, toggle, label) {
+      const entry = target.cloneNode(true);
+      entry.className = String(target.className) + ' dsh-cron-entry-clone';
+      entry.setAttribute(ENTRY_ATTR, '');
+      entry.setAttribute('data-dsh-plugin', 'dsh-cron');
+      entry.setAttribute('data-dsh-part', 'sidebar-entry');
+      entry.setAttribute('aria-label', label);
+      entry.removeAttribute('id');
+      entry.innerHTML = '';
+
+      const icon = document.createElement('span');
+      icon.className = 'dsh-cron-entry-icon';
+      icon.innerHTML = ICON_TIMER;
+      entry.appendChild(icon);
+
+      const text = document.createElement('span');
+      text.className = 'dsh-cron-entry-label';
+      text.textContent = label;
+      entry.appendChild(text);
+
+      entry.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        toggle.toggle();
+      });
+      return entry;
+    }
+
+    /**
+     * Collapsible list of active jobs under the sidebar entry (#34).
+     *
+     * Vanilla DOM like the entry itself: the sidebar is not a React root here.
+     * Collapsed by default, state persisted, capped at a few rows with an
+     * "and N more" line so a busy schedule cannot push the rest of the sidebar
+     * off screen. Clicking a row opens the panel and highlights that task.
+     */
+    const SIDEBAR_JOBS_KEY = 'dsh-cron-sidebar-open';
+    const SIDEBAR_JOBS_MAX_ROWS = 5;
+
+    /** Sidebar job row: title plus next run time or the live running state. */

package/lib/client-src/80-sidebar-jobs.js

@@ -0,0 +1,200 @@
+    function buildSidebarJobRow(state, task) {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'dsh-cron-sidebar-job';
+      // A distinct attribute: the panel uses data-task-id, and the highlight
+      // lookup must never pick a sidebar row instead of a task card.
+      row.setAttribute('data-sidebar-task-id', task.id);
+      row.setAttribute('aria-label', task.title || task.id);
+
+      const title = document.createElement('span');
+      title.className = 'dsh-cron-sidebar-job-title';
+      title.textContent = task.title || task.id;
+      row.appendChild(title);
+
+      const meta = document.createElement('span');
+      meta.className = 'dsh-cron-sidebar-job-meta';
+      if (task.running) meta.textContent = T('list.runningNow');
+      else if (task.nextRunAt) meta.textContent = new Date(task.nextRunAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      else meta.textContent = task.scheduleText || task.schedule || '';
+      row.appendChild(meta);
+
+      if (task.running) row.classList.add('dsh-cron-pulse');
+      row.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        state.openTaskSignal(task.id);
+        if (!state.toggle.isOpen()) state.toggle.toggle();
+      });
+      return row;
+    }
+
+    function renderSidebarJobs(state, tasks) {
+      const listEl = state.listEl;
+      if (!listEl) return;
+      listEl.innerHTML = '';
+      if (!tasks.length) {
+        const empty = document.createElement('div');
+        empty.className = 'dsh-cron-sidebar-empty';
+        empty.textContent = T('sidebar.noActiveJobs');
+        listEl.appendChild(empty);
+        return;
+      }
+      for (const task of tasks.slice(0, SIDEBAR_JOBS_MAX_ROWS)) listEl.appendChild(buildSidebarJobRow(state, task));
+      if (tasks.length > SIDEBAR_JOBS_MAX_ROWS) {
+        const more = document.createElement('div');
+        more.className = 'dsh-cron-sidebar-more';
+        more.textContent = T('sidebar.moreJobs', { count: tasks.length - SIDEBAR_JOBS_MAX_ROWS });
+        listEl.appendChild(more);
+      }
+    }
+
+    async function loadSidebarJobs(state) {
+      try {
+        const { res, data } = await fetchJsonWithTimeout('/dsh-cron/tasks?status=active');
+        if (data && data.ok) renderSidebarJobs(state, data.tasks || []);
+      } catch (err) {
+        console.debug('[dsh-cron] load sidebar jobs failed', err);
+      }
+    }
+
+    function applySidebarJobsOpen(state) {
+      if (!state.root) return;
+      state.root.dataset.open = state.open ? 'true' : 'false';
+      if (state.headEl) state.headEl.setAttribute('aria-expanded', state.open ? 'true' : 'false');
+      if (state.open) loadSidebarJobs(state);
+    }
+
+    function buildSidebarJobsRoot(state, label) {
+      const root = document.createElement('div');
+      root.className = 'dsh-cron-sidebar-jobs';
+      root.setAttribute('data-dsh-plugin', 'dsh-cron');
+      root.setAttribute('data-dsh-part', 'sidebar-jobs');
+
+      const headEl = document.createElement('button');
+      headEl.type = 'button';
+      headEl.className = 'dsh-cron-sidebar-jobs-head';
+      headEl.setAttribute('aria-expanded', state.open ? 'true' : 'false');
+      headEl.textContent = label;
+      headEl.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        state.open = !state.open;
+        try { window.localStorage.setItem(SIDEBAR_JOBS_KEY, state.open ? '1' : '0'); } catch (err) { /* localStorage write failed */ }
+        applySidebarJobsOpen(state);
+      });
+      root.appendChild(headEl);
+
+      const listEl = document.createElement('div');
+      listEl.className = 'dsh-cron-sidebar-jobs-list';
+      root.appendChild(listEl);
+
+      state.root = root;
+      state.headEl = headEl;
+      state.listEl = listEl;
+      return root;
+    }
+
+    /** Keep the section mounted under the sidebar entry across re-renders. */
+    function placeSidebarJobs(state, label) {
+      if (state.root !== undefined && state.root.isConnected) return;
+      const entry = document.querySelector('[' + ENTRY_ATTR + ']');
+      if (entry === null || entry.parentElement === null) return;
+      if (state.root === undefined) {
+        entry.insertAdjacentElement('afterend', buildSidebarJobsRoot(state, label));
+      } else {
+        entry.insertAdjacentElement('afterend', state.root);
+        // Re-query the refs: the previous nodes may belong to a detached tree.
+        state.root = document.querySelector('[data-dsh-part="sidebar-jobs"]') || state.root;
+        state.listEl = state.root.querySelector('.dsh-cron-sidebar-jobs-list');
+        state.headEl = state.root.querySelector('.dsh-cron-sidebar-jobs-head');
+      }
+      applySidebarJobsOpen(state);
+    }
+
+    /**
+     * Collapsible list of active jobs under the sidebar entry (#34).
+     *
+     * Vanilla DOM like the entry itself: the sidebar is not a React root here.
+     * Collapsed by default, state persisted, capped at a few rows with an
+     * "and N more" line so a busy schedule cannot push the rest of the sidebar
+     * off screen. Clicking a row opens the panel and highlights that task.
+     */
+    function mountSidebarJobs(toggle, label, openTaskSignal) {
+      if (typeof document === 'undefined') return () => {};
+      const state = { toggle, openTaskSignal, root: undefined, listEl: undefined, headEl: undefined, open: false };
+      try { state.open = window.localStorage.getItem(SIDEBAR_JOBS_KEY) === '1'; } catch (err) { /* localStorage read failed */ }
+
+      let rafPending = false;
+      const schedulePlace = () => {
+        if (state.root !== undefined && state.root.isConnected) return;
+        if (rafPending) return;
+        rafPending = true;
+        const scheduleFn = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (cb) => setTimeout(cb, 16);
+        scheduleFn(() => {
+          rafPending = false;
+          placeSidebarJobs(state, label);
+        });
+      };
+
+      const observer = new MutationObserver(schedulePlace);
+      observer.observe(document.body, { childList: true, subtree: true });
+      placeSidebarJobs(state, label);
+      loadSidebarJobs(state);
+      const fetchTimer = setInterval(() => {
+        let isOpen = false;
+        try { isOpen = window.localStorage.getItem(SIDEBAR_JOBS_KEY) === '1'; } catch (err) { /* localStorage poll failed */ }
+        if (isOpen) loadSidebarJobs(state);
+      }, 30000);
+
+      return () => {
+        observer.disconnect();
+        clearInterval(fetchTimer);
+        if (state.root !== undefined && state.root.isConnected) state.root.remove();
+        state.root = undefined;
+      };
+    }
+
+    function placeEntry(target, entry) {
+      let anchor = target;
+      let next = target.nextElementSibling;
+      while (next !== null && next.tagName === 'BUTTON'
+        && String(next.className).indexOf('sidebar-entry') >= 0) {
+        anchor = next;
+        next = next.nextElementSibling;
+      }
+      anchor.insertAdjacentElement('afterend', entry);
+    }
+
+    function mountSidebarEntry(toggle, label) {
+      if (typeof document === 'undefined') return () => {};
+      let entry;
+      const tryPlace = () => {
+        if (entry !== undefined && entry.isConnected) return;
+        const target = nativeButton();
+        if (target === undefined || target.parentElement === null) return;
+        if (target.parentElement.querySelector('[' + ENTRY_ATTR + ']') !== null) return;
+        entry = createEntry(target, toggle, label);
+        placeEntry(target, entry);
+        syncActive();
+      };
+
+      const syncActive = () => {
+        if (entry === undefined) return;
+        if (toggle.isOpen()) entry.dataset.active = 'true';
+        else delete entry.dataset.active;
+      };
+
+      const observer = new MutationObserver(tryPlace);
+      observer.observe(document.body, { childList: true, subtree: true });
+      const unsubscribe = toggle.subscribe(syncActive);
+      tryPlace();
+
+      return () => {
+        observer.disconnect();
+        unsubscribe();
+        if (entry !== undefined) entry.remove();
+        entry = undefined;
+      };
+    }
+