@goodandready/dsh-cron 0.3.24 → 0.3.26

package/lib/client-src/50-cron-screen-state.js

@@ -0,0 +1,447 @@
+    function CronScreen(props) {
+      const { ctx, toggle, onClose } = props;
+      const t = props.t || translate;
+      const [isOpen, setIsOpen] = React.useState(toggle && typeof toggle.isOpen === 'function' ? toggle.isOpen() : true);
+      React.useEffect(() => {
+        if (!toggle || typeof toggle.subscribe !== 'function') return;
+        return toggle.subscribe((val) => setIsOpen(val));
+      }, [toggle]);
+      if (!isOpen) return null;
+      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);
+      const [formTitle, setFormTitle] = React.useState('');
+      const [formSchedule, setFormSchedule] = React.useState('');
+      const [formType, setFormType] = React.useState('llm');
+      const [formPrompt, setFormPrompt] = React.useState('');
+      const [formProvider, setFormProvider] = React.useState('');
+      const [formModel, setFormModel] = React.useState('');
+      const [formFallbackModel, setFormFallbackModel] = React.useState('');
+      const [formSilentRule, setFormSilentRule] = React.useState('');
+      const [formInspectOnFailure, setFormInspectOnFailure] = React.useState(false);
+      const [formRequireApproval, setFormRequireApproval] = React.useState(false);
+      const [formDelivery, setFormDelivery] = React.useState('isolated');
+      const [selectedTaskMeta, setSelectedTaskMeta] = React.useState(null);
+      const [modalTab, setModalTab] = React.useState('params');
+      const [taskHistory, setTaskHistory] = React.useState([]);
+      const [historyLoading, setHistoryLoading] = React.useState(false);
+      const [retryingDeliveryId, setRetryingDeliveryId] = React.useState(null);
+      const [formNotifyTelegram, setFormNotifyTelegram] = React.useState(false);
+      const [formChannels, setFormChannels] = React.useState([]);
+      const [formTemplate, setFormTemplate] = React.useState('');
+      const [formOnlyOnFailure, setFormOnlyOnFailure] = React.useState(false);
+      const [formTimeoutSeconds, setFormTimeoutSeconds] = React.useState(1800);
+      const [formOverlapPolicy, setFormOverlapPolicy] = React.useState('skip');
+      const [formKanbanMode, setFormKanbanMode] = React.useState('none');
+      const [formOnSuccess, setFormOnSuccess] = React.useState('');
+      const [formOnFailure, setFormOnFailure] = React.useState('');
+      const [formDependsOn, setFormDependsOn] = React.useState('');
+      const [formJoinPolicy, setFormJoinPolicy] = React.useState('all_success');
+      const [formElseTask, setFormElseTask] = React.useState('');
+      const [formAutoHeal, setFormAutoHeal] = React.useState(false);
+      // Adaptive polling state (#329)
+      const [formAdaptiveEnabled, setFormAdaptiveEnabled] = React.useState(false);
+      const [formAdaptiveMinInterval, setFormAdaptiveMinInterval] = React.useState('5m');
+      const [formAdaptiveMaxInterval, setFormAdaptiveMaxInterval] = React.useState('2h');
+      const [formAdaptiveBackoffFactor, setFormAdaptiveBackoffFactor] = React.useState('1.5');
+      const [formAdaptiveIdleThreshold, setFormAdaptiveIdleThreshold] = React.useState('3');
+
+      // Live Logs state (#336)
+      const [liveLogsModalOpen, setLiveLogsModalOpen] = React.useState(false);
+      const [liveLogsTaskId, setLiveLogsTaskId] = React.useState('');
+      const [liveLogsTaskTitle, setLiveLogsTaskTitle] = React.useState('');
+      const [liveLogsLines, setLiveLogsLines] = React.useState([]);
+      const [liveLogsStatus, setLiveLogsStatus] = React.useState('idle');
+      const [liveLogsCompleted, setLiveLogsCompleted] = React.useState(false);
+      const [liveLogsAutoScroll, setLiveLogsAutoScroll] = React.useState(true);
+      const [chainGraphModalOpen, setChainGraphModalOpen] = React.useState(false);
+      const [chainGraphData, setChainGraphData] = React.useState(null);
+      const [chainGraphLoading, setChainGraphLoading] = React.useState(false);
+      const [chainGraphRunId, setChainGraphRunId] = React.useState(null);
+      // Analytics Digest state (#330, GH #8)
+      const [digestOpen, setDigestOpen] = React.useState(false);
+      const [digestData, setDigestData] = React.useState(null);
+      const [digestMarkdown, setDigestMarkdown] = React.useState('');
+      const [digestLoading, setDigestLoading] = React.useState(false);
+      const [periodDays, setPeriodDays] = React.useState(7);
+      const [sendStatus, setSendStatus] = React.useState(null);
+
+      // Timeline & Cost Heatmap state (#332, #333, GH #8)
+      const [timelineOpen, setTimelineOpen] = React.useState(false);
+      const [timelineData, setTimelineData] = React.useState(null);
+      const [heatmapData, setHeatmapData] = React.useState(null);
+      const [timelineLoading, setTimelineLoading] = React.useState(false);
+      const [timelineTab, setTimelineTab] = React.useState('timeline');
+
+      const [formHeartbeatIntervalSeconds, setFormHeartbeatIntervalSeconds] = React.useState(0);
+      const [formGracePeriodSeconds, setFormGracePeriodSeconds] = React.useState(300);
+      const [formPreflightType, setFormPreflightType] = React.useState('none');
+      const [formPreflightTarget, setFormPreflightTarget] = React.useState('');
+      const [formPriority, setFormPriority] = React.useState(5);
+      const [formConcurrencyGroup, setFormConcurrencyGroup] = React.useState('default');
+      const [formSelfHealingCommand, setFormSelfHealingCommand] = React.useState('');
+      const [formAutoDiagnose, setFormAutoDiagnose] = React.useState(false);
+      const [schedulePreviewRuns, setSchedulePreviewRuns] = React.useState(null);
+      const [dryRunResult, setDryRunResult] = React.useState(null);
+      const [archiveModalOpen, setArchiveModalOpen] = React.useState(false);
+      const [archiveTask, setArchiveTask] = React.useState(null);
+      const [archiveRuns, setArchiveRuns] = React.useState([]);
+      const [archiveLoading, setArchiveLoading] = React.useState(false);
+      const [archiveOffset, setArchiveOffset] = React.useState(0);
+      const [archiveTotal, setArchiveTotal] = React.useState(0);
+      const [formTimezone, setFormTimezone] = React.useState('');
+      const [formMisfirePolicy, setFormMisfirePolicy] = React.useState('skip');
+      const [formMaxRetries, setFormMaxRetries] = React.useState(0);
+      const [formPermissionPreset, setFormPermissionPreset] = React.useState('default');
+      const [formAgentPreset, setFormAgentPreset] = React.useState('');
+      const [formSessionTitle, setFormSessionTitle] = React.useState('');
+      const [formTargetSessionId, setFormTargetSessionId] = React.useState('');
+      const [formTargetSessionReset, setFormTargetSessionReset] = React.useState('never');
+      const [formEnv, setFormEnv] = React.useState('');
+      const [formCwd, setFormCwd] = React.useState('');
+      const [formWorkspaceId, setFormWorkspaceId] = React.useState('');
+      const [formWorktree, setFormWorktree] = React.useState(false);
+      const [formKeepWorktree, setFormKeepWorktree] = React.useState(false);
+      const [formCaptureGitDiff, setFormCaptureGitDiff] = React.useState(false);
+      const [formHttpMethod, setFormHttpMethod] = React.useState('GET');
+      const [formHttpUrl, setFormHttpUrl] = React.useState('');
+      const [formHttpHeaders, setFormHttpHeaders] = React.useState('');
+      const [formHttpBody, setFormHttpBody] = React.useState('');
+      const [formSshProfileId, setFormSshProfileId] = React.useState('');
+      const [formSshTarget, setFormSshTarget] = React.useState('');
+      const [formSshKeyPath, setFormSshKeyPath] = React.useState('');
+      const [formDockerImage, setFormDockerImage] = React.useState('');
+      const [formNodePath, setFormNodePath] = React.useState('');
+      const [formPythonPath, setFormPythonPath] = React.useState('');
+      const [formSkillName, setFormSkillName] = React.useState('');
+      const [formWorkflowName, setFormWorkflowName] = React.useState('');
+      const [stats, setStats] = React.useState(null);
+
+      const initialFormSnapshotRef = React.useRef(null);
+
+      const getFormSnapshot = () => JSON.stringify({
+        title: String(formTitle || '').trim(),
+        schedule: String(formSchedule || '').trim(),
+        type: String(formType || 'llm'),
+        prompt: String(formPrompt || '').trim(),
+        provider: String(formProvider || ''),
+        model: String(formModel || ''),
+        fallbackModel: String(formFallbackModel || ''),
+        silentRule: String(formSilentRule || ''),
+        inspectOnFailure: Boolean(formInspectOnFailure),
+        requireApproval: Boolean(formRequireApproval),
+        delivery: String(formDelivery || 'isolated'),
+        notifyTelegram: Boolean(formNotifyTelegram),
+        channels: Array.isArray(formChannels) ? [...formChannels].sort() : [],
+        template: String(formTemplate || '').trim(),
+        onlyOnFailure: Boolean(formOnlyOnFailure),
+        timeoutSeconds: Number(formTimeoutSeconds) || 1800,
+        overlapPolicy: String(formOverlapPolicy || 'skip'),
+        kanbanMode: String(formKanbanMode || 'none'),
+        onSuccess: String(formOnSuccess || '').trim(),
+        onFailure: String(formOnFailure || '').trim(),
+        heartbeatIntervalSeconds: Number(formHeartbeatIntervalSeconds) || 0,
+        gracePeriodSeconds: Number(formGracePeriodSeconds) || 300,
+        preflightType: String(formPreflightType || 'none'),
+        preflightTarget: String(formPreflightTarget || '').trim(),
+        priority: Number(formPriority) || 5,
+        concurrencyGroup: String(formConcurrencyGroup || 'default').trim(),
+        selfHealingCommand: String(formSelfHealingCommand || '').trim(),
+        autoDiagnose: Boolean(formAutoDiagnose),
+        timezone: String(formTimezone || '').trim(),
+        misfirePolicy: String(formMisfirePolicy || 'skip'),
+        maxRetries: Number(formMaxRetries) || 0,
+        permissionPreset: String(formPermissionPreset || 'default'),
+        agentPreset: String(formAgentPreset || '').trim(),
+        targetSessionId: String(formTargetSessionId || '').trim(),
+        targetSessionReset: String(formTargetSessionReset || 'never'),
+        env: String(formEnv || '').trim(),
+        cwd: String(formCwd || '').trim(),
+        workspaceId: String(formWorkspaceId || '').trim(),
+        worktree: Boolean(formWorktree),
+        keepWorktree: Boolean(formKeepWorktree),
+        captureGitDiff: Boolean(formCaptureGitDiff),
+        httpMethod: String(formHttpMethod || 'GET'),
+        httpUrl: String(formHttpUrl || '').trim(),
+        httpHttpHeaders: String(formHttpHeaders || '').trim(),
+        httpBody: String(formHttpBody || '').trim(),
+        sshProfileId: String(formSshProfileId || '').trim(),
+        sshTarget: String(formSshTarget || '').trim(),
+        sshKeyPath: String(formSshKeyPath || '').trim(),
+        dockerImage: String(formDockerImage || '').trim(),
+        nodePath: String(formNodePath || '').trim(),
+        pythonPath: String(formPythonPath || '').trim(),
+        skillName: String(formSkillName || '').trim(),
+        workflowName: String(formWorkflowName || '').trim(),
+      });
+
+      const isFormDirty = () => {
+        if (!manualModalOpen) return false;
+        if (initialFormSnapshotRef.current !== null) {
+          return getFormSnapshot() !== initialFormSnapshotRef.current;
+        }
+        return Boolean(formTitle.trim() || formPrompt.trim());
+      };
+
+      const closeManualModalWithConfirm = () => {
+        if (isFormDirty()) {
+          if (!confirm(T_KEY(t, 'modal.confirmDiscard') || 'Discard unsaved changes?')) {
+            return;
+          }
+        }
+        initialFormSnapshotRef.current = null;
+        setManualModalOpen(false);
+      };
+
+      // Live execution indicator (#35): a light 1s tick only while some task
+      // is actually running.
+      const tasksRef = React.useRef([]);
+      const [nowTick, setNowTick] = React.useState(0);
+      React.useEffect(() => {
+        tasksRef.current = tasks;
+      }, [tasks]);
+      React.useEffect(() => {
+        const tick = setInterval(() => {
+          if (tasksRef.current.some((t2) => t2.running)) setNowTick((v) => v + 1);
+        }, 1000);
+        return () => clearInterval(tick);
+      }, []);
+
+      // Settings modal state
+      const [settingsModalOpen, setSettingsModalOpen] = React.useState(false);
+      const [settingsBotToken, setSettingsBotToken] = React.useState('');
+      const [settingsChatId, setSettingsChatId] = React.useState('');
+      const [settingsNotifyGlobal, setSettingsNotifyGlobal] = React.useState(false);
+      const [settingsOnlyOnFailureGlobal, setSettingsOnlyOnFailureGlobal] = React.useState(false);
+      const [settingsKanbanUrl, setSettingsKanbanUrl] = React.useState('http://127.0.0.1:3000');
+      const [settingsDelivery, setSettingsDelivery] = React.useState({});
+      const [settingsSections, setSettingsSections] = React.useState({ channels: true });
+      const [settingsHasDefault, setSettingsHasDefault] = React.useState(false);
+      const [settingsHasCustomBotToken, setSettingsHasCustomBotToken] = React.useState(false);
+      const [testStatus, setTestStatus] = React.useState(null);
+
+      // DSH dialog state
+      const [dshModalOpen, setDshModalOpen] = React.useState(false);
+      const [dshPrompt, setDshPrompt] = React.useState('');
+      const [dshLoading, setDshLoading] = React.useState(false);
+
+      // Models list state
+      const [providers, setProviders] = React.useState([]);
+      const [models, setModels] = React.useState([]);
+      const [defaultModelInfo, setDefaultModelInfo] = React.useState(null);
+
+      React.useEffect(() => {
+        const onKey = (e) => {
+          if (e.key === 'Escape') {
+            if (dropdownOpen) { setDropdownOpen(false); return; }
+            if (manualModalOpen) { closeManualModalWithConfirm(); return; }
+            if (settingsModalOpen) { setSettingsModalOpen(false); return; }
+            if (dshModalOpen && !dshLoading) { setDshModalOpen(false); return; }
+            if (onClose) onClose();
+            else toggle.set(false);
+          }
+        };
+        window.addEventListener('keydown', onKey);
+        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 (err) { /* node unmounted */ } }, 2500);
+      }, [tasks]);
+
+      const fetchGenRef = React.useRef(0);
+
+      const fetchTasks = async () => {
+        const gen = ++fetchGenRef.current;
+        setLoading(true);
+        setFetchError(null);
+        const controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+        const timer = controller ? setTimeout(() => controller.abort(), 15000) : null;
+        try {
+          const res = await fetch('/dsh-cron/tasks?status=' + encodeURIComponent(tab) + '&query=' + encodeURIComponent(query), {
+            signal: controller ? controller.signal : undefined,
+          });
+          const data = await res.json();
+          if (gen !== fetchGenRef.current) return;
+          if (data && data.ok) {
+            setTasks(data.tasks || []);
+            setRecs(data.recommendations || []);
+            setStats(data.stats || null);
+          } else {
+            setFetchError(data && data.error ? data.error : T_KEY(t, 'list.loadErrorPrefix'));
+          }
+        } catch (err) {
+          if (gen !== fetchGenRef.current) return;
+          console.error('[dsh-cron] fetch tasks error:', err);
+          setFetchError(err.message || T_KEY(t, 'list.loadErrorPrefix'));
+        } finally {
+          if (timer) clearTimeout(timer);
+          if (gen === fetchGenRef.current) {
+            setLoading(false);
+          }
+        }
+      };
+
+      const loadModels = async (providerName) => {
+        const controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+        const timer = controller ? setTimeout(() => controller.abort(), 15000) : null;
+        try {
+          const url = providerName ? '/dsh-cron/models?provider=' + encodeURIComponent(providerName) : '/dsh-cron/models';
+          const res = await fetch(url, { signal: controller ? controller.signal : undefined });
+          const data = await res.json();
+          if (data && data.ok) {
+            if (!providerName) {
+              setProviders(data.providers || []);
+              setDefaultModelInfo(data.defaultModel || data.current || null);
+              if (data.defaultModel?.models) {
+                setModels(data.defaultModel.models);
+              }
+            } else {
+              setModels(data.models || []);
+            }
+          }
+        } catch (err) {
+          console.error('[dsh-cron] load models error:', err);
+        } finally {
+          if (timer) clearTimeout(timer);
+        }
+      };
+
+      const lastEtagRef = React.useRef('');
+
+      React.useEffect(() => {
+        fetchTasks();
+
+        let timerId = null;
+        let isDestroyed = false;
+        let pollController = null;
+
+        const doPoll = () => {
+          if (isDestroyed) return;
+          const pollGen = ++fetchGenRef.current;
+          const headers = {};
+          if (lastEtagRef.current) headers['If-None-Match'] = lastEtagRef.current;
+
+          if (pollController) pollController.abort();
+          pollController = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+
+          const fetchOpts = { headers };
+          if (pollController) fetchOpts.signal = pollController.signal;
+
+          const pollTimer = pollController ? setTimeout(() => { try { pollController.abort(); } catch (abortErr) { void abortErr; } }, 15000) : null;
+          fetch('/dsh-cron/tasks?status=' + encodeURIComponent(tab) + '&query=' + encodeURIComponent(query), fetchOpts)
+            .then(res => {
+              if (isDestroyed || pollGen !== fetchGenRef.current) return null;
+              if (res.status === 304) {
+                // Not modified: skip parsing JSON
+                return null;
+              }
+              const etag = res.headers.get('ETag');
+              if (etag) lastEtagRef.current = etag;
+              return res.json();
+            })
+            .then(data => {
+              if (isDestroyed || pollGen !== fetchGenRef.current) return;
+              if (data && data.ok) {
+                setTasks(data.tasks || []);
+                setRecs(data.recommendations || []);
+                setStats(data.stats || null);
+              }
+            })
+            .catch(err => {
+              if (err && err.name === 'AbortError') return;
+            })
+            .finally(() => {
+              if (pollTimer) clearTimeout(pollTimer);
+              if (isDestroyed) return;
+              // Adaptive interval: 30s when tab is hidden, 8s when active (#134)
+              const intervalMs = (typeof document !== 'undefined' && document.hidden) ? 30000 : 8000;
+              timerId = setTimeout(doPoll, intervalMs);
+            });
+        };
+
+        // Trigger immediate fetch when visibility returns
+        const onVisibilityChange = () => {
+          if (typeof document !== 'undefined' && !document.hidden) {
+            if (timerId) clearTimeout(timerId);
+            doPoll();
+          }
+        };
+
+        if (typeof document !== 'undefined') {
+          document.addEventListener('visibilitychange', onVisibilityChange);
+        }
+
+        timerId = setTimeout(doPoll, 8000);
+
+        return () => {
+          isDestroyed = true;
+          if (timerId) clearTimeout(timerId);
+          if (pollController) pollController.abort();
+          if (typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+          }
+        };
+      }, [tab, query]);
+      React.useEffect(() => { loadModels(); }, []);
+