@hongmaple0820/scale-engine 0.50.1 → 0.50.2

package/dist/dashboard/spa/pages/monitoring.js

@@ -1,361 +0,0 @@
-/**
- * Monitoring Page v2 — Defect trends, gate timeline, command stats, enhanced detector view
- */
-;(() => {
-  'use strict'
-
-  const { fetchJSON, relativeTime, formatNumber, registerChart, getTheme, runtimeLabel, t, $, $$, dom } = window.Dashboard
-  const { chartContainer, dataTable, el, emptyState, metricCard, panel, renderText, safeClassToken } = dom
-
-  async function renderMonitoring() {
-    const app = $('#app')
-    app.replaceChildren(
-      el('div', { className: 'metrics-row', id: 'mon-metrics' }),
-      el('div', { className: 'tabs', id: 'mon-tabs' }, [
-        el('div', { className: 'tab active', text: t('monitoring.overview'), dataset: { tab: 'overview' } }),
-        el('div', { className: 'tab', text: t('monitoring.detectors'), dataset: { tab: 'detectors' } }),
-        el('div', { className: 'tab', text: t('monitoring.defects'), dataset: { tab: 'defects' } }),
-        el('div', { className: 'tab', text: t('monitoring.commands'), dataset: { tab: 'commands' } }),
-      ]),
-      el('div', { id: 'mon-content' })
-    )
-
-    const [state, metrics] = await Promise.all([
-      fetchJSON('/api/state'),
-      fetchJSON('/api/metrics'),
-    ])
-
-    renderMonMetrics(state, metrics)
-
-    let currentTab = 'overview'
-    $('#mon-tabs').addEventListener('click', (e) => {
-      const tab = e.target.dataset?.tab
-      if (!tab) return
-      currentTab = tab
-      $$('#mon-tabs .tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab))
-      renderMonTab(tab, state, metrics)
-    })
-
-    renderMonTab('overview', state, metrics)
-  }
-
-  function renderMonMetrics(state, metrics) {
-    const container = $('#mon-metrics')
-    const detectors = state?.detectorStats?.length ?? 0
-    const defects = state?.autoDefectStats?.autoCreatedCount ?? 0
-    const commands = metrics?.commandRuns?.total ?? 0
-    const cmdPassRate = commands > 0 ? ((metrics.commandRuns.passed / commands) * 100).toFixed(0) + '%' : '-'
-    const events = state?.recentEvents?.length ?? 0
-
-    const cards = [
-      { label: t('monitoring.activeDetectors'), value: detectors, cls: '' },
-      { label: t('monitoring.autoDefects'), value: formatNumber(defects), cls: defects > 0 ? '' : 'accent' },
-      { label: t('monitoring.commandRuns'), value: formatNumber(commands), cls: '' },
-      { label: t('monitoring.commandPassRate'), value: cmdPassRate, cls: parseInt(cmdPassRate) >= 80 ? 'accent' : '' },
-      { label: t('monitoring.recentEvents'), value: events, cls: '' },
-    ]
-    container.replaceChildren(...cards.map(c => metricCard(c.label, c.value, c.cls)))
-  }
-
-  function renderMonTab(tab, state, metrics) {
-    const container = $('#mon-content')
-    switch (tab) {
-      case 'overview': renderOverview(container, state, metrics); break
-      case 'detectors': renderDetectors(container, state); break
-      case 'defects': renderDefects(container, state); break
-      case 'commands': renderCommands(container, metrics); break
-    }
-  }
-
-  // ── Overview ───────────────────────────────────────────────────────
-
-  function renderOverview(container, state, metrics) {
-    const eventCount = el('span', { className: 'count', text: `(${(state?.recentEvents ?? []).length})` })
-    container.replaceChildren(
-      el('div', { className: 'grid-2 mb-24' }, [
-        chartContainer(t('monitoring.defectsByRootCause'), 'mon-rootcause-chart'),
-        chartContainer(t('monitoring.defectsBySeverity'), 'mon-severity-chart'),
-      ]),
-      el('div', { className: 'grid-2' }, [
-        chartContainer(t('monitoring.commandStatus'), 'mon-cmd-chart'),
-        panel(t('monitoring.recentEvents'), 'mon-events', { titleSuffix: eventCount, bodyClassName: 'event-stream' }),
-      ])
-    )
-    $('#mon-events').style.maxHeight = '300px'
-
-    renderRootCauseChart(state)
-    renderSeverityChart(state)
-    renderCommandChart(metrics)
-    renderEventStream(state)
-  }
-
-  function renderRootCauseChart(state) {
-    const el = $('#mon-rootcause-chart')
-    const data = state?.autoDefectStats?.byRootCause ?? {}
-    const entries = Object.entries(data)
-
-    if (entries.length === 0) {
-      el.replaceChildren(emptyState(t('monitoring.noDefectData')))
-      return
-    }
-
-    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-
-    const colors = ['#ff4444', '#ffaa00', '#5588ff', '#00dc82', '#aa88ff', '#ff6688', '#44cccc']
-    chart.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: 120, right: 20, top: 10, bottom: 30 },
-      xAxis: { type: 'value', axisLabel: { color: '#a1a1a1' }, splitLine: { lineStyle: { color: '#2a2a2a' } } },
-      yAxis: { type: 'category', data: entries.map(([k]) => runtimeLabel('status', k)), axisLabel: { color: '#a1a1a1', fontSize: 11 } },
-      series: [{
-        type: 'bar',
-        data: entries.map(([, v], i) => ({
-          value: v,
-          itemStyle: { color: colors[i % colors.length], borderRadius: [0, 4, 4, 0] },
-        })),
-        barWidth: 20,
-      }],
-    })
-  }
-
-  function renderSeverityChart(state) {
-    const el = $('#mon-severity-chart')
-    const data = state?.autoDefectStats?.bySeverity ?? {}
-    const entries = Object.entries(data)
-
-    if (entries.length === 0) {
-      el.replaceChildren(emptyState(t('common.noData')))
-      return
-    }
-
-    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-
-    const severityColors = { low: '#00dc82', medium: '#ffaa00', high: '#ff4444', critical: '#ff0000' }
-    chart.setOption({
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      series: [{
-        type: 'pie', radius: ['40%', '70%'],
-        label: { color: '#a1a1a1', formatter: '{b}\n{d}%' },
-        data: entries.map(([sev, count]) => ({
-          name: runtimeLabel('severity', sev), value: count,
-          itemStyle: { color: severityColors[sev] || '#888' },
-        })),
-      }],
-    })
-  }
-
-  function renderCommandChart(metrics) {
-    const el = $('#mon-cmd-chart')
-    const cmd = metrics?.commandRuns
-    if (!cmd || cmd.total === 0) {
-      el.replaceChildren(emptyState(t('monitoring.noCommandData')))
-      return
-    }
-
-    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-
-    chart.setOption({
-      tooltip: { trigger: 'item' },
-      series: [{
-        type: 'pie', radius: ['40%', '70%'],
-        label: { color: '#a1a1a1', formatter: '{b}\n{c}' },
-        data: [
-          { name: t('monitoring.passed'), value: cmd.passed, itemStyle: { color: '#00dc82' } },
-          { name: t('monitoring.failed'), value: cmd.failed, itemStyle: { color: '#ff4444' } },
-        ],
-      }],
-    })
-  }
-
-  function renderEventStream(state) {
-    const container = $('#mon-events')
-    const events = state?.recentEvents ?? []
-
-    if (events.length === 0) {
-      renderText(container, t('overview.noEvents'))
-      return
-    }
-
-    container.replaceChildren(...events.slice(0, 30).map(e => {
-      const artifactText = e.artifactId ? t('monitoring.artifactPrefix', { id: e.artifactId.slice(0, 8) }) : ''
-      return el('div', { className: 'event-item' }, [
-        el('span', { className: 'event-type', text: e.type }),
-        el('span', { className: 'text-sm', text: artifactText }),
-        el('span', { className: 'event-time', text: relativeTime(e.timestamp) }),
-      ])
-    }))
-  }
-
-  // ── Detectors ──────────────────────────────────────────────────────
-
-  function renderDetectors(container, state) {
-    const detectors = state?.detectorStats ?? []
-
-    if (detectors.length === 0) {
-      container.replaceChildren(emptyState(t('monitoring.noDetectorData'), '\uD83D\uDD0E'))
-      return
-    }
-
-    const rows = detectors.map(d => {
-      const highSev = (d.bySeverity?.high ?? 0) + (d.bySeverity?.critical ?? 0)
-      const health = highSev > 5 ? 'critical' : highSev > 0 ? 'warning' : 'ok'
-      const healthColor = { ok: '#00dc82', warning: '#ffaa00', critical: '#ff4444' }[health]
-      const severityBadges = Object.entries(d.bySeverity ?? {}).map(([s, c]) =>
-        el('span', { className: `severity-badge severity-${safeClassToken(s)}`, text: `${runtimeLabel('severity', s)}: ${c}` })
-      )
-      return el('tr', {}, [
-        el('td', { text: d.name, style: { fontWeight: '500' } }),
-        el('td', { text: d.totalTriggers }),
-        el('td', {}, severityBadges),
-        el('td', { className: 'text-muted text-sm', text: d.lastTrigger ? relativeTime(d.lastTrigger) : '-' }),
-        el('td', {}, [
-          el('span', { text: runtimeLabel('health', health), style: { color: healthColor, fontWeight: '500' } }),
-        ]),
-      ])
-    })
-
-    container.replaceChildren(
-      el('div', { className: 'panel mb-24' }, [
-        el('div', { className: 'panel-title', text: t('monitoring.detectorPerformance') }),
-        dataTable([
-          t('monitoring.detectors'),
-          t('monitoring.triggerDistribution'),
-          t('monitoring.defectsBySeverity'),
-          t('monitoring.recentEvents'),
-          t('monitoring.health'),
-        ], rows),
-      ]),
-      chartContainer(t('monitoring.triggerDistribution'), 'mon-det-chart')
-    )
-
-    // Detector trigger chart
-    const el = $('#mon-det-chart')
-    if (el && detectors.length > 0) {
-      const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-      registerChart(chart)
-
-      chart.setOption({
-        tooltip: { trigger: 'axis' },
-        legend: { textStyle: { color: '#a1a1a1' }, bottom: 0 },
-        grid: { left: 120, right: 20, top: 20, bottom: 40 },
-        xAxis: { type: 'value', axisLabel: { color: '#a1a1a1' }, splitLine: { lineStyle: { color: '#2a2a2a' } } },
-        yAxis: { type: 'category', data: detectors.map(d => d.name), axisLabel: { color: '#a1a1a1', fontSize: 11 } },
-        series: ['low', 'medium', 'high', 'critical'].map(sev => ({
-          name: runtimeLabel('severity', sev),
-          type: 'bar',
-          stack: 'total',
-          data: detectors.map(d => d.bySeverity?.[sev] ?? 0),
-          itemStyle: { color: { low: '#00dc82', medium: '#ffaa00', high: '#ff4444', critical: '#ff0000' }[sev] },
-          barWidth: 18,
-        })),
-      })
-    }
-  }
-
-  // ── Defects ────────────────────────────────────────────────────────
-
-  function renderDefects(container, state) {
-    const defects = state?.autoDefectStats?.recentDefects ?? []
-    const byRootCause = state?.autoDefectStats?.byRootCause ?? {}
-    const summaryCards = Object.entries(byRootCause).slice(0, 6).map(([cause, count]) =>
-      metricCard(cause, count)
-    )
-    const defectBody = defects.length === 0
-      ? el('div', { className: 'text-muted text-sm', text: t('monitoring.noAutoDefects') })
-      : dataTable([
-        t('monitoring.defects'),
-        t('monitoring.defectsByRootCause'),
-        t('monitoring.defectsBySeverity'),
-        t('monitoring.detectors'),
-        t('monitoring.recentEvents'),
-      ], defects.map(d => el('tr', {}, [
-        el('td', { text: d.title, style: { fontWeight: '500' } }),
-        el('td', { className: 'text-muted', text: d.rootCause }),
-        el('td', {}, [
-          el('span', { className: `severity-badge severity-${safeClassToken(d.severity)}`, text: runtimeLabel('severity', d.severity) }),
-        ]),
-        el('td', { className: 'text-muted', text: d.detector }),
-        el('td', { className: 'text-muted text-sm', text: relativeTime(d.createdAt) }),
-      ])))
-
-    container.replaceChildren(
-      el('div', { className: 'grid-3 mb-24' }, summaryCards),
-      el('div', { className: 'panel' }, [
-        el('div', { className: 'panel-title' }, [
-          document.createTextNode(t('monitoring.recentAutoDefects') + ' '),
-          el('span', { className: 'count', text: `(${defects.length})` }),
-        ]),
-        defectBody,
-      ])
-    )
-  }
-
-  // ── Commands ───────────────────────────────────────────────────────
-
-  function renderCommands(container, metrics) {
-    const cmd = metrics?.commandRuns
-    if (!cmd) {
-      container.replaceChildren(emptyState(t('monitoring.noCommandData')))
-      return
-    }
-
-    const efficiency = cmd.rawEstimatedTokens > 0
-      ? ((cmd.savedEstimatedTokens / cmd.rawEstimatedTokens) * 100).toFixed(1)
-      : '0'
-
-    container.replaceChildren(
-      el('div', { className: 'metrics-row mb-24' }, [
-        metricCard(t('monitoring.totalRuns'), formatNumber(cmd.total)),
-        metricCard(t('monitoring.passed'), formatNumber(cmd.passed), 'accent'),
-        metricCard(t('monitoring.failed'), formatNumber(cmd.failed)),
-        metricCard(t('monitoring.tokenSavings'), `${efficiency}%`, 'accent'),
-      ]),
-      el('div', { className: 'grid-2' }, [
-        chartContainer(t('monitoring.tokenBreakdown'), 'mon-token-breakdown'),
-        chartContainer(t('monitoring.passFailRatio'), 'mon-passfail'),
-      ])
-    )
-
-    // Token breakdown
-    const tokenEl = $('#mon-token-breakdown')
-    if (tokenEl) {
-      const chart = echarts.init(tokenEl, getTheme() === 'dark' ? 'dark' : null)
-      registerChart(chart)
-      chart.setOption({
-        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-        series: [{
-          type: 'pie', radius: ['40%', '70%'],
-          label: { color: '#a1a1a1', formatter: '{b}\n{d}%' },
-          data: [
-            { name: t('monitoring.compressed'), value: cmd.compressedEstimatedTokens, itemStyle: { color: '#5588ff' } },
-            { name: t('monitoring.saved'), value: cmd.savedEstimatedTokens, itemStyle: { color: '#00dc82' } },
-          ],
-        }],
-      })
-    }
-
-    // Pass/Fail
-    const pfEl = $('#mon-passfail')
-    if (pfEl) {
-      const chart = echarts.init(pfEl, getTheme() === 'dark' ? 'dark' : null)
-      registerChart(chart)
-      chart.setOption({
-        tooltip: { trigger: 'item' },
-        series: [{
-          type: 'pie', radius: ['40%', '70%'],
-          label: { color: '#a1a1a1', formatter: '{b}\n{c}' },
-          data: [
-            { name: t('monitoring.passed'), value: cmd.passed, itemStyle: { color: '#00dc82' } },
-            { name: t('monitoring.failed'), value: cmd.failed, itemStyle: { color: '#ff4444' } },
-          ],
-        }],
-      })
-    }
-  }
-
-  window.DashboardPages = window.DashboardPages || {}
-  window.DashboardPages.monitoring = renderMonitoring
-})()

package/dist/dashboard/spa/pages/overview.js

@@ -1,301 +0,0 @@
-/**
- * Overview Page — Dashboard home with key metrics, charts, and event stream
- */
-;(() => {
-  'use strict'
-
-  const { fetchJSON, formatNumber, formatTime, relativeTime, registerChart, getTheme, runtimeLabel, t, $, dom } = window.Dashboard
-  const { autoRefreshControl, chartContainer, dataNote, dataTable, el, emptyState, metricCard, panel, renderText, safeClassToken } = dom
-
-  async function renderOverview() {
-    const app = $('#app')
-    const eventCount = el('span', { className: 'count', id: 'ov-event-count' })
-    const projectCount = el('span', { className: 'count', id: 'ov-project-count' })
-    const refresh = el('button', { className: 'topo-btn', text: t('overview.refreshSnapshot'), title: t('common.manualRefreshHint') })
-    async function loadSnapshot() {
-      if (!$('#ov-metrics')) return
-      const [state, metrics, projects] = await Promise.all([
-        fetchJSON('/api/state'),
-        fetchJSON('/api/metrics'),
-        fetchJSON('/api/projects/summary'),
-      ])
-      if (!$('#ov-metrics')) return
-      renderMetricCards(state, metrics)
-      renderOverviewDataNote()
-      renderProjectSummary(projects)
-      renderArtifactChart(state)
-      renderGateChart(metrics)
-      renderEventStream(state)
-      renderPending(state)
-    }
-    refresh.addEventListener('click', loadSnapshot)
-    app.replaceChildren(
-      el('div', { className: 'page-toolbar' }, [
-        refresh,
-        autoRefreshControl(loadSnapshot),
-        el('span', { className: 'section-copy', text: t('overview.dataHint') }),
-      ]),
-      el('div', { id: 'ov-data-note' }),
-      el('div', { className: 'metrics-row', id: 'ov-metrics' }),
-      panel(t('overview.projects'), 'ov-projects', { titleSuffix: projectCount }),
-      el('div', { className: 'grid-2 mb-24' }, [
-        chartContainer(t('overview.artifactDistribution'), 'ov-artifact-chart'),
-        chartContainer(t('overview.gateStatus'), 'ov-gate-chart'),
-      ]),
-      el('div', { className: 'grid-2' }, [
-        panel(t('overview.recentEvents'), 'ov-events', { titleSuffix: eventCount }),
-        panel(t('overview.pendingActions'), 'ov-pending'),
-      ])
-    )
-    $('#ov-events').className = 'event-stream'
-
-    await loadSnapshot()
-  }
-
-  function renderOverviewDataNote() {
-    const node = $('#ov-data-note')
-    if (!node) return
-    node.replaceChildren(dataNote([
-      { strong: true, text: t('common.mixedRefresh') },
-      `${t('common.lastLoaded')}: ${formatTime(Date.now())}`,
-      t('common.manualRefreshHint'),
-      t('common.liveStreamHint'),
-    ]))
-  }
-
-  function renderMetricCards(state, metrics) {
-    const container = $('#ov-metrics')
-    if (!container) return
-    if (!state) {
-      renderText(container, t('common.noData'), 'text-muted')
-      return
-    }
-
-    const artifactCount = countArtifacts(state.artifacts)
-    const defectCount = state.autoDefectStats?.totalDefects ?? 0
-    const taskCount = metrics?.taskMetrics?.recentTasks ?? 0
-    const firstPass = metrics?.taskMetrics?.recentFirstPassRate ?? 0
-    const eventCount = state.recentEvents?.length ?? 0
-    const savedTokens = metrics?.commandRuns?.savedEstimatedTokens ?? 0
-
-    const cards = [
-      { label: t('overview.totalArtifacts'), value: formatNumber(artifactCount), cls: 'accent' },
-      { label: t('overview.pendingReviews'), value: formatNumber(taskCount), cls: '' },
-      { label: t('overview.activeGates'), value: (firstPass * 100).toFixed(0) + '%', cls: firstPass >= 0.8 ? 'accent' : '' },
-      { label: t('overview.defects'), value: formatNumber(defectCount), cls: defectCount > 0 ? '' : 'accent' },
-      { label: t('costs.tokensSaved'), value: formatNumber(savedTokens), cls: savedTokens > 0 ? 'accent' : '' },
-    ]
-
-    container.replaceChildren(...cards.map(c => metricCard(c.label, c.value, c.cls)))
-  }
-
-  function renderProjectSummary(report) {
-    const container = $('#ov-projects')
-    const countEl = $('#ov-project-count')
-    const panelNode = container?.closest('.panel')
-    const projects = report?.projects ?? []
-    if (!container || !panelNode) return
-    if (projects.length <= 1) {
-      panelNode.style.display = 'none'
-      return
-    }
-    panelNode.style.display = ''
-    countEl.textContent = `(${projects.length})`
-    const rows = projects.map(item => {
-      const projectLink = item.project.url
-        ? el('a', { text: item.project.name, attrs: { href: item.project.url, title: item.project.projectDir } })
-        : el('span', { text: item.project.name, title: item.project.projectDir })
-      const nameCell = [projectLink]
-      if (item.project.current) nameCell.push(el('span', { className: 'count', text: ` ${t('overview.currentProject')}` }))
-      return el('tr', {}, [
-        el('td', {}, nameCell),
-        el('td', {}, [
-          el('span', {
-            className: `badge ${healthClass(item.health)}`,
-            text: runtimeLabel('health', item.health),
-          }),
-        ]),
-        el('td', { text: formatNumber(item.documents?.total ?? 0) }),
-        el('td', { text: `${formatNumber(item.knowledge?.active ?? 0)} / ${formatNumber(item.knowledge?.total ?? 0)}` }),
-        el('td', { text: `${formatPercent(item.metrics?.commandPassRate)} (${t('common.failedCount', { count: formatNumber(item.metrics?.failedCommandRuns ?? 0) })})` }),
-        el('td', { text: formatNumber(item.metrics?.gateFailures ?? 0) }),
-      ])
-    })
-    container.replaceChildren(dataTable([
-      t('overview.colProject'),
-      t('overview.colHealth'),
-      t('overview.colDocuments'),
-      t('overview.colMemory'),
-      t('overview.colCommands'),
-      t('overview.colGateFailures'),
-    ], rows))
-  }
-
-  function healthClass(health) {
-    if (health === 'ready') return 'badge-success'
-    if (health === 'missing') return 'badge-danger'
-    return 'badge-warning'
-  }
-
-  function formatPercent(value) {
-    if (typeof value !== 'number' || Number.isNaN(value)) return '-'
-    return `${Math.round(value * 100)}%`
-  }
-
-  function countArtifacts(roots) {
-    let count = 0
-    const walk = (nodes) => {
-      for (const n of nodes ?? []) { count++; walk(n.children) }
-    }
-    walk(roots)
-    return count
-  }
-
-  function renderArtifactChart(state) {
-    const el = $('#ov-artifact-chart')
-    if (!el) return
-
-    // Count by status
-    const statusCounts = {}
-    const walk = (nodes) => {
-      for (const n of nodes ?? []) {
-        statusCounts[n.status] = (statusCounts[n.status] ?? 0) + 1
-        walk(n.children)
-      }
-    }
-    walk(state?.artifacts ?? [])
-
-    const entries = Object.entries(statusCounts)
-    if (entries.length === 0) {
-      el.replaceChildren(emptyState(t('overview.noArtifacts')))
-      return
-    }
-
-    echarts.getInstanceByDom(el)?.dispose()
-    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-
-    const colors = {
-      DRAFT: '#666', REVIEWING: '#ffaa00', FROZEN: '#5588ff',
-      COMPLETED: '#00dc82', BLOCKED: '#ff4444', IN_PROGRESS: '#ffaa00',
-      DONE: '#00dc82', PROPOSED: '#5588ff', APPROVED: '#00dc82', REJECTED: '#ff4444',
-    }
-
-    chart.setOption({
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      series: [{
-        type: 'pie', radius: ['40%', '70%'], center: ['50%', '50%'],
-        itemStyle: { borderRadius: 6, borderColor: 'transparent', borderWidth: 2 },
-        label: { show: true, color: getTheme() === 'dark' ? '#a1a1a1' : '#555' },
-        data: entries.map(([status, count]) => ({
-          value: count, name: status,
-          itemStyle: { color: colors[status] || '#888' },
-        })),
-      }],
-    })
-
-    window.addEventListener('themechange', () => {
-      chart.dispose()
-      renderArtifactChart(state)
-    })
-  }
-
-  function renderGateChart(metrics) {
-    const el = $('#ov-gate-chart')
-    if (!el) return
-
-    const gateFailures = metrics?.gateFailures
-    if (!gateFailures || gateFailures.total === 0) {
-      el.replaceChildren(emptyState(t('overview.noGateData')))
-      return
-    }
-
-    const gates = Object.entries(gateFailures.byGate).sort((a, b) => b[1] - a[1]).slice(0, 10)
-    const passed = gateFailures.total - gateFailures.failed
-
-    echarts.getInstanceByDom(el)?.dispose()
-    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-    chart.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: 60, right: 20, top: 20, bottom: 30 },
-      xAxis: { type: 'category', data: [t('monitoring.passed'), t('monitoring.failed')], axisLabel: { color: '#a1a1a1' } },
-      yAxis: { type: 'value', axisLabel: { color: '#a1a1a1' }, splitLine: { lineStyle: { color: '#2a2a2a' } } },
-      series: [{
-        type: 'bar', barWidth: 40,
-        data: [
-          { value: passed, itemStyle: { color: '#00dc82', borderRadius: [4, 4, 0, 0] } },
-          { value: gateFailures.failed, itemStyle: { color: '#ff4444', borderRadius: [4, 4, 0, 0] } },
-        ],
-      }],
-    })
-  }
-
-  function renderEventStream(state) {
-    const container = $('#ov-events')
-    const countEl = $('#ov-event-count')
-    if (!container || !countEl) return
-    const events = state?.recentEvents ?? []
-
-    if (events.length === 0) {
-      countEl.textContent = ''
-      renderText(container, t('overview.noEvents'), 'text-muted text-sm')
-      return
-    }
-
-    countEl.textContent = `(${events.length})`
-    container.replaceChildren(...events.slice(0, 20).map(e => {
-      const artifactText = e.artifactId ? t('monitoring.artifactPrefix', { id: e.artifactId.slice(0, 8) }) : ''
-      return el('div', { className: 'event-item' }, [
-        el('span', { className: 'event-type', text: e.type }),
-        el('span', { className: 'text-sm', text: artifactText }),
-        el('span', { className: 'event-time', text: relativeTime(e.timestamp) }),
-      ])
-    }))
-  }
-
-  function renderPending(state) {
-    const container = $('#ov-pending')
-    if (!container) return
-    const artifacts = state?.artifacts ?? []
-
-    // Find artifacts that need attention (REVIEWING, PROPOSED, BLOCKED)
-    const pending = []
-    const walk = (nodes) => {
-      for (const n of nodes ?? []) {
-        if (['REVIEWING', 'PROPOSED', 'BLOCKED', 'IN_PROGRESS'].includes(n.status)) {
-          pending.push(n)
-        }
-        walk(n.children)
-      }
-    }
-    walk(artifacts)
-
-    if (pending.length === 0) {
-      container.replaceChildren(emptyState(t('overview.noActions'), '\u2713'))
-      return
-    }
-
-    const rows = pending.slice(0, 10).map(a => {
-      const status = String(a.status ?? '')
-      return el('tr', {}, [
-        el('td', { text: a.title }),
-        el('td', { className: 'text-muted', text: a.type }),
-        el('td', {}, [
-          el('span', { className: `badge-status badge-${safeClassToken(status)}`, text: runtimeLabel('status', status) }),
-        ]),
-        el('td', { className: 'text-muted text-sm', text: relativeTime(a.createdAt) }),
-      ])
-    })
-    container.replaceChildren(dataTable([
-      t('overview.colArtifact'),
-      t('workflow.colType'),
-      t('workflow.colStatus'),
-      t('overview.colTime'),
-    ], rows))
-  }
-
-  // Export
-  window.DashboardPages = window.DashboardPages || {}
-  window.DashboardPages.overview = renderOverview
-})()