@goodandready/dsh-cron 0.2.4 → 0.2.5

package/lib/client.js

@@ -15,6 +15,9 @@ window.__ModuleLoader__.load({
     const ACTIVATE_EVENT = 'dsh-panel-activate';
     const ACTIVE_ATTR = 'data-dsh-cron-active';
     const ENTRY_ATTR = 'data-dsh-cron-entry';
+    // Set by the sidebar job list (#34) so the panel can highlight the task the
+    // user clicked; cleared once the panel has scrolled to it.
+    let pendingTaskHighlight = null;
     const VIEW_ATTR = 'data-dsh-cron-view';
     const COLUMN_SELECTOR = '[data-pane=conversation], [class*=centerCol]';
     const SESSION_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="newSession"]';
@@ -32,6 +35,9 @@ window.__ModuleLoader__.load({
     const ICON_ACTIVITY = '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>';
     const ICON_EDIT = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>';
     const ICON_SEND = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
+    const ICON_COPY = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+    const ICON_DOWNLOAD = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
+    const ICON_UPLOAD = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>';
     const ICON_TELEGRAM = '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8-1.7 8.01c-.13.58-.47.72-.95.45l-2.6-1.92-1.25 1.21c-.14.14-.26.26-.53.26l.19-2.64 4.81-4.35c.21-.19-.05-.29-.32-.11L8.34 13.5 5.78 12.7c-.56-.17-.57-.56.12-.83l10-3.86c.46-.17.87.11.74.79z"/></svg>';
 
     // Locale dictionary: English is the canonical source language (Issue #87).
@@ -40,6 +46,9 @@ window.__ModuleLoader__.load({
     const STRINGS = {
       en: {
         'sidebar.label': 'Scheduled tasks',
+        'sidebar.jobsTitle': 'Active jobs',
+        'sidebar.noActiveJobs': 'No active jobs',
+        'sidebar.moreJobs': 'and {count} more',
         'chip.title': 'Scheduled tasks (Cron)',
         'panel.back': 'Back to chat',
         'panel.title': 'Scheduled tasks',
@@ -50,11 +59,37 @@ window.__ModuleLoader__.load({
         'actions.runNow': 'Run now',
         'actions.runNowShort': 'Run',
         'actions.edit': 'Edit / Details',
+        'actions.duplicate': 'Duplicate task',
         'actions.delete': 'Delete task',
+        'duplicate.done': 'Copy created and paused: review its schedule before resuming it.',
+        'duplicate.oneShotHint': 'The copy is one-shot and paused — its original time has likely passed, so set a new time before resuming.',
+        'duplicate.failed': 'Could not duplicate the task: {error}',
+        'transfer.exportTitle': 'Export tasks',
+        'transfer.importTitle': 'Import tasks',
+        'transfer.exported': 'Exported {count} task(s).',
+        'transfer.exportFailed': 'Export failed: {error}',
+        'transfer.importTitleModal': 'Import tasks',
+        'transfer.importHint': 'Exported task configuration only: no run history, no counters. Secrets are not included — channels reference credentials by name, so make sure those credential names exist on the target harness.',
+        'transfer.strategyAdd': 'Add as new tasks (new ids, existing ones stay untouched)',
+        'transfer.strategyReplace': 'Replace tasks with the same id',
+        'transfer.strategySkip': 'Skip tasks whose id already exists',
+        'transfer.summary': 'This file contains {total} task(s): {add} new, {replace} matching an existing id, {skip} already skipped.',
+        'transfer.confirm': 'Import',
+        'transfer.imported': 'Imported {count} task(s).',
+        'transfer.importFailed': 'Import failed: {error}',
+        'transfer.badFile': 'The selected file is not a valid JSON export: {error}',
         'actions.pause': 'Pause',
         'actions.resume': 'Resume',
         'actions.settings': 'Notifications & channels',
         'search.placeholder': 'Search scheduled tasks',
+        'filters.title': 'Filters',
+        'filters.type': 'Type',
+        'filters.model': 'Model',
+        'filters.channel': 'Channel',
+        'filters.any': 'Any',
+        'filters.reset': 'Reset filters',
+        'filters.empty': 'No task matches the current filters.',
+        'filters.showing': 'Showing {shown} of {total}',
         'stats.activeTasks': 'Active tasks',
         'stats.totalRuns': 'Total runs',
         'stats.totalTokens': 'Tokens spent',
@@ -168,7 +203,6 @@ window.__ModuleLoader__.load({
         'form.channelNtfy': 'ntfy',
         'form.channelBark': 'Bark',
         'form.channelPushplus': 'PushPlus',
-        'form.channelEmail': 'Email',
         'form.channelTts': 'Voice (dsh-tts)',
         'form.channelGitea': 'Gitea issue',
         'settings.deliverySection': 'Delivery channels',
@@ -188,13 +222,6 @@ window.__ModuleLoader__.load({
         'settings.barkKeyLabel': 'Bark device key',
         'settings.pushplusTokenRefLabel': 'PushPlus token credential name',
         'settings.pushplusUrlLabel': 'PushPlus endpoint',
-        'settings.smtpHostLabel': 'SMTP host',
-        'settings.smtpPortLabel': 'SMTP port',
-        'settings.smtpUserLabel': 'SMTP user',
-        'settings.smtpPasswordRefLabel': 'SMTP password credential name',
-        'settings.smtpFromLabel': 'From address',
-        'settings.smtpToLabel': 'Recipients (comma separated)',
-        'settings.smtpSecureLabel': 'SMTP over TLS (implicit)',
         'settings.ttsBaseUrlLabel': 'dsh-tts base URL',
         'settings.giteaBaseUrlLabel': 'Gitea base URL',
         'settings.giteaRepoLabel': 'Gitea repository (owner/repo)',
@@ -209,7 +236,7 @@ window.__ModuleLoader__.load({
         'settings.unavailable': 'Settings are unavailable right now.',
         'settings.retry': 'Retry',
         'settings.cardTitle': '⏰ Task scheduler (Cron)',
-        'settings.cardDesc': 'Scheduled task execution (cron/intervals), background agent scenarios, and delivery of run reports to Telegram, Discord, Slack, ntfy, Bark, PushPlus, email, voice and Gitea.',
+        'settings.cardDesc': 'Scheduled task execution (cron/intervals), background agent scenarios, and delivery of run reports to Telegram, Discord, Slack, ntfy, Bark, PushPlus, voice and Gitea.',
         'settings.openPanel': 'Open task panel',
         'settings.modalTitle': 'Notifications & delivery channels',
         'settings.tokenLabel': 'Telegram Bot Token',
@@ -307,7 +334,7 @@ window.__ModuleLoader__.load({
     const CODE_FORM_TYPES = ['script', 'node', 'python', 'ssh', 'docker'];
 
     // Delivery channels (#26) — must stay in sync with lib/channels.js.
-    const DELIVERY_CHANNELS = ['telegram', 'kanban', 'discord', 'slack', 'ntfy', 'bark', 'pushplus', 'email', 'tts', 'gitea'];
+    const DELIVERY_CHANNELS = ['telegram', 'kanban', 'discord', 'slack', 'ntfy', 'bark', 'pushplus', 'tts', 'gitea'];
     const CHANNEL_LABEL_KEYS = {
       telegram: 'form.channelTelegram',
       kanban: 'form.channelKanban',
@@ -316,7 +343,6 @@ window.__ModuleLoader__.load({
       ntfy: 'form.channelNtfy',
       bark: 'form.channelBark',
       pushplus: 'form.channelPushplus',
-      email: 'form.channelEmail',
       tts: 'form.channelTts',
       gitea: 'form.channelGitea',
     };
@@ -327,7 +353,6 @@ window.__ModuleLoader__.load({
       { key: 'botTokenRef', labelKey: 'settings.botTokenRefLabel', placeholderKey: 'settings.botTokenRefPlaceholder', group: 'secrets' },
       { key: 'ntfyTokenRef', labelKey: 'settings.ntfyTokenRefLabel', group: 'secrets' },
       { key: 'pushplusTokenRef', labelKey: 'settings.pushplusTokenRefLabel', group: 'secrets' },
-      { key: 'smtpPasswordRef', labelKey: 'settings.smtpPasswordRefLabel', group: 'secrets' },
       { key: 'giteaTokenRef', labelKey: 'settings.giteaTokenRefLabel', group: 'secrets' },
       { key: 'discordWebhookUrl', labelKey: 'settings.discordLabel', group: 'channels' },
       { key: 'slackWebhookUrl', labelKey: 'settings.slackLabel', group: 'channels' },
@@ -336,20 +361,12 @@ window.__ModuleLoader__.load({
       { key: 'barkServerUrl', labelKey: 'settings.barkServerLabel', group: 'channels' },
       { key: 'barkKey', labelKey: 'settings.barkKeyLabel', group: 'channels' },
       { key: 'pushplusUrl', labelKey: 'settings.pushplusUrlLabel', group: 'channels' },
-      { key: 'smtpHost', labelKey: 'settings.smtpHostLabel', group: 'channels' },
-      { key: 'smtpPort', labelKey: 'settings.smtpPortLabel', group: 'channels' },
-      { key: 'smtpUser', labelKey: 'settings.smtpUserLabel', group: 'channels' },
-      { key: 'smtpFrom', labelKey: 'settings.smtpFromLabel', group: 'channels' },
-      { key: 'smtpTo', labelKey: 'settings.smtpToLabel', group: 'channels' },
       { key: 'ttsBaseUrl', labelKey: 'settings.ttsBaseUrlLabel', group: 'channels' },
       { key: 'giteaBaseUrl', labelKey: 'settings.giteaBaseUrlLabel', group: 'channels' },
       { key: 'giteaRepo', labelKey: 'settings.giteaRepoLabel', group: 'channels' },
-      { key: 'deliveryTimeoutMs', labelKey: 'settings.deliveryTimeoutMsLabel', group: 'channels', numeric: true },
+      { key: 'deliveryTimeoutMs', labelKey: 'settings.deliveryTimeoutMsLabel', group: 'channels', numeric: true, defaultValue: 15000, min: 1000 },
     ];
-    const DELIVERY_TOGGLE_FIELDS = [
-      { key: 'smtpSecure', labelKey: 'settings.smtpSecureLabel' },
-    ];
-    const DELIVERY_SETTING_KEYS = DELIVERY_SETTING_FIELDS.map((f) => f.key).concat(DELIVERY_TOGGLE_FIELDS.map((f) => f.key));
+    const DELIVERY_SETTING_KEYS = DELIVERY_SETTING_FIELDS.map((f) => f.key);
     // The global template plus the per-channel override map (server model).
     const TEMPLATE_SETTING_KEYS = ['template', 'channelTemplates'];
 
@@ -376,11 +393,16 @@ window.__ModuleLoader__.load({
         React.createElement('label', null, T(f.labelKey)),
         React.createElement('input', f.numeric ? {
           type: 'number',
-          min: 1000,
+          min: f.min !== undefined ? f.min : 1000,
           step: 1000,
           value: val(f.key),
-          placeholder: '15000',
-          onChange: (e) => onChange(f.key, e.target.value === '' ? undefined : Number(e.target.value)),
+          placeholder: String(f.defaultValue !== undefined ? f.defaultValue : 15000),
+          // #115: clearing the field must send the explicit default. Deleting the
+          // key would leave the previously stored value in place (the settings
+          // scope skips absent keys), so the field would silently keep 1 ms.
+          onChange: (e) => onChange(f.key, e.target.value === ''
+            ? (f.defaultValue !== undefined ? f.defaultValue : 15000)
+            : Number(e.target.value)),
         } : {
           type: 'text',
           value: val(f.key),
@@ -413,14 +435,6 @@ window.__ModuleLoader__.load({
           React.createElement('div', { className: 'dsh-cron-form-row', key: 'row' },
             ...DELIVERY_SETTING_FIELDS.filter((f) => f.group === 'channels').map(field)
           ),
-          ...DELIVERY_TOGGLE_FIELDS.map((f) => React.createElement('label', { className: 'dsh-cron-checkbox-row', key: f.key, style: { marginBottom: '10px' } },
-            React.createElement('input', {
-              type: 'checkbox',
-              checked: Boolean(values[f.key]),
-              onChange: (e) => onChange(f.key, e.target.checked)
-            }),
-            React.createElement('span', null, T(f.labelKey))
-          )),
         ]),
         section('templates', 'settings.templatesSection', [
           React.createElement('div', { className: 'dsh-cron-form-group', key: 'global', style: { marginBottom: '10px' } },
@@ -523,6 +537,12 @@ window.__ModuleLoader__.load({
       .dsh-cron-search-input { width: 100%; height: 36px; background: var(--dsw-alias-bg-layer-2, #1f1f1f); border: 1px solid var(--dsw-alias-border-l2, #333); border-radius: 8px; padding: 0 12px 0 38px; color: var(--dsw-alias-label-primary, inherit); font-size: 13px; outline: none; box-sizing: border-box; }
       .dsh-cron-search-input:focus { outline: none; border-color: var(--dsh-cron-info); }
       .dsh-cron-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dsw-alias-label-tertiary, #666); }
+      .dsh-cron-filters { margin-top: 8px; }
+      .dsh-cron-filter-toggle { background: none; border: 1px solid var(--dsw-alias-border-l2, #333); color: var(--dsw-alias-label-secondary, #aaa); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
+      .dsh-cron-filter-toggle:hover { color: var(--dsw-alias-label-primary, #eee); border-color: var(--dsh-cron-info); }
+      .dsh-cron-filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--dsw-alias-border-l2, #2e2e2e); border-radius: 8px; background: var(--dsw-alias-bg-layer-3, rgba(255,255,255,0.02)); }
+      .dsh-cron-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dsw-alias-label-tertiary, #888); }
+      .dsh-cron-filter-field select { background: var(--dsw-alias-bg-layer-2, #1f1f1f); border: 1px solid var(--dsw-alias-border-l2, #333); color: var(--dsw-alias-label-primary, inherit); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
       .dsh-cron-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
       .dsh-cron-tab { appearance: none; background: transparent; border: 1px solid var(--dsw-alias-border-l2, #383838); padding: 4px 12px; border-radius: 999px; color: var(--dsw-alias-label-secondary, #9ca3af); font-size: 12px; font-weight: 500; cursor: pointer; }
       .dsh-cron-tab[data-active="true"] { background: var(--dsw-alias-bg-layer-4, #2a2a2a); color: var(--dsw-alias-label-primary, #fff); border-color: var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2, #383838)); }
@@ -626,6 +646,51 @@ window.__ModuleLoader__.load({
       .dsh-cron-status-banner[data-type="info"] { background: var(--dsh-cron-info-bg); border: 1px solid var(--dsh-cron-info); color: var(--dsh-cron-info); }
       @keyframes dsh-cron-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
       .dsh-cron-pulse { animation: dsh-cron-pulse-ring 1.6s infinite; border-color: var(--dsh-cron-success); color: var(--dsh-cron-success); }
+
+      /* #34: sidebar job list */
+      .dsh-cron-sidebar-jobs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 0; }
+      .dsh-cron-sidebar-jobs-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-tertiary, #888); cursor: pointer; border-radius: 6px; text-align: left; }
+      .dsh-cron-sidebar-jobs-head:hover { color: var(--dsw-alias-label-primary, #eee); background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04)); }
+      .dsh-cron-sidebar-jobs-head::after { content: '▾'; font-size: 10px; transition: transform 0.15s ease; }
+      .dsh-cron-sidebar-jobs[data-open="false"] .dsh-cron-sidebar-jobs-head::after { transform: rotate(-90deg); }
+      .dsh-cron-sidebar-jobs[data-open="false"] .dsh-cron-sidebar-jobs-list { display: none; }
+      .dsh-cron-sidebar-jobs-list { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; }
+      .dsh-cron-sidebar-job { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: none; border: none; border-left: 2px solid transparent; padding: 3px 8px; font: inherit; cursor: pointer; border-radius: 0 6px 6px 0; text-align: left; }
+      .dsh-cron-sidebar-job:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04)); border-left-color: var(--dsh-cron-info); }
+      .dsh-cron-sidebar-job-title { font-size: 12px; color: var(--dsw-alias-label-secondary, #ccc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .dsh-cron-sidebar-job-meta { font-size: 11px; color: var(--dsw-alias-label-tertiary, #777); }
+      .dsh-cron-sidebar-empty, .dsh-cron-sidebar-more { font-size: 11px; color: var(--dsw-alias-label-tertiary, #777); padding: 2px 8px; }
+      .dsh-cron-task-highlight { border-color: var(--dsh-cron-info) !important; box-shadow: 0 0 0 2px var(--dsh-cron-info-bg); }
+
+      /* #39: narrow screens. Only layout changes — no information is hidden. */
+      @media (max-width: 900px) {
+        .dsh-cron-container { padding: 8px 12px 24px; gap: 14px; }
+        .dsh-cron-form-row { grid-template-columns: 1fr; }
+        .dsh-cron-channel-grid { grid-template-columns: 1fr; }
+        .dsh-cron-filter-panel { grid-template-columns: 1fr; }
+        .dsh-cron-modal { padding: 16px; border-radius: 12px; }
+        .dsh-cron-modal-scroll { max-height: 92vh; }
+        .dsh-cron-task-item { flex-wrap: wrap; gap: 10px; }
+        .dsh-cron-task-actions { margin-left: auto; }
+        .dsh-cron-history-list { max-height: 320px; }
+      }
+      @media (max-width: 640px) {
+        .dsh-cron-container { padding: 6px 8px 20px; }
+        .dsh-cron-top-bar { flex-wrap: wrap; gap: 8px; }
+        .dsh-cron-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
+        .dsh-cron-tab { white-space: nowrap; }
+        .dsh-cron-stats-bar { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
+        .dsh-cron-task-item { align-items: flex-start; padding: 12px; }
+        .dsh-cron-task-title { flex-wrap: wrap; row-gap: 4px; }
+        .dsh-cron-modal { padding: 14px; }
+        .dsh-cron-modal-foot { flex-direction: column-reverse; }
+        .dsh-cron-modal-foot > button { width: 100%; }
+        .dsh-cron-filter-panel { padding: 8px 10px; }
+        .dsh-cron-card { padding: 14px; }
+        /* 16px keeps iOS Safari from zooming the page when a field is focused. */
+        .dsh-cron-modal input, .dsh-cron-modal select, .dsh-cron-modal textarea,
+        .dsh-cron-card input, .dsh-cron-search-input, .dsh-cron-filter-field select { font-size: 16px; }
+      }
     `;
 
     function ensureStyles() {
@@ -722,12 +787,25 @@ window.__ModuleLoader__.load({
       const t = props.t || translate;
       const [tab, setTab] = React.useState('all');
       const [query, setQuery] = React.useState('');
+      // Facet filters (#40): applied client-side over the already-loaded list so
+      // toggling them is instant and does not touch the polling request.
+      const [filterType, setFilterType] = React.useState('');
+      const [filterModel, setFilterModel] = React.useState('');
+      const [filterChannel, setFilterChannel] = React.useState('');
+      const [filtersOpen, setFiltersOpen] = React.useState(false);
       const [tasks, setTasks] = React.useState([]);
       const [recs, setRecs] = React.useState([]);
       const [loading, setLoading] = React.useState(false);
       const [fetchError, setFetchError] = React.useState(null);
       const [dropdownOpen, setDropdownOpen] = React.useState(false);
 
+      // Export/import state (#42)
+      const [transferBusy, setTransferBusy] = React.useState(false);
+      const [importDoc, setImportDoc] = React.useState(null);
+      const [importSummary, setImportSummary] = React.useState(null);
+      const [importStrategy, setImportStrategy] = React.useState('skip');
+      const importFileRef = React.useRef(null);
+
       // Manual / Edit modal state
       const [manualModalOpen, setManualModalOpen] = React.useState(false);
       const [formId, setFormId] = React.useState(null);
@@ -824,6 +902,49 @@ window.__ModuleLoader__.load({
         return () => window.removeEventListener('keydown', onKey);
       }, [manualModalOpen, settingsModalOpen, dshModalOpen, dropdownOpen, onClose]);
 
+      /** #40: facet filtering happens client-side over the loaded list. */
+      const visibleTasks = React.useMemo(() => {        let list = tasks;
+        if (filterType) list = list.filter((x) => (x.type || 'llm') === filterType);
+        if (filterModel) list = list.filter((x) => String(x.model || '').split('/').pop() === filterModel);
+        if (filterChannel) {
+          list = list.filter((x) => {
+            const channels = Array.isArray(x.channels) && x.channels.length
+              ? x.channels
+              : [x.notifyTelegram ? 'telegram' : null, (x.kanbanMode || 'none') !== 'none' ? 'kanban' : null].filter(Boolean);
+            return channels.includes(filterChannel);
+          });
+        }
+        return list;
+      }, [tasks, filterType, filterModel, filterChannel]);
+
+      const filterTypeOptions = React.useMemo(
+        () => Array.from(new Set(tasks.map((x) => x.type || 'llm'))).sort(),
+        [tasks]
+      );
+
+      const filterModelOptions = React.useMemo(
+        () => Array.from(new Set(tasks.map((x) => String(x.model || '').split('/').pop()).filter(Boolean))).sort(),
+        [tasks]
+      );
+
+      const resetFilters = () => {
+        setFilterType('');
+        setFilterModel('');
+        setFilterChannel('');
+      };
+
+      /** #34: scroll to and flash the task the sidebar list asked for. */
+      React.useEffect(() => {
+        if (!pendingTaskHighlight || tasks.length === 0) return;
+        const id = pendingTaskHighlight;
+        pendingTaskHighlight = null;
+        const node = document.querySelector('[data-task-id="' + id + '"]');
+        if (!node) return;
+        if (typeof node.scrollIntoView === 'function') node.scrollIntoView({ block: 'center' });
+        node.classList.add('dsh-cron-task-highlight');
+        setTimeout(() => { try { node.classList.remove('dsh-cron-task-highlight'); } catch (_) {} }, 2500);
+      }, [tasks]);
+
       const fetchTasks = async () => {
         setLoading(true);
         setFetchError(null);
@@ -868,8 +989,7 @@ window.__ModuleLoader__.load({
 
       React.useEffect(() => {
         fetchTasks();
-        const pollInterval = setInterval(() => {
-          // Background polling without resetting loading spinner
+        const pollInterval = setInterval(() => {          // Background polling without resetting loading spinner
           fetch('/dsh-cron/tasks?status=' + encodeURIComponent(tab) + '&query=' + encodeURIComponent(query))
             .then(res => res.json())
             .then(data => {
@@ -902,13 +1022,128 @@ window.__ModuleLoader__.load({
         }
       };
 
+      /** #41: duplicate a task; the server copies config, resets run state (#41). */
+      const handleDuplicate = async (task) => {
+        try {
+          const res = await fetch('/dsh-cron/tasks/' + encodeURIComponent(task.id) + '/duplicate', { method: 'POST' });
+          const data = await res.json();
+          if (!data.ok) {
+            alert(T_KEY(t, 'duplicate.failed', { error: (data && data.error) || '' }));
+            return;
+          }
+          await fetchTasks();
+          // A one-shot copy keeps its original schedule string, so warn instead
+          // of letting the user resume a task pointing at a past moment.
+          alert(task.oneShot ? T_KEY(t, 'duplicate.oneShotHint') : T_KEY(t, 'duplicate.done'));
+        } catch (err) {
+          alert(T_KEY(t, 'duplicate.failed', { error: err.message }));
+        }
+      };
+
+      /** A task id must not shadow a collection route (#42 review finding). */
+      const RESERVED_TASK_IDS = ['export', 'import'];
+
+      /** Import needs the script-confirm header when the file has code tasks. */
+      const importHeaders = (document_) => {
+        const headers = { 'Content-Type': 'application/json' };
+        const tasks = (document_ && Array.isArray(document_.tasks)) ? document_.tasks : [];
+        if (tasks.some((x) => CODE_FORM_TYPES.includes(x && x.type))) headers[SCRIPT_CONFIRM_HEADER] = 'script';
+        return headers;
+      };
+
+      /** #42: download the task configuration as a JSON file. */
+      const handleExport = async () => {
+        setTransferBusy(true);
+        try {
+          const res = await fetch('/dsh-cron/tasks/export');
+          const data = await res.json();
+          if (!data.ok) {
+            alert(T_KEY(t, 'transfer.exportFailed', { error: (data && data.error) || '' }));
+            return;
+          }
+          const blob = new Blob([JSON.stringify(data.document, null, 2)], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+          const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
+          const anchor = document.createElement('a');
+          anchor.href = url;
+          anchor.download = `dsh-cron-tasks-${stamp}.json`;
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          setTimeout(() => URL.revokeObjectURL(url), 1000);
+          alert(T_KEY(t, 'transfer.exported', { count: data.count }));
+        } catch (err) {
+          alert(T_KEY(t, 'transfer.exportFailed', { error: err.message }));
+        } finally {
+          setTransferBusy(false);
+        }
+      };
+
+      /** #42: read the picked file, validate it server-side and show the plan. */
+      const handleImportFile = async (e) => {
+        const file = e.target.files && e.target.files[0];
+        e.target.value = '';
+        if (!file) return;
+        setTransferBusy(true);
+        try {
+          const text = await file.text();
+          let document_;
+          try {
+            document_ = JSON.parse(text);
+          } catch (parseErr) {
+            alert(T_KEY(t, 'transfer.badFile', { error: parseErr.message }));
+            return;
+          }
+          const res = await fetch('/dsh-cron/tasks/import', {
+            method: 'POST',
+            headers: importHeaders(document_),
+            body: JSON.stringify({ document: document_, dryRun: true, strategy: importStrategy })
+          });
+          const data = await res.json();
+          if (!data.ok) {
+            alert(T_KEY(t, 'transfer.importFailed', { error: (data && data.error) || '' }));
+            return;
+          }
+          setImportDoc(document_);
+          setImportSummary(data.summary);
+        } catch (err) {
+          alert(T_KEY(t, 'transfer.importFailed', { error: err.message }));
+        } finally {
+          setTransferBusy(false);
+        }
+      };
+
+      const handleImportConfirm = async () => {
+        if (!importDoc) return;
+        setTransferBusy(true);
+        try {
+          const res = await fetch('/dsh-cron/tasks/import', {
+            method: 'POST',
+            headers: importHeaders(importDoc),
+            body: JSON.stringify({ document: importDoc, strategy: importStrategy })
+          });
+          const data = await res.json();
+          if (!data.ok) {
+            alert(T_KEY(t, 'transfer.importFailed', { error: (data && data.error) || '' }));
+            return;
+          }
+          setImportDoc(null);
+          setImportSummary(null);
+          await fetchTasks();
+          alert(T_KEY(t, 'transfer.imported', { count: data.imported }));
+        } catch (err) {
+          alert(T_KEY(t, 'transfer.importFailed', { error: err.message }));
+        } finally {
+          setTransferBusy(false);
+        }
+      };
+
       const handleDelete = async (id) => {
         if (!confirm(T_KEY(t, 'confirm.delete'))) return;
         try {
           await fetch('/dsh-cron/tasks/' + encodeURIComponent(id), { method: 'DELETE' });
           fetchTasks();
-        } catch (err) {}
-      };
+        } catch (err) {}      };
 
       const openSettingsModal = async () => {
         setTestStatus(null);
@@ -1259,7 +1494,31 @@ window.__ModuleLoader__.load({
                   React.createElement('button', { className: 'dsh-cron-dropdown-item', onClick: openDshModal }, T_KEY(t, 'actions.createWithDsh')),
                   React.createElement('button', { className: 'dsh-cron-dropdown-item', onClick: () => openManualModal(null) }, T_KEY(t, 'actions.setupManually'))
                 )
-              )
+              ),
+              // #42: export/import as a small pair of icon buttons.
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-icon-btn',
+                title: T_KEY(t, 'transfer.exportTitle'),
+                'aria-label': T_KEY(t, 'transfer.exportTitle'),
+                disabled: transferBusy,
+                onClick: handleExport
+              }, React.createElement('span', svgProps(ICON_DOWNLOAD))),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-icon-btn',
+                title: T_KEY(t, 'transfer.importTitle'),
+                'aria-label': T_KEY(t, 'transfer.importTitle'),
+                disabled: transferBusy,
+                onClick: () => { if (importFileRef.current) importFileRef.current.click(); }
+              }, React.createElement('span', svgProps(ICON_UPLOAD))),
+              React.createElement('input', {
+                type: 'file',
+                accept: '.json,application/json',
+                ref: importFileRef,
+                style: { display: 'none' },
+                onChange: handleImportFile
+              })
             )
           ),
           React.createElement('div', { className: 'dsh-cron-search-bar' },
@@ -1305,6 +1564,50 @@ window.__ModuleLoader__.load({
                       : T_KEY(t, 'tabs.completed'))
             )
           ),
+          // #40: facet filters over the loaded list.
+          React.createElement('div', { className: 'dsh-cron-filters' },
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-filter-toggle',
+              'aria-expanded': filtersOpen ? 'true' : 'false',
+              onClick: () => setFiltersOpen(!filtersOpen)
+            },
+              T_KEY(t, 'filters.title'),
+              (filterType || filterModel || filterChannel) ? ' •' : ''
+            ),
+            filtersOpen && React.createElement('div', { className: 'dsh-cron-filter-panel' },
+              React.createElement('label', { className: 'dsh-cron-filter-field' },
+                React.createElement('span', null, T_KEY(t, 'filters.type')),
+                React.createElement('select', {
+                  value: filterType,
+                  onChange: (e) => setFilterType(e.target.value)
+                },
+                  React.createElement('option', { value: '' }, T_KEY(t, 'filters.any')),
+                  ...filterTypeOptions.map((value) => React.createElement('option', { key: value, value }, value))
+                )
+              ),
+              React.createElement('label', { className: 'dsh-cron-filter-field' },
+                React.createElement('span', null, T_KEY(t, 'filters.model')),
+                React.createElement('select', {
+                  value: filterModel,
+                  onChange: (e) => setFilterModel(e.target.value)
+                },
+                  React.createElement('option', { value: '' }, T_KEY(t, 'filters.any')),
+                  ...filterModelOptions.map((value) => React.createElement('option', { key: value, value }, value))
+                )
+              ),
+              React.createElement('label', { className: 'dsh-cron-filter-field' },
+                React.createElement('span', null, T_KEY(t, 'filters.channel')),
+                React.createElement('select', {
+                  value: filterChannel,
+                  onChange: (e) => setFilterChannel(e.target.value)
+                },
+                  React.createElement('option', { value: '' }, T_KEY(t, 'filters.any')),
+                  ...DELIVERY_CHANNELS.map((id) => React.createElement('option', { key: id, value: id }, T_KEY(t, CHANNEL_LABEL_KEYS[id])))
+                )
+              )
+            )
+          ),
           fetchError ? React.createElement('div', {
             className: 'dsh-cron-status-banner',
             'data-type': 'error',
@@ -1318,15 +1621,38 @@ window.__ModuleLoader__.load({
               onClick: () => fetchTasks()
             }, T_KEY(t, 'banner.retry'))
           ) : null,
+          (filterType || filterModel || filterChannel) ? React.createElement('div', {
+            className: 'dsh-cron-filter-summary',
+            style: { fontSize: '12px', color: 'var(--dsw-alias-label-tertiary, #888)', marginBottom: '8px', display: 'flex', gap: '8px', alignItems: 'center' }
+          },
+            React.createElement('span', null, T_KEY(t, 'filters.showing', { shown: visibleTasks.length, total: tasks.length })),
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-secondary',
+              style: { padding: '2px 8px', fontSize: '11px' },
+              onClick: resetFilters
+            }, T_KEY(t, 'filters.reset'))
+          ) : null,
           React.createElement('div', { className: 'dsh-cron-task-list' },
             loading && tasks.length === 0
               ? React.createElement('div', { style: { color: 'var(--dsw-alias-label-tertiary, #888)', padding: '16px 0', fontSize: '14px' } }, T_KEY(t, 'list.loading'))
               : tasks.length === 0
                 ? React.createElement('div', { style: { color: 'var(--dsw-alias-label-tertiary, #777)', padding: '16px 0', fontSize: '14px' } }, T_KEY(t, 'list.empty'))
-                : tasks.map((task) =>
+                : visibleTasks.length === 0
+                  ? React.createElement('div', { style: { color: 'var(--dsw-alias-label-tertiary, #777)', padding: '16px 0', fontSize: '14px', display: 'flex', gap: '10px', alignItems: 'center' } },
+                      React.createElement('span', null, T_KEY(t, 'filters.empty')),
+                      React.createElement('button', {
+                        type: 'button',
+                        className: 'dsh-cron-btn-secondary',
+                        style: { padding: '2px 8px', fontSize: '12px' },
+                        onClick: resetFilters
+                      }, T_KEY(t, 'filters.reset'))
+                    )
+                  : visibleTasks.map((task) =>
                   React.createElement('div', {
                     key: task.id,
                     className: 'dsh-cron-task-item',
+                    'data-task-id': task.id,
                     role: 'button',
                     tabIndex: 0,
                     'aria-label': task.title,
@@ -1389,6 +1715,13 @@ window.__ModuleLoader__.load({
                         'aria-label': T_KEY(t, 'actions.edit'),
                         onClick: () => openEditModal(task)
                       }, React.createElement('span', svgProps(ICON_EDIT))),
+                      React.createElement('button', {
+                        type: 'button',
+                        className: 'dsh-cron-icon-btn',
+                        title: T_KEY(t, 'actions.duplicate'),
+                        'aria-label': T_KEY(t, 'actions.duplicate'),
+                        onClick: () => handleDuplicate(task)
+                      }, React.createElement('span', svgProps(ICON_COPY))),
                       React.createElement('button', {
                         type: 'button',
                         className: 'dsh-cron-icon-btn dsh-cron-danger',
@@ -2003,7 +2336,50 @@ window.__ModuleLoader__.load({
           )
         ),
 
-        // 3. "Create with DSH" modal
+        // 3. Import modal (#42) — summary first, then an explicit strategy.
+        importDoc && React.createElement('div', { className: 'dsh-cron-modal-overlay', onClick: () => !transferBusy && setImportDoc(null) },
+          React.createElement('div', { className: 'dsh-cron-modal', role: 'dialog', 'aria-modal': 'true', onClick: (e) => e.stopPropagation() },
+            React.createElement('div', { className: 'dsh-cron-modal-title' }, T_KEY(t, 'transfer.importTitleModal')),
+            React.createElement('div', { className: 'dsh-cron-hint', style: { marginBottom: '10px' } }, T_KEY(t, 'transfer.importHint')),
+            importSummary && React.createElement('div', null,
+              React.createElement('div', { style: { fontSize: '13px', marginBottom: '12px' } },
+                T_KEY(t, 'transfer.summary', {
+                  total: (importSummary.add || 0) + (importSummary.replace || 0) + (importSummary.skip || 0),
+                  add: importSummary.add || 0,
+                  replace: importSummary.replace || 0,
+                  skip: importSummary.skip || 0
+                })
+              ),
+              React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '14px' } },
+                ...['add', 'replace', 'skip'].map((mode) => React.createElement('label', { key: mode, className: 'dsh-cron-checkbox-row' },
+                  React.createElement('input', {
+                    type: 'radio',
+                    name: 'dsh-cron-import-strategy',
+                    checked: importStrategy === mode,
+                    onChange: () => setImportStrategy(mode)
+                  }),
+                  React.createElement('span', null, T_KEY(t, mode === 'add' ? 'transfer.strategyAdd' : mode === 'replace' ? 'transfer.strategyReplace' : 'transfer.strategySkip'))
+                ))
+              )
+            ),
+            React.createElement('div', { className: 'dsh-cron-modal-foot' },
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                disabled: transferBusy,
+                onClick: () => setImportDoc(null)
+              }, T_KEY(t, 'modal.cancel')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-primary',
+                disabled: transferBusy || !importSummary,
+                onClick: handleImportConfirm
+              }, T_KEY(t, 'transfer.confirm'))
+            )
+          )
+        ),
+
+        // 4. "Create with DSH" modal
         dshModalOpen && React.createElement('div', { className: 'dsh-cron-modal-overlay', onClick: () => !dshLoading && setDshModalOpen(false) },
           React.createElement('div', { className: 'dsh-cron-modal', role: 'dialog', 'aria-modal': 'true', onClick: (e) => e.stopPropagation() },
             React.createElement('div', { className: 'dsh-cron-modal-title' }, T_KEY(t, 'dsh.modalTitle')),
@@ -2322,6 +2698,162 @@ window.__ModuleLoader__.load({
       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. */
+    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 = await fetch('/dsh-cron/tasks?status=active');
+        const data = await res.json();
+        if (data && data.ok) renderSidebarJobs(state, data.tasks || []);
+      } catch (_) {}
+    }
+
+    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 (_) {}
+        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 (_) {}
+
+      const observer = new MutationObserver(() => placeSidebarJobs(state, label));
+      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 (_) {}
+        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;
@@ -2504,6 +3036,7 @@ window.__ModuleLoader__.load({
       ctx.effect(() => {
         const off = [
           mountSidebarEntry(toggle, translate('sidebar.label')),
+          mountSidebarJobs(toggle, translate('sidebar.jobsTitle'), (taskId) => { pendingTaskHighlight = taskId; }),
           mountCronScreen(ctx, toggle)
         ];
         return () => { for (const dispose of off) dispose(); };