@hongmaple0820/scale-engine 0.49.0 → 0.50.1

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

@@ -0,0 +1,361 @@
+/**
+ * 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

@@ -0,0 +1,301 @@
+/**
+ * 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
+})()