@goodandready/dsh-cron 0.3.24 → 0.3.26

package/lib/client-src/30-utils.js

@@ -0,0 +1,248 @@
+    function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return (props && props.children) || null; };
+      }
+      return class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { hasError: false, error: null };
+        }
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error };
+        }
+        componentDidCatch(error, errorInfo) {
+          console.error('[dsh-cron] React error:', error, errorInfo);
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement('div', { className: 'dsh-cron-status-banner', 'data-type': 'error', style: { margin: '12px 0' } },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ Cron UI error:'),
+              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String((this.state.error && this.state.error.message) || this.state.error)),
+              React.createElement('button', {
+                type: 'button',
+                className: 'dsh-cron-btn-secondary',
+                style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
+                onClick: () => this.setState({ hasError: false, error: null })
+              }, 'Retry')
+            );
+          }
+          return (this.props && this.props.children) || null;
+        }
+      };
+    }
+    const ErrorBoundary = createErrorBoundary();
+
+    const AGENT_FORM_TYPES = ['llm', 'skill', 'workflow'];
+    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', 'tts', 'gitea'];
+    const CHANNEL_LABEL_KEYS = {
+      telegram: 'form.channelTelegram',
+      kanban: 'form.channelKanban',
+      discord: 'form.channelDiscord',
+      slack: 'form.channelSlack',
+      ntfy: 'form.channelNtfy',
+      bark: 'form.channelBark',
+      pushplus: 'form.channelPushplus',
+      tts: 'form.channelTts',
+      gitea: 'form.channelGitea',
+    };
+
+    // Non-secret delivery settings shown in the settings panel. Secrets are
+    // referenced by credential name only (#51) — never typed as values.
+    const DELIVERY_SETTING_FIELDS = [
+      { 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: 'giteaTokenRef', labelKey: 'settings.giteaTokenRefLabel', group: 'secrets' },
+      // The external API is the one surface where a typed secret is the point:
+      // a CI job cannot present a credential reference (#54).
+      { key: 'apiToken', labelKey: 'settings.apiTokenLabel', placeholderKey: 'settings.apiTokenPlaceholder', group: 'secrets' },
+      { key: 'discordWebhookUrl', labelKey: 'settings.discordLabel', group: 'channels' },
+      { key: 'slackWebhookUrl', labelKey: 'settings.slackLabel', group: 'channels' },
+      { key: 'ntfyUrl', labelKey: 'settings.ntfyUrlLabel', group: 'channels' },
+      { key: 'ntfyTopic', labelKey: 'settings.ntfyTopicLabel', group: 'channels' },
+      { key: 'barkServerUrl', labelKey: 'settings.barkServerLabel', group: 'channels' },
+      { key: 'barkKey', labelKey: 'settings.barkKeyLabel', group: 'channels' },
+      { key: 'pushplusUrl', labelKey: 'settings.pushplusUrlLabel', 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, defaultValue: 15000, min: 1000 },
+      { key: 'silentRuleModel', labelKey: 'settings.silentRuleModelLabel', group: 'automation' },
+      { key: 'inspectorModel', labelKey: 'settings.inspectorModelLabel', group: 'automation' },
+    ];
+    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'];
+
+    /** Collect every delivery key the settings endpoints may return. */
+    function parseEnvText(text) {
+      const env = {};
+      for (const rawLine of String(text || '').split('\n')) {
+        const line = rawLine.trim();
+        if (!line || line.startsWith('#')) continue;
+        const idx = line.indexOf('=');
+        if (idx <= 0) continue;
+        const key = line.slice(0, idx).trim();
+        const value = line.slice(idx + 1).trim();
+        if (key) env[key] = value;
+      }
+      return Object.keys(env).length ? env : undefined;
+    }
+
+    function formatEnvText(env) {
+      if (!env || typeof env !== 'object') return '';
+      return Object.entries(env).map(([k, v]) => `${k}=${v}`).join('\n');
+    }
+
+    // Status colors: core semantic state tokens first (same set dsh-clinebot
+    // uses), plugin fallbacks as a single point of change (#105).
+    function createToggle() {
+      let open = false;
+      const listeners = new Set();
+      return {
+        isOpen: () => open,
+        set: (v) => {
+          const next = !!v;
+          if (open === next) {
+            for (const fn of listeners) fn(open);
+            return;
+          }
+          open = next;
+          for (const fn of listeners) fn(open);
+        },
+        toggle: () => {
+          open = !open;
+          for (const fn of listeners) fn(open);
+        },
+        subscribe: (fn) => {
+          listeners.add(fn);
+          return () => listeners.delete(fn);
+        }
+      };
+    }
+
+    async function openSession(ctx, sessionId) {
+      if (!sessionId) return false;
+      const getSessions = () => (ctx && typeof ctx.get === 'function' ? ctx.get('sessions') : (ctx && ctx.sessions));
+      let sessions = getSessions();
+
+      // 1. Try sessions.open(sessionId) immediately
+      if (sessions && typeof sessions.open === 'function') {
+        try {
+          sessions.open(sessionId);
+          return true;
+        } catch (err) {
+          /* sessions.open threw synchronously */
+        }
+      }
+
+      // 2. If the session is not in manager.summaries yet, refresh from the backend
+      if (sessions && typeof sessions.refresh === 'function') {
+        try {
+          await sessions.refresh();
+          sessions.open(sessionId);
+          return true;
+        } catch (err) {
+          /* sessions.refresh threw */
+        }
+      }
+
+      // 3. Async retries until the WebSocket/SSE event adds the session to the list
+      for (let i = 0; i < 15; i++) {
+        await new Promise(resolve => setTimeout(resolve, 120));
+        sessions = getSessions();
+        if (sessions && typeof sessions.open === 'function') {
+          try {
+            sessions.open(sessionId);
+            return true;
+          } catch (err) {
+            /* retry polling sessions.open threw */
+          }
+        }
+        // DOM fallback: click the session in the sidebar if it has rendered
+        if (typeof document !== 'undefined') {
+          const domItem = document.querySelector('[data-session-id="' + sessionId + '"], [role="treeitem"][data-id="' + sessionId + '"], [data-id="' + sessionId + '"]');
+          if (domItem) {
+            domItem.click();
+            return true;
+          }
+        }
+      }
+      console.warn('[dsh-cron] could not open session in workspace:', sessionId);
+      return false;
+    }
+
+    function statusLabel(t, status) {
+      if (status === 'success') return T_KEY(t, 'history.statusSuccess');
+      if (status === 'validation_failed') return T_KEY(t, 'history.statusValidationFailed');
+      if (status === 'skipped') return T_KEY(t, 'history.statusSkipped');
+      if (status === 'missed') return T_KEY(t, 'history.statusMissed');
+      if (status === 'timeout') return T_KEY(t, 'history.statusTimeout');
+      if (status === 'uncertain') return T_KEY(t, 'history.statusUncertain');
+      return T_KEY(t, 'history.statusFailed');
+    }
+
+    /**
+     * A config-declared task is owned by the profile config file (#50): the
+     * panel shows it, but editing, pausing or deleting it here would be undone
+     * at the next start, so the row keeps the source label instead of the
+     * actions that cannot stick.
+     */
+    function isConfigManaged(task) {
+      return Boolean(task) && task.managedBy === 'config';
+    }
+    function T_KEY(t, key, vars) {
+      return (typeof t === 'function' ? t : translate)(key, vars);
+    }
+
+    /**
+     * Issue #307: universal fetch with AbortController timeout (default 15s).
+     * Connects with caller signal if supplied and fails closed on timeouts.
+     */
+    const fetchWithTimeout = async (url, options = {}, timeoutMs = 15000) => {
+      const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+      const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : null;
+      if (options && options.signal && controller) {
+        if (options.signal.aborted) {
+          controller.abort();
+        } else {
+          options.signal.addEventListener('abort', () => controller.abort(), { once: true });
+        }
+      }
+      try {
+        const res = await fetch(url, {
+          ...options,
+          signal: controller ? controller.signal : (options ? options.signal : undefined),
+        });
+        return res;
+      } catch (err) {
+        if (err && (err.name === 'AbortError' || controller?.signal?.aborted)) {
+          const timeoutErr = new Error(`Request timed out after ${Math.round(timeoutMs / 1000)}s`);
+          timeoutErr.isTimeout = true;
+          throw timeoutErr;
+        }
+        throw err;
+      } finally {
+        if (timer) clearTimeout(timer);
+      }
+    };
+
+    /**
+     * Issue #307: universal JSON fetch helper with timeout and aborted body protection.
+     */
+    const fetchJsonWithTimeout = async (url, options = {}, timeoutMs = 15000) => {
+      const res = await fetchWithTimeout(url, options, timeoutMs);
+      let data = {};
+      try {
+        data = await res.json();
+      } catch (jsonErr) {
+        if (jsonErr && jsonErr.name === 'AbortError') {
+          throw jsonErr;
+        }
+      }
+      return { res, data };
+    };
+

package/lib/client-src/40-delivery-settings.js

@@ -0,0 +1,96 @@
+    function pickDeliverySettings(source) {
+      const out = {};
+      for (const key of DELIVERY_SETTING_KEYS.concat(TEMPLATE_SETTING_KEYS)) {
+        if (source && source[key] !== undefined && source[key] !== null) out[key] = source[key];
+      }
+      if (out.channelTemplates && typeof out.channelTemplates === 'object') {
+        out.channelTemplates = Object.assign({}, out.channelTemplates);
+      }
+      return out;
+    }
+
+    /**
+     * Shared delivery form used by both the task panel modal and the plugin
+     * settings card, so a new channel is added in exactly one place.
+     * Sections collapse via the canonical aria-expanded head contract.
+     */
+    function renderDeliverySettings({ T, values, onChange, onChannelTemplate, sections, onToggleSection }) {
+      const val = (key) => (values[key] === undefined || values[key] === null ? '' : String(values[key]));
+      const field = (f) => React.createElement('div', { className: 'dsh-cron-form-group', key: f.key, style: { marginBottom: '10px' } },
+        React.createElement('label', null, T(f.labelKey)),
+        React.createElement('input', f.numeric ? {
+          type: 'number',
+          min: f.min !== undefined ? f.min : 1000,
+          step: 1000,
+          value: val(f.key),
+          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),
+          placeholder: f.placeholderKey ? T(f.placeholderKey) : '',
+          onChange: (e) => onChange(f.key, e.target.value)
+        })
+      );
+      const section = (key, titleKey, children) => {
+        const open = Boolean(sections[key]);
+        return React.createElement('div', { className: 'dsh-cron-section', key },
+          React.createElement('button', {
+            type: 'button',
+            className: 'dsh-cron-section-head',
+            'aria-expanded': open ? 'true' : 'false',
+            onClick: () => onToggleSection(key)
+          },
+            React.createElement('span', null, T(titleKey)),
+            React.createElement('span', { className: 'dsh-cron-section-chevron', 'data-open': open ? 'true' : 'false' }, '▾')
+          ),
+          open && React.createElement('div', { className: 'dsh-cron-section-body' }, children)
+        );
+      };
+
+      return [
+        section('secrets', 'settings.secretsSection', [
+          React.createElement('div', { className: 'dsh-cron-hint', key: 'hint', style: { marginBottom: '10px' } }, T('settings.secretsHint')),
+          ...DELIVERY_SETTING_FIELDS.filter((f) => f.group === 'secrets').map(field),
+        ]),
+        section('channels', 'settings.deliverySection', [
+          React.createElement('div', { className: 'dsh-cron-form-row', key: 'row' },
+            ...DELIVERY_SETTING_FIELDS.filter((f) => f.group === 'channels').map(field)
+          ),
+        ]),
+        section('automation', 'settings.automationSection', [
+          React.createElement('div', { className: 'dsh-cron-hint', key: 'hint', style: { marginBottom: '10px' } }, T('settings.automationHint')),
+          React.createElement('div', { className: 'dsh-cron-form-row', key: 'row' },
+            ...DELIVERY_SETTING_FIELDS.filter((f) => f.group === 'automation').map(field)
+          ),
+        ]),
+        section('templates', 'settings.templatesSection', [
+          React.createElement('div', { className: 'dsh-cron-form-group', key: 'global', style: { marginBottom: '10px' } },
+            React.createElement('label', null, T('settings.templateLabel')),
+            React.createElement('input', {
+              type: 'text',
+              value: val('template'),
+              onChange: (e) => onChange('template', e.target.value)
+            }),
+            React.createElement('div', { className: 'dsh-cron-hint' }, T('settings.templateHint'))
+          ),
+          React.createElement('div', { className: 'dsh-cron-form-row', key: 'perchannel' },
+            ...DELIVERY_CHANNELS.map((id) => React.createElement('div', { className: 'dsh-cron-form-group', key: id, style: { marginBottom: '10px' } },
+              React.createElement('label', null, T('settings.channelTemplateLabel', { channel: T(CHANNEL_LABEL_KEYS[id]) })),
+              React.createElement('input', {
+                type: 'text',
+                value: (values.channelTemplates && values.channelTemplates[id]) || '',
+                onChange: (e) => onChannelTemplate(id, e.target.value)
+              })
+            ))
+          ),
+        ]),
+      ];
+    }
+
+    /** Parse a KEY=VALUE textarea into the task env object (#38). */

package/lib/client-src/45-dag-graph-view.js

@@ -0,0 +1,287 @@
+    /**
+     * Interactive Visual Chain Graph & Checkpoint Inspector (#334)
+     * Pure CSS/SVG layout showing DAG steps, statuses, checkpoints and 1-click retry.
+     */
+    function parseChainTargets(raw) {
+      if (!raw) return [];
+      if (Array.isArray(raw)) return raw.filter((x) => typeof x === 'string' && x.trim().length > 0);
+      if (typeof raw === 'string') return raw.split(',').map((s) => s.trim()).filter((s) => s.length > 0);
+      return [];
+    }
+    const sanitizeDependsOn = parseChainTargets;
+    const sanitizeJoinPolicy = (raw) => (raw === 'any_success' ? 'any_success' : 'all_success');
+
+    function buildTaskGraphModel(tasks = [], snapshots = [], focusTaskId = null) {
+      const taskMap = new Map();
+      for (const t of tasks) if (t?.id) taskMap.set(t.id, t);
+      const snapMap = new Map();
+      for (const s of snapshots) if (s?.stepTaskId) snapMap.set(s.stepTaskId, s);
+      const nodes = [], edges = [];
+      let hasFailure = false;
+      for (const [id, task] of taskMap.entries()) {
+        const snap = snapMap.get(id);
+        let nodeStatus = 'pending', durationMs = 0, outputSnippet = '', retryCount = 0;
+        if (snap) {
+          nodeStatus = snap.status === 'completed' || snap.status === 'success' ? 'success' : 'failed';
+          durationMs = snap.durationMs || 0;
+          retryCount = snap.retryCount || 0;
+          if (snap.output) outputSnippet = String(snap.output).slice(0, 200);
+          if (nodeStatus === 'failed') hasFailure = true;
+        } else if (task.status === 'running') {
+          nodeStatus = 'running';
+        }
+        const deps = sanitizeDependsOn(task.dependsOn);
+        const hasBranches = Array.isArray(task.branchRules) && task.branchRules.length > 0;
+        nodes.push({
+          id,
+          title: task.title || id,
+          type: task.type || 'prompt',
+          status: nodeStatus,
+          durationMs,
+          retryCount,
+          outputSnippet,
+          isFocus: Boolean(focusTaskId && id === focusTaskId),
+          isRetryable: nodeStatus === 'failed',
+          isDecisionNode: hasBranches,
+          branchRulesCount: hasBranches ? task.branchRules.length : 0,
+          elseTask: task.elseTask || null,
+          dependsOn: deps,
+          joinPolicy: sanitizeJoinPolicy(task.joinPolicy)
+        });
+        for (const d of deps) edges.push({ from: d, to: id, type: 'dependsOn', label: task.joinPolicy === 'any_success' ? 'join:any' : 'join:all' });
+        if (hasBranches) {
+          for (const rule of task.branchRules) {
+            if (rule && rule.targetTask) {
+              edges.push({
+                from: id,
+                to: String(rule.targetTask).trim(),
+                type: 'branch',
+                label: rule.label || ('[if: ' + rule.field + ' ' + rule.operator + ' ' + (rule.value != null ? rule.value : '') + ']').trim(),
+                condition: { field: rule.field, operator: rule.operator, value: rule.value }
+              });
+            }
+          }
+        }
+        if (task.elseTask) {
+          edges.push({
+            from: id,
+            to: String(task.elseTask).trim(),
+            type: 'branch_else',
+            label: '[else]',
+            isElse: true
+          });
+        }
+        if (!hasBranches) {
+          for (const t of parseChainTargets(task.onSuccess)) edges.push({ from: id, to: t, type: 'onSuccess', label: 'onSuccess' });
+        }
+        for (const f of parseChainTargets(task.onFailure)) edges.push({ from: id, to: f, type: 'onFailure', label: 'onFailure' });
+      }
+      return { nodes, edges, hasFailure };
+    }
+
+    function renderChainGraphModal({ isOpen, onClose, data, loading, onRetry, t }) {
+      if (!isOpen) return null;
+
+      const graph = data?.graph || { nodes: [], edges: [], hasFailure: false };
+      const chainRunId = data?.chainRunId || '';
+      const nodes = graph.nodes || [];
+
+      return React.createElement('div', {
+        className: 'dsh-cron-modal-overlay',
+        onClick: onClose
+      },
+        React.createElement('div', {
+          className: 'dsh-cron-modal',
+          style: { maxWidth: '820px', width: '92vw', maxHeight: '88vh', display: 'flex', flexDirection: 'column' },
+          role: 'dialog',
+          'aria-modal': 'true',
+          onClick: (e) => e.stopPropagation()
+        },
+          // Header
+          React.createElement('div', {
+            className: 'dsh-cron-modal-head',
+            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--dsw-alias-border-l2)', paddingBottom: '12px' }
+          },
+            React.createElement('div', null,
+              React.createElement('div', {
+                className: 'dsh-cron-modal-title',
+                style: { margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }
+              },
+                React.createElement('span', { style: { fontSize: '18px' } }, '🕸️'),
+                T_KEY(t, 'chainGraph.modalTitle')
+              ),
+              chainRunId && React.createElement('div', {
+                style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary, #888)', marginTop: '4px', fontFamily: 'monospace' }
+              }, 'Run ID: ' + chainRunId)
+            ),
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-icon-btn',
+              onClick: onClose
+            }, '✕')
+          ),
+
+          // Body
+          React.createElement('div', {
+            style: { flex: 1, overflowY: 'auto', padding: '16px 0', minHeight: '260px' }
+          },
+            loading && React.createElement('div', {
+              className: 'dsh-cron-history-empty'
+            }, T_KEY(t, 'history.loading')),
+
+            !loading && nodes.length === 0 && React.createElement('div', {
+              className: 'dsh-cron-history-empty'
+            }, T_KEY(t, 'chainGraph.noNodes')),
+
+            !loading && nodes.length > 0 && React.createElement('div', {
+              style: { display: 'flex', flexDirection: 'column', gap: '16px' }
+            },
+              // Legend
+              React.createElement('div', {
+                style: { display: 'flex', gap: '12px', fontSize: '11px', color: 'var(--dsw-alias-label-secondary, #888)', padding: '0 4px' }
+              },
+                React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } },
+                  React.createElement('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: 'var(--dsh-cron-success)' } }),
+                  T_KEY(t, 'chainGraph.stepSuccess')
+                ),
+                React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } },
+                  React.createElement('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: 'var(--dsh-cron-danger)' } }),
+                  T_KEY(t, 'chainGraph.stepFailed')
+                ),
+                React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } },
+                  React.createElement('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: 'var(--dsw-alias-label-tertiary, #888)' } }),
+                  T_KEY(t, 'chainGraph.stepPending')
+                )
+              ),
+
+              // Horizontal / Flow layout of nodes
+              React.createElement('div', {
+                style: {
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '12px',
+                  alignItems: 'stretch',
+                  background: 'var(--dsw-alias-bg-layer-2)',
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  borderRadius: '8px',
+                  padding: '16px'
+                }
+              },
+                nodes.map((n, idx) => {
+                  const isOk = n.status === 'success';
+                  const isFailed = n.status === 'failed';
+                  const borderColor = isOk
+                    ? 'var(--dsh-cron-success)'
+                    : isFailed
+                      ? 'var(--dsh-cron-danger)'
+                      : 'var(--dsw-alias-border-l2)';
+
+                  return React.createElement('div', {
+                    key: n.id || idx,
+                    style: {
+                      flex: '1 1 220px',
+                      maxWidth: '260px',
+                      background: 'var(--dsw-alias-bg-layer-1)',
+                      border: '1px solid ' + borderColor,
+                      borderRadius: '6px',
+                      padding: '12px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '8px',
+                      boxShadow: isFailed ? '0 0 0 1px var(--dsh-cron-danger)' : 'none'
+                    }
+                  },
+                    // Node header
+                    React.createElement('div', {
+                      style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '6px' }
+                    },
+                      React.createElement('div', {
+                        style: { fontWeight: '600', fontSize: '13px', color: 'var(--dsw-alias-label-primary)' }
+                      }, n.title || n.id),
+                      React.createElement('span', {
+                        style: {
+                          fontSize: '10px',
+                          padding: '2px 6px',
+                          borderRadius: '10px',
+                          fontWeight: '600',
+                          background: isOk ? 'var(--dsh-cron-success-bg)' : isFailed ? 'var(--dsh-cron-danger-bg)' : 'var(--dsw-alias-bg-layer-3)',
+                          color: isOk ? 'var(--dsh-cron-success)' : isFailed ? 'var(--dsh-cron-danger)' : 'var(--dsw-alias-label-secondary)'
+                        }
+                      }, isOk ? '✓ ' + T_KEY(t, 'chainGraph.stepSuccess') : isFailed ? '✗ ' + T_KEY(t, 'chainGraph.stepFailed') : '⏳ ' + T_KEY(t, 'chainGraph.stepPending'))
+                    ),
+
+                    // Meta: duration, retryCount, type
+                    React.createElement('div', {
+                      style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'flex', gap: '8px', flexWrap: 'wrap' }
+                    },
+                      n.durationMs > 0 && React.createElement('span', null, n.durationMs + 'ms'),
+                      n.retryCount > 0 && React.createElement('span', { style: { color: 'var(--dsh-cron-warning)' } }, '↻ ' + n.retryCount),
+                      n.joinPolicy && n.dependsOn?.length > 0 && React.createElement('span', {
+                        style: { background: 'var(--dsw-alias-bg-layer-3)', padding: '1px 4px', borderRadius: '4px' }
+                      }, n.joinPolicy === 'any_success' ? 'join:any' : 'join:all')
+                    ),
+
+                    // Decision Node info (#352)
+                    n.isDecisionNode && React.createElement('div', {
+                      style: { fontSize: '11px', color: 'var(--dsh-cron-warning)', fontWeight: '600', display: 'flex', alignItems: 'center', gap: '4px' }
+                    }, '🔀 ' + T_KEY(t, 'chainGraph.decisionNode') + ' (' + n.branchRulesCount + ')'),
+
+                    // Dependencies info
+                    n.dependsOn?.length > 0 && React.createElement('div', {
+                      style: { fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)' }
+                    }, '← ' + n.dependsOn.join(', ')),
+
+                    // Output snippet
+                    n.outputSnippet && React.createElement('div', {
+                      style: {
+                        background: 'var(--dsw-alias-bg-layer-2)',
+                        border: '1px solid var(--dsw-alias-border-l2)',
+                        borderRadius: '4px',
+                        padding: '6px',
+                        fontSize: '11px',
+                        color: 'var(--dsw-alias-label-secondary)',
+                        fontFamily: 'monospace',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                        maxHeight: '60px',
+                        overflowY: 'auto'
+                      }
+                    }, n.outputSnippet),
+
+                    // One-click Retry from step button (#319, #328, #334)
+                    isFailed && chainRunId && React.createElement('button', {
+                      type: 'button',
+                      className: 'dsh-cron-btn-secondary',
+                      style: {
+                        marginTop: 'auto',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '6px',
+                        fontSize: '12px',
+                        padding: '6px 10px',
+                        color: 'var(--dsh-cron-danger)',
+                        borderColor: 'var(--dsh-cron-danger)'
+                      },
+                      onClick: () => onRetry && onRetry(n.id)
+                    }, '🔄 ' + T_KEY(t, 'chainGraph.retryStep'))
+                  );
+                })
+              )
+            )
+          ),
+
+          // Footer
+          React.createElement('div', {
+            className: 'dsh-cron-modal-foot',
+            style: { borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '12px', marginTop: 'auto' }
+          },
+            React.createElement('button', {
+              type: 'button',
+              className: 'dsh-cron-btn-primary',
+              onClick: onClose
+            }, T_KEY(t, 'chainGraph.close'))
+          )
+        )
+      );
+    }