@goodandready/dsh-cron 0.3.24 → 0.3.26

package/lib/client-src/46-live-logs-modal.js

@@ -0,0 +1,108 @@
+    /**
+     * Real-time Task Execution Log Streaming Modal (SSE) (#336)
+     * Terminal console with live chunk append, auto-scroll, status indicator, and disconnect.
+     * Complies with Audit #203 (zero 6-digit hex colors, use theme variables or 3-digit hex).
+     */
+    function renderLiveLogsModal({ isOpen, onClose, taskId, taskTitle, logs, autoScroll, onToggleAutoScroll, completed, status, t }) {
+      if (!isOpen) return null;
+
+      const terminalRef = (el) => {
+        if (el && autoScroll) {
+          el.scrollTop = el.scrollHeight;
+        }
+      };
+
+      const isLive = status === 'running' || status === 'connecting';
+      const statusColor = isLive ? 'var(--dsh-cron-success, #2a2)' : (status === 'completed' ? 'var(--dsw-alias-label-secondary, #888)' : 'var(--dsh-cron-danger, #e33)');
+
+      return React.createElement('div', {
+        className: 'dsh-cron-modal-overlay',
+        onClick: onClose
+      },
+        React.createElement('div', {
+          className: 'dsh-cron-modal',
+          style: { maxWidth: '860px', width: '92vw', height: '80vh', display: 'flex', flexDirection: 'column', background: 'var(--dsw-alias-bg-base, #111)', color: 'var(--dsw-alias-label-primary, #ddd)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '8px' },
+          role: 'dialog',
+          'aria-modal': 'true',
+          onClick: (e) => e.stopPropagation()
+        },
+          // Header
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
+              React.createElement('span', { style: { fontSize: '18px' } }, '📺'),
+              React.createElement('div', null,
+                React.createElement('div', { style: { fontWeight: '600', fontSize: '14px', color: 'var(--dsw-alias-label-primary, #fff)', display: 'flex', alignItems: 'center', gap: '8px' } },
+                  T_KEY(t, 'liveLog.modalTitle'),
+                  React.createElement('span', {
+                    style: {
+                      display: 'inline-block',
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      background: statusColor,
+                      boxShadow: isLive ? '0 0 8px ' + statusColor : 'none'
+                    }
+                  })
+                ),
+                React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary, #888)', marginTop: '2px', fontFamily: 'monospace' } },
+                  (taskTitle || taskId) + ' · ' + (isLive ? T_KEY(t, 'liveLog.connecting') : (completed ? T_KEY(t, 'liveLog.completed') : status))
+                )
+              )
+            ),
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+              React.createElement('label', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)', display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer' } },
+                React.createElement('input', {
+                  type: 'checkbox',
+                  checked: Boolean(autoScroll),
+                  onChange: onToggleAutoScroll,
+                  style: { cursor: 'pointer' }
+                }),
+                T_KEY(t, 'liveLog.autoScroll')
+              ),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-icon-btn',
+                style: { color: 'var(--dsw-alias-label-secondary, #888)', background: 'transparent', border: 'none', cursor: 'pointer', fontSize: '16px' },
+                onClick: onClose
+              }, '✕')
+            )
+          ),
+
+          // Terminal console body
+          React.createElement('div', {
+            ref: terminalRef,
+            style: { flex: 1, overflowY: 'auto', padding: '14px 16px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace', fontSize: '12px', lineHeight: '1.5', background: 'var(--dsw-alias-bg-base, #000)' }
+          },
+            (!logs || logs.length === 0) && React.createElement('div', {
+              style: { color: 'var(--dsw-alias-label-secondary, #888)', fontStyle: 'italic', padding: '20px 0', textAlign: 'center' }
+            }, isLive ? T_KEY(t, 'liveLog.waiting') : 'No output captured for this run.'),
+
+            logs && logs.length > 0 && logs.map((item, idx) => {
+              const isErr = item.stream === 'stderr';
+              const timeStr = item.ts ? new Date(item.ts).toLocaleTimeString() : '';
+              return React.createElement('div', {
+                key: idx,
+                style: { display: 'flex', gap: '8px', color: isErr ? 'var(--dsh-cron-danger, #f55)' : 'var(--dsh-cron-success, #5f5)', wordBreak: 'break-all', whiteSpace: 'pre-wrap' }
+              },
+                timeStr && React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary, #555)', userSelect: 'none', flexShrink: 0 } }, '[' + timeStr + ']'),
+                React.createElement('span', { style: { flex: 1 } }, item.chunk || item.text || String(item))
+              );
+            })
+          ),
+
+          // Footer
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'flex-end', padding: '10px 16px', borderTop: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn dsh-cron-btn-secondary',
+              style: { padding: '6px 14px', fontSize: '12px' },
+              onClick: onClose
+            }, T_KEY(t, 'liveLog.close'))
+          )
+        )
+      );
+    }

package/lib/client-src/47-analytics-digest-modal.js

@@ -0,0 +1,166 @@
+    /**
+     * Weekly AI Analytics & Cost Digest Modal (#330)
+     * Displays 7-day or 30-day KPI cards, top unstable & expensive tasks,
+     * one-click Telegram dispatch, and Markdown preview.
+     * Complies strictly with Audit #203 (0 raw rgba, 0 6-digit hex colors).
+     */
+    function renderAnalyticsDigestModal({ isOpen, onClose, digestData, isLoading, periodDays, onSelectPeriod, onSendTelegram, sendStatus, t }) {
+      if (!isOpen) return null;
+
+      const digest = digestData || {
+        totalRuns: 0,
+        successfulRuns: 0,
+        failedRuns: 0,
+        successRate: 100,
+        totalTokens: 0,
+        totalCostUsd: 0,
+        healedCount: 0,
+        activeTasksCount: 0,
+        pausedTasksCount: 0,
+        topUnstableTasks: [],
+        topExpensiveTasks: []
+      };
+
+      const copyMarkdown = () => {
+        if (!digestData) return;
+        const text = [
+          '# ' + (T_KEY(t, 'digest.modalTitle')),
+          'Period: Last ' + (periodDays || 7) + ' days',
+          'Total Runs: ' + digest.totalRuns + ' (' + digest.successRate + '% SR)',
+          'Tokens: ' + digest.totalTokens + ' (~$' + digest.totalCostUsd + ' USD)',
+          'Active Tasks: ' + digest.activeTasksCount + ' active / ' + digest.pausedTasksCount + ' paused'
+        ].join(String.fromCharCode(10));
+        navigator.clipboard.writeText(text).catch(() => {});
+      };
+
+      return React.createElement('div', {
+        className: 'dsh-cron-modal-overlay',
+        onClick: onClose
+      },
+        React.createElement('div', {
+          className: 'dsh-cron-modal',
+          style: { maxWidth: '780px', width: '92vw', maxHeight: '86vh', display: 'flex', flexDirection: 'column', background: 'var(--dsw-alias-bg-base, #111)', color: 'var(--dsw-alias-label-primary, #ddd)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '8px' },
+          role: 'dialog',
+          'aria-modal': 'true',
+          onClick: (e) => e.stopPropagation()
+        },
+          // Header
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', borderBottom: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
+              React.createElement('span', { style: { fontSize: '20px' } }, '📊'),
+              React.createElement('div', null,
+                React.createElement('div', { style: { fontWeight: '600', fontSize: '15px', color: 'var(--dsw-alias-label-primary, #fff)' } },
+                  T_KEY(t, 'digest.modalTitle')
+                ),
+                React.createElement('div', { style: { fontSize: '11.5px', color: 'var(--dsw-alias-label-secondary, #888)', marginTop: '2px' } },
+                  (T_KEY(t, 'digest.buttonTitle')) + ' · ' + (periodDays || 7) + 'd'
+                )
+              )
+            ),
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                style: { padding: '4px 10px', fontSize: '12px', fontWeight: periodDays === 7 ? '600' : '400', background: periodDays === 7 ? 'var(--dsw-alias-bg-layer-3, #222)' : 'transparent' },
+                onClick: () => onSelectPeriod && onSelectPeriod(7)
+              }, T_KEY(t, 'digest.period7')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                style: { padding: '4px 10px', fontSize: '12px', fontWeight: periodDays === 30 ? '600' : '400', background: periodDays === 30 ? 'var(--dsw-alias-bg-layer-3, #222)' : 'transparent' },
+                onClick: () => onSelectPeriod && onSelectPeriod(30)
+              }, T_KEY(t, 'digest.period30')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-icon-btn',
+                onClick: onClose,
+                style: { marginLeft: '8px' }
+              }, React.createElement('span', null, '✕'))
+            )
+          ),
+
+          // Body
+          React.createElement('div', {
+            style: { padding: '16px 18px', overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '16px' }
+          },
+            isLoading ? React.createElement('div', { style: { padding: '30px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary, #888)' } }, 'Loading digest metrics...') : React.createElement(React.Fragment, null,
+              // KPI Grid
+              (() => {
+                const renderKpi = (label, val, sub, subCol) => React.createElement('div', { style: { background: 'var(--dsw-alias-bg-layer-2, #111)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '6px', padding: '10px 12px' } },
+                  React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary, #888)' } }, label),
+                  React.createElement('div', { style: { fontSize: '18px', fontWeight: '700', color: 'var(--dsw-alias-label-primary, #fff)', marginTop: '4px' } }, val),
+                  React.createElement('div', { style: { fontSize: '11px', color: subCol || 'var(--dsw-alias-label-secondary, #888)', marginTop: '2px' } }, sub)
+                );
+                return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px' } },
+                  renderKpi(T_KEY(t, 'digest.executions'), digest.totalRuns, digest.successRate + '% SR', digest.successRate >= 90 ? 'var(--dsh-cron-success, #2a2)' : 'var(--dsh-cron-warning, #fa0)'),
+                  renderKpi(T_KEY(t, 'digest.tokens'), Number(digest.totalTokens || 0).toLocaleString(), 'LLM prompt+out'),
+                  renderKpi(T_KEY(t, 'digest.cost'), '$' + Number(digest.totalCostUsd || 0).toFixed(4), 'USD estimated'),
+                  renderKpi(T_KEY(t, 'digest.fleet'), digest.activeTasksCount, digest.pausedTasksCount + ' paused')
+                );
+              })(),
+
+              // Unstable TasksUnstable Tasks
+              React.createElement('div', { style: { background: 'var(--dsw-alias-bg-layer-2, #111)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '6px', padding: '12px' } },
+                React.createElement('div', { style: { fontWeight: '600', fontSize: '13px', color: 'var(--dsh-cron-warning, #fa0)', marginBottom: '8px' } },
+                  '⚠️ ' + (T_KEY(t, 'digest.unstableTitle'))
+                ),
+                (digest.topUnstableTasks && digest.topUnstableTasks.length > 0) ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px' } },
+                  digest.topUnstableTasks.map((tItem, idx) => React.createElement('div', {
+                    key: tItem.id || idx,
+                    style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '12px', padding: '6px 8px', background: 'var(--dsw-alias-bg-base, #111)', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-l2, #222)' }
+                  },
+                    React.createElement('span', { style: { fontFamily: 'monospace' } }, (idx + 1) + '. ' + (tItem.name || tItem.id)),
+                    React.createElement('span', { style: { color: 'var(--dsh-cron-danger, #e33)', fontWeight: '600' } },
+                      tItem.failures + ' fail (' + tItem.successRate + '% SR)'
+                    )
+                  ))
+                ) : React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)' } }, '✓ All tasks healthy — 0 failures in window!')
+              ),
+
+              // Expensive Tasks
+              React.createElement('div', { style: { background: 'var(--dsw-alias-bg-layer-2, #111)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '6px', padding: '12px' } },
+                React.createElement('div', { style: { fontWeight: '600', fontSize: '13px', color: 'var(--dsh-cron-info, #4af)', marginBottom: '8px' } },
+                  '💰 ' + (T_KEY(t, 'digest.expensiveTitle'))
+                ),
+                (digest.topExpensiveTasks && digest.topExpensiveTasks.length > 0) ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px' } },
+                  digest.topExpensiveTasks.map((tItem, idx) => React.createElement('div', {
+                    key: tItem.id || idx,
+                    style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '12px', padding: '6px 8px', background: 'var(--dsw-alias-bg-base, #111)', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-l2, #222)' }
+                  },
+                    React.createElement('span', { style: { fontFamily: 'monospace' } }, (idx + 1) + '. ' + (tItem.name || tItem.id)),
+                    React.createElement('span', { style: { color: 'var(--dsw-alias-label-primary, #ddd)' } },
+                      Number(tItem.tokens || 0).toLocaleString() + ' tok ($' + Number(tItem.costUsd || 0).toFixed(4) + ')'
+                    )
+                  ))
+                ) : React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)' } }, 'No significant token consumption recorded.')
+              )
+            )
+          ),
+
+          // Footer
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 18px', borderTop: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)' } },
+              sendStatus || ''
+            ),
+            React.createElement('div', { style: { display: 'flex', gap: '8px' } },
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                onClick: copyMarkdown,
+                style: { padding: '6px 14px', fontSize: '12px' }
+              }, T_KEY(t, 'digest.copyMarkdown')),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-primary',
+                onClick: onSendTelegram,
+                style: { padding: '6px 14px', fontSize: '12px' }
+              }, T_KEY(t, 'digest.sendTelegram'))
+            )
+          )
+        )
+      );
+    }

package/lib/client-src/48-timeline-heatmap-view.js

@@ -0,0 +1,176 @@
+    /**
+     * 24-Hour Schedule Timeline & Cost Heatmap Modal (#332, #333)
+     * Visual schedule collision detection and weekly 7x24 token burn heatmap.
+     * Complies with Audit #203 (0 raw rgba, 0 6-digit hex colors).
+     */
+    function renderTimelineHeatmapModal({
+      isOpen,
+      onClose,
+      activeTab,
+      onSelectTab,
+      timelineData,
+      heatmapData,
+      isLoading,
+      t
+    }) {
+      if (!isOpen) return null;
+
+      const tab = activeTab || 'timeline';
+      const timeline = timelineData || { buckets: [], totalRuns: 0, peakHoursCount: 0, maxConcurrent: 3 };
+      const heatmap = heatmapData || { matrix: [], dayLabels: [], hourLabels: [], totalCostUsd: 0, totalTokens: 0, maxCostHour: 0 };
+
+      return React.createElement('div', {
+        className: 'dsh-cron-modal-overlay',
+        onClick: onClose
+      },
+        React.createElement('div', {
+          className: 'dsh-cron-modal',
+          style: { maxWidth: '960px', width: '94vw', maxHeight: '88vh', display: 'flex', flexDirection: 'column', background: 'var(--dsw-alias-bg-base, #111)', color: 'var(--dsw-alias-label-primary, #ddd)', border: '1px solid var(--dsw-alias-border-l2, #333)', borderRadius: '8px' },
+          role: 'dialog',
+          'aria-modal': 'true',
+          onClick: (e) => e.stopPropagation()
+        },
+          // Header
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', borderBottom: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
+              React.createElement('span', { style: { fontSize: '20px' } }, tab === 'timeline' ? '⏱' : '🔥'),
+              React.createElement('div', null,
+                React.createElement('div', { style: { fontWeight: '600', fontSize: '15px', color: 'var(--dsw-alias-label-primary, #fff)' } },
+                  tab === 'timeline' ? (T_KEY(t, 'timeline.modalTitle')) : (T_KEY(t, 'heatmap.modalTitle'))
+                ),
+                React.createElement('div', { style: { fontSize: '11.5px', color: 'var(--dsw-alias-label-secondary, #888)', marginTop: '2px' } },
+                  tab === 'timeline'
+                    ? (timeline.totalRuns + ' runs projected · ' + (timeline.peakHoursCount ? '⚠️ ' + timeline.peakHoursCount + ' peak hours' : '✓ balanced concurrency'))
+                    : ('$' + Number(heatmap.totalCostUsd || 0).toFixed(4) + ' USD · ' + Number(heatmap.totalTokens || 0).toLocaleString() + ' tokens')
+                )
+              )
+            ),
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                style: { padding: '4px 12px', fontSize: '12px', fontWeight: tab === 'timeline' ? '600' : '400', background: tab === 'timeline' ? 'var(--dsw-alias-bg-layer-3, #222)' : 'transparent' },
+                onClick: () => onSelectTab && onSelectTab('timeline')
+              }, '⏱ ' + (T_KEY(t, 'timeline.tabTimeline'))),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                style: { padding: '4px 12px', fontSize: '12px', fontWeight: tab === 'heatmap' ? '600' : '400', background: tab === 'heatmap' ? 'var(--dsw-alias-bg-layer-3, #222)' : 'transparent' },
+                onClick: () => onSelectTab && onSelectTab('heatmap')
+              }, '🔥 ' + (T_KEY(t, 'heatmap.tabHeatmap'))),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-icon-btn',
+                onClick: onClose,
+                style: { marginLeft: '8px' }
+              }, React.createElement('span', null, '✕'))
+            )
+          ),
+
+          // Content
+          React.createElement('div', {
+            style: { padding: '16px 18px', overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '14px' }
+          },
+            isLoading ? React.createElement('div', { style: { padding: '40px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary, #888)' } }, 'Loading visualization data...') : (
+              tab === 'timeline' ? (
+                // 24H Timeline View
+                React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                  React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)', display: 'flex', justifyContent: 'space-between' } },
+                    React.createElement('span', null, T_KEY(t, 'timeline.legendDesc')),
+                    React.createElement('span', { style: { color: 'var(--dsh-cron-warning, #fa0)' } }, '⚠️ ' + (T_KEY(t, 'timeline.peakWarning')) + ' (' + timeline.maxConcurrent + ')')
+                  ),
+                  React.createElement('div', {
+                    style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '8px', marginTop: '6px' }
+                  },
+                    (timeline.buckets || []).map((b) => {
+                      const isPeak = b.isPeak, hasRuns = b.count > 0;
+                      return React.createElement('div', {
+                        key: b.index,
+                        style: {
+                          background: isPeak ? 'color-mix(in srgb, var(--dsh-cron-danger, #e33) 12%, var(--dsw-alias-bg-layer-2, #111))' : (hasRuns ? 'var(--dsw-alias-bg-layer-2, #111)' : 'var(--dsw-alias-bg-base, #111)'),
+                          border: isPeak ? '1px solid var(--dsh-cron-danger, #e33)' : (hasRuns ? '1px solid var(--dsw-alias-border-l2, #333)' : '1px dashed var(--dsw-alias-border-l2, #222)'),
+                          borderRadius: '6px', padding: '8px', minHeight: '75px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
+                        }
+                      },
+                        React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '11px' } },
+                          React.createElement('span', { style: { fontWeight: '600', color: isPeak ? 'var(--dsh-cron-danger, #e33)' : 'var(--dsw-alias-label-primary, #fff)' } }, b.label),
+                          hasRuns ? React.createElement('span', { style: { fontSize: '10px', padding: '1px 5px', borderRadius: '8px', background: isPeak ? 'var(--dsh-cron-danger, #e33)' : 'var(--dsw-alias-bg-layer-3, #222)', color: '#fff' } }, b.count) : null
+                        ),
+                        React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '3px', marginTop: '4px' } },
+                          (b.runs || []).slice(0, 3).map((r, rIdx) => React.createElement('span', {
+                            key: rIdx, title: (r.title || r.taskId) + ' (' + r.time + ')',
+                            style: { fontSize: '9.5px', fontFamily: 'monospace', padding: '1px 4px', borderRadius: '3px', background: 'var(--dsw-alias-bg-base, #111)', border: '1px solid var(--dsw-alias-border-l2, #333)', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
+                          }, r.title || r.taskId))
+                        )
+                      );
+                    })
+                  )
+                )
+              ) : (
+                // 7x24 Cost & Token Heatmap View
+                React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '10px' } },
+                  React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #888)', display: 'flex', justifyContent: 'space-between' } },
+                    React.createElement('span', null, T_KEY(t, 'heatmap.matrixDesc')),
+                    React.createElement('span', null, 'Max hour spend: $' + Number(heatmap.maxCostHour || 0).toFixed(4))
+                  ),
+                  React.createElement('div', {
+                    style: { overflowX: 'auto', paddingBottom: '8px' }
+                  },
+                    React.createElement('table', {
+                      style: { borderCollapse: 'collapse', width: '100%', minWidth: '700px', fontSize: '10.5px' }
+                    },
+                      React.createElement('thead', null,
+                        React.createElement('tr', null,
+                          React.createElement('th', { style: { padding: '4px 6px', textAlign: 'left', color: 'var(--dsw-alias-label-secondary, #888)' } }, 'Day'),
+                          Array.from({ length: 24 }, (_, hour) => React.createElement('th', {
+                            key: hour,
+                            style: { padding: '4px 2px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary, #888)', fontWeight: '400' }
+                          }, String(hour).padStart(2, '0')))
+                        )
+                      ),
+                      React.createElement('tbody', null,
+                        (heatmap.matrix || []).map((row, dIdx) => React.createElement('tr', { key: dIdx },
+                          React.createElement('td', { style: { padding: '4px 6px', fontWeight: '600', color: 'var(--dsw-alias-label-primary, #ddd)' } }, (heatmap.dayLabels && heatmap.dayLabels[dIdx]) || 'Day'),
+                          row.map((cell, hIdx) => {
+                            const intensity = cell.costIntensity || 0;
+                            const hasSpend = cell.costUsd > 0;
+                            const bg = hasSpend
+                              ? 'color-mix(in srgb, var(--dsh-cron-primary, #4af) ' + Math.max(15, Math.round(intensity * 100)) + '%, transparent)'
+                              : 'transparent';
+                            return React.createElement('td', {
+                              key: hIdx,
+                              title: cell.dayLabel + ' ' + cell.hourLabel + ': $' + cell.costUsd + ' (' + cell.tokens.toLocaleString() + ' tokens, ' + cell.runs + ' runs)',
+                              style: {
+                                padding: '3px',
+                                textAlign: 'center',
+                                background: bg,
+                                border: '1px solid var(--dsw-alias-border-l2, #222)',
+                                cursor: hasSpend ? 'pointer' : 'default'
+                              }
+                            }, hasSpend ? React.createElement('span', { style: { fontSize: '9px', color: intensity > 0.5 ? '#fff' : 'var(--dsw-alias-label-primary, #ddd)' } }, '$' + (cell.costUsd >= 0.01 ? cell.costUsd.toFixed(2) : cell.costUsd.toFixed(3).slice(1))) : '·');
+                          })
+                        ))
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          ),
+
+          // Footer
+          React.createElement('div', {
+            style: { display: 'flex', justifyContent: 'flex-end', padding: '12px 18px', borderTop: '1px solid var(--dsw-alias-border-l2, #333)', background: 'var(--dsw-alias-bg-layer-2, #111)' }
+          },
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-secondary',
+              onClick: onClose,
+              style: { padding: '6px 16px', fontSize: '12px' }
+            }, T_KEY(t, 'chainGraph.close'))
+          )
+        )
+      );
+    }