@hongmaple0820/scale-engine 0.50.1 → 0.50.2

package/dist/dashboard/spa/pages/workflow-renderers.js

@@ -1,239 +0,0 @@
-/**
- * Workflow page renderers. Kept separate from workflow data flow so the page stays small enough for standards gates.
- */
-;(() => {
-  'use strict'
-
-  const { relativeTime, registerChart, getTheme, runtimeLabel, t, $, dom } = window.Dashboard
-  const { chartContainer, el, emptyState, safeClassToken } = dom
-  const STATUS_COLORS = { DRAFT: '#666', REVIEWING: '#ffaa00', FROZEN: '#5588ff', COMPLETED: '#00dc82', BLOCKED: '#ff4444', IN_PROGRESS: '#ffaa00', DONE: '#00dc82', PROPOSED: '#5588ff', APPROVED: '#00dc82', REJECTED: '#ff4444' }
-
-  function renderCards(container, artifacts, ctx) {
-    if (artifacts.length === 0) {
-      container.replaceChildren(emptyState(t('workflow.noArtifactMatch'), '\uD83D\uDCC4'))
-      return
-    }
-    container.replaceChildren(el('div', { className: 'artifact-grid' }, artifacts.map(artifact => artifactCard(artifact))))
-    ctx.wireActionButtons(container)
-  }
-
-  function artifactCard(artifact) {
-    const gates = artifact.gates ?? []
-    const children = [
-      el('div', { className: 'artifact-card-header' }, [
-        el('span', { className: 'artifact-card-title', text: artifact.title ?? artifact.id ?? '' }),
-        statusBadge(artifact.status),
-      ]),
-      el('div', { className: 'artifact-card-meta', text: `${artifact.type ?? '-'} \u00b7 v${artifact.version ?? '?'} \u00b7 ${relativeTime(artifact.createdAt)}` }),
-    ]
-    if (gates.length > 0) children.push(gateProgressBlock(gates))
-    if (artifact.children?.length) children.push(el('div', { text: t('workflow.childArtifacts', { count: artifact.children.length }), style: { fontSize: '11px', color: 'var(--text-2)', marginTop: '6px' } }))
-    children.push(actionButtons(artifact))
-    return el('div', { className: 'artifact-card', dataset: { id: artifact.id ?? '' } }, children)
-  }
-
-  function renderTable(container, artifacts, ctx) {
-    if (artifacts.length === 0) {
-      container.replaceChildren(emptyState(t('workflow.noArtifactMatch')))
-      return
-    }
-    const headers = [
-      sortableHeader('title', t('workflow.colTitle'), ctx),
-      sortableHeader('type', t('workflow.colType'), ctx),
-      sortableHeader('status', t('workflow.colStatus'), ctx),
-      sortableHeader('version', t('workflow.colVersion'), ctx),
-      el('th', { text: t('workflow.colGates') }),
-      el('th', { text: t('workflow.colCreated') }),
-      el('th', { text: t('workflow.colActions') }),
-    ]
-    container.replaceChildren(el('table', { className: 'data-table' }, [
-      el('thead', {}, [el('tr', {}, headers)]),
-      el('tbody', {}, artifacts.map(tableRow)),
-    ]))
-    ;[...container.querySelectorAll('th[data-sort]')].forEach(header => {
-      header.addEventListener('click', () => ctx.onSort(header.dataset.sort))
-    })
-    ctx.wireActionButtons(container)
-  }
-
-  function tableRow(artifact) {
-    const gates = artifact.gates ?? []
-    const passed = gates.filter(gate => gate.passed).length
-    const gateCell = gates.length > 0
-      ? el('span', { text: `${passed}/${gates.length}`, style: { color: passed === gates.length ? '#00dc82' : '#ffaa00' } })
-      : el('span', { className: 'text-muted', text: '-' })
-    return el('tr', {}, [
-      el('td', { text: artifact.title ?? artifact.id ?? '', style: { fontWeight: '500' } }),
-      el('td', { className: 'text-muted', text: artifact.type ?? '-' }),
-      el('td', {}, [statusBadge(artifact.status)]),
-      el('td', { className: 'text-muted', text: `v${artifact.version ?? '?'}` }),
-      el('td', {}, [gateCell]),
-      el('td', { className: 'text-muted text-sm', text: relativeTime(artifact.createdAt) }),
-      el('td', {}, [actionButtons(artifact, true)]),
-    ])
-  }
-
-  function renderDependencyGraph(container, artifacts) {
-    if (artifacts.length === 0) {
-      container.replaceChildren(emptyState(t('workflow.noArtifacts'), '\uD83D\uDCC4'))
-      return
-    }
-    const graph = chartContainer(t('workflow.artifactDependencyGraph'), 'wf-dep-graph')
-    graph.querySelector('.chart-header')?.appendChild(el('span', { className: 'text-muted text-sm', text: t('workflow.artifactCount', { count: artifacts.length }) }))
-    const graphArea = graph.querySelector('#wf-dep-graph')
-    if (graphArea) graphArea.style.height = '500px'
-    container.replaceChildren(graph)
-
-    const graphNode = $('#wf-dep-graph')
-    if (!graphNode) return
-    const chart = echarts.init(graphNode, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-
-    const nodes = artifacts.map(artifact => ({
-      id: artifact.id,
-      name: truncate(artifact.title ?? artifact.id ?? '', 25),
-      symbolSize: 12 + (artifact.children?.length ?? 0) * 4,
-      itemStyle: { color: STATUS_COLORS[artifact.status] || '#888' },
-      category: artifact.type,
-    }))
-    const links = []
-    for (const artifact of artifacts) for (const child of artifact.children ?? []) links.push({ source: artifact.id, target: child.id })
-    const categories = [...new Set(artifacts.map(artifact => artifact.type).filter(Boolean))].map(type => ({ name: type }))
-
-    chart.setOption({
-      tooltip: { renderMode: 'richText', formatter: params => nodeTooltip(params, artifacts) },
-      legend: { data: categories.map(category => category.name), textStyle: { color: '#a1a1a1', fontSize: 11 }, bottom: 0, type: 'scroll' },
-      series: [{ type: 'graph', layout: 'force', roam: true, draggable: true, force: { repulsion: 200, gravity: 0.1, edgeLength: 80 }, label: { show: true, fontSize: 10, color: '#a1a1a1' }, data: nodes, links, categories, lineStyle: { color: '#444', curveness: 0.1 }, emphasis: { focus: 'adjacency', lineStyle: { width: 3 } } }],
-    })
-  }
-
-  function renderGateAnalysis(container, artifacts) {
-    if (artifacts.length === 0) {
-      container.replaceChildren(emptyState(t('workflow.noArtifacts'), '\uD83D\uDCC4'))
-      return
-    }
-    container.replaceChildren(
-      el('div', { className: 'grid-2 mb-24' }, [chartContainer(t('workflow.gatePassRate'), 'wf-radar'), chartContainer(t('workflow.typeDistribution'), 'wf-type-chart')]),
-      el('div', { className: 'grid-2' }, [chartContainer(t('workflow.statusDistribution'), 'wf-status-chart'), chartContainer(t('workflow.gateFailuresByName'), 'wf-gate-bar')])
-    )
-    const gateStats = {}
-    for (const artifact of artifacts) for (const gate of artifact.gates ?? []) {
-      if (!gateStats[gate.name]) gateStats[gate.name] = { passed: 0, total: 0 }
-      gateStats[gate.name].total++
-      if (gate.passed) gateStats[gate.name].passed++
-    }
-    renderGateRadar(gateStats)
-    renderTypeDistribution(artifacts)
-    renderStatusDistribution(artifacts)
-    renderGateFailures(gateStats)
-  }
-
-  function renderGateRadar(gateStats) {
-    const node = $('#wf-radar')
-    const gateNames = Object.keys(gateStats).slice(0, 10)
-    if (!node) return
-    if (gateNames.length === 0) return node.replaceChildren(emptyState(t('common.noData')))
-    const radar = echarts.init(node, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(radar)
-    radar.setOption({
-      tooltip: {},
-      radar: { indicator: gateNames.map(gate => ({ name: gate, max: gateStats[gate].total })), axisName: { color: '#a1a1a1', fontSize: 10 }, splitArea: { areaStyle: { color: ['rgba(0,220,130,0.02)', 'rgba(0,220,130,0.05)'] } } },
-      series: [{ type: 'radar', data: [
-        { value: gateNames.map(gate => gateStats[gate].passed), name: t('monitoring.passed'), areaStyle: { color: 'rgba(0,220,130,0.2)' }, lineStyle: { color: '#00dc82' }, itemStyle: { color: '#00dc82' } },
-        { value: gateNames.map(gate => gateStats[gate].total - gateStats[gate].passed), name: t('monitoring.failed'), areaStyle: { color: 'rgba(255,68,68,0.2)' }, lineStyle: { color: '#ff4444' }, itemStyle: { color: '#ff4444' } },
-      ] }],
-    })
-  }
-
-  function renderTypeDistribution(artifacts) {
-    const node = $('#wf-type-chart')
-    if (!node) return
-    const counts = {}
-    for (const artifact of artifacts) counts[artifact.type] = (counts[artifact.type] ?? 0) + 1
-    const entries = Object.entries(counts)
-    if (entries.length === 0) return node.replaceChildren(emptyState(t('common.noData')))
-    const chart = echarts.init(node, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-    chart.setOption({ tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: ['35%', '65%'], label: { color: '#a1a1a1', fontSize: 11 }, data: entries.map(([type, count]) => ({ name: type, value: count })) }] })
-  }
-
-  function renderStatusDistribution(artifacts) {
-    const node = $('#wf-status-chart')
-    if (!node) return
-    const counts = {}
-    for (const artifact of artifacts) counts[artifact.status] = (counts[artifact.status] ?? 0) + 1
-    const entries = Object.entries(counts)
-    if (entries.length === 0) return node.replaceChildren(emptyState(t('common.noData')))
-    const chart = echarts.init(node, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-    chart.setOption({ tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: ['35%', '65%'], label: { color: '#a1a1a1', fontSize: 11 }, data: entries.map(([status, count]) => ({ name: runtimeLabel('status', status), value: count, itemStyle: { color: STATUS_COLORS[status] || '#888' } })) }] })
-  }
-
-  function renderGateFailures(gateStats) {
-    const node = $('#wf-gate-bar')
-    if (!node) return
-    const failures = Object.entries(gateStats).map(([name, stats]) => ({ name, failed: stats.total - stats.passed })).filter(gate => gate.failed > 0).sort((left, right) => right.failed - left.failed).slice(0, 10)
-    if (failures.length === 0) return node.replaceChildren(emptyState(t('common.noData')))
-    const chart = echarts.init(node, getTheme() === 'dark' ? 'dark' : null)
-    registerChart(chart)
-    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: failures.map(gate => gate.name), axisLabel: { color: '#a1a1a1', fontSize: 11 } },
-      series: [{ type: 'bar', data: failures.map(gate => ({ value: gate.failed, itemStyle: { color: '#ff4444', borderRadius: [0, 4, 4, 0] } })), barWidth: 18 }],
-    })
-  }
-
-  function actionButtons(artifact, compact = false) {
-    const style = { marginTop: compact ? '0' : '10px', display: 'flex', gap: compact ? '4px' : '6px', flexWrap: 'wrap' }
-    return el('div', { style }, (artifact.availableActions ?? []).map(action => el('button', {
-      className: 'topo-btn wf-action',
-      text: formatAction(action),
-      dataset: { id: artifact.id ?? '', action },
-      style: compact ? { fontSize: '11px', padding: '3px 8px' } : {},
-    })))
-  }
-
-  function gateProgressBlock(gates) {
-    const passed = gates.filter(gate => gate.passed).length
-    const progress = gates.length > 0 ? Math.round((passed / gates.length) * 100) : 0
-    return el('div', { style: { margin: '10px 0' } }, [
-      el('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: '11px', color: 'var(--text-2)', marginBottom: '4px' } }, [el('span', { text: t('workflow.gates') }), el('span', { text: `${passed}/${gates.length}` })]),
-      el('div', { style: { height: '4px', background: 'var(--bg-3)', borderRadius: '2px', overflow: 'hidden' } }, [el('div', { style: { height: '100%', width: `${progress}%`, background: gateProgressColor(progress), borderRadius: '2px', transition: 'width 0.3s' } })]),
-      el('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', marginTop: '6px' } }, gates.map(gate => el('span', { className: `gate-pill ${gate.passed ? 'passed' : 'failed'}`, text: gate.name, title: gate.name }))),
-    ])
-  }
-
-  function sortableHeader(column, label, ctx) {
-    const active = ctx.sortCol() === column
-    const icon = active ? (ctx.sortDir() === 'asc' ? ' \u2191' : ' \u2193') : ''
-    return el('th', { text: `${label}${icon}`, dataset: { sort: column }, style: { cursor: 'pointer' } })
-  }
-
-  function statusBadge(status) {
-    return el('span', { className: `badge-status badge-${safeClassToken(status)}`, text: runtimeLabel('status', status) })
-  }
-
-  function gateProgressColor(progress) {
-    if (progress === 100) return '#00dc82'
-    return progress > 50 ? '#ffaa00' : '#ff4444'
-  }
-
-  function formatAction(action) {
-    return runtimeLabel('action', action)
-  }
-
-  function nodeTooltip(params, artifacts) {
-    if (params.dataType !== 'node') return ''
-    const artifact = artifacts.find(candidate => candidate.id === params.data.id)
-    return [artifact?.title ?? params.name, `${artifact?.type ?? '-'} - ${runtimeLabel('status', artifact?.status)}`, `v${artifact?.version ?? '?'}`].join('\n')
-  }
-
-  function truncate(value, maxLength) {
-    const text = String(value ?? '')
-    return text.length <= maxLength ? text : `${text.slice(0, Math.max(0, maxLength - 3))}...`
-  }
-
-  window.DashboardWorkflowRenderers = { renderCards, renderDependencyGraph, renderGateAnalysis, renderTable }
-})()

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

@@ -1,217 +0,0 @@
-/**
- * Workflow Page v3 - data flow and page events.
- */
-;(() => {
-  'use strict'
-
-  const { fetchJSON, t, $, $$, dom } = window.Dashboard
-  const { el } = dom
-  const renderers = window.DashboardWorkflowRenderers
-
-  const STATUS_ORDER = ['BLOCKED', 'IN_PROGRESS', 'REVIEWING', 'PROPOSED', 'DRAFT', 'FROZEN', 'COMPLETED', 'DONE', 'APPROVED', 'REJECTED']
-
-  let allArtifacts = []
-  let currentState = null
-  let filterStatus = 'all'
-  let filterType = 'all'
-  let filterText = ''
-  let sortCol = null
-  let sortDir = 'asc'
-
-  async function renderWorkflow() {
-    const app = $('#app')
-    const statusFilter = selectFilter('wf-status-filter', `${t('common.all')} ${t('workflow.status')}`)
-    const typeFilter = selectFilter('wf-type-filter', `${t('common.all')} ${t('workflow.type')}`)
-    const searchInput = el('input', {
-      id: 'wf-search',
-      type: 'text',
-      className: 'search-box',
-      placeholder: `${t('common.search')}...`,
-      value: filterText,
-      style: { width: '200px' },
-    })
-
-    app.replaceChildren(
-      el('div', { className: 'tabs', id: 'wf-tabs' }, [
-        tabButton('cards', t('workflow.cards'), true),
-        tabButton('table', t('workflow.table')),
-        tabButton('graph', t('workflow.dependencyGraph')),
-        tabButton('gates', t('workflow.gateAnalysis')),
-      ]),
-      el('div', {
-        id: 'wf-filters',
-        style: { display: 'flex', gap: '12px', marginBottom: '16px', alignItems: 'center', flexWrap: 'wrap' },
-      }, [statusFilter, typeFilter, searchInput, el('span', { className: 'text-muted text-sm', id: 'wf-count' })]),
-      el('div', { id: 'wf-content' }, [el('div', { className: 'loading-placeholder', text: t('common.loading') })])
-    )
-
-    currentState = await fetchJSON('/api/state')
-    allArtifacts = flattenArtifacts(currentState?.artifacts ?? [])
-    await hydrateActions(allArtifacts)
-    populateFilters(statusFilter, typeFilter)
-
-    let currentTab = 'cards'
-    statusFilter.addEventListener('change', event => { filterStatus = event.target.value; renderCurrentTab() })
-    typeFilter.addEventListener('change', event => { filterType = event.target.value; renderCurrentTab() })
-    searchInput.addEventListener('input', event => { filterText = event.target.value.toLowerCase(); renderCurrentTab() })
-    $('#wf-tabs').addEventListener('click', (event) => {
-      const tab = event.target.dataset?.tab
-      if (!tab) return
-      currentTab = tab
-      $$('#wf-tabs .tab').forEach(node => node.classList.toggle('active', node.dataset.tab === tab))
-      renderCurrentTab()
-    })
-
-    function renderCurrentTab() {
-      renderTab(currentTab, getFiltered(), currentState)
-    }
-
-    renderCurrentTab()
-  }
-
-  async function hydrateActions(artifacts) {
-    await Promise.all(artifacts.map(async (artifact) => {
-      try {
-        const data = await fetchJSON(`/api/artifacts/${artifact.id}/actions`)
-        artifact.availableActions = data?.actions ?? []
-      } catch (error) {
-        observeRecoverableError(error)
-        artifact.availableActions = []
-      }
-    }))
-  }
-
-  function selectFilter(id, label) {
-    return el('select', { id, className: 'search-box', style: { width: '140px' } }, [option('all', label)])
-  }
-
-  function tabButton(tab, label, active = false) {
-    return el('div', { className: ['tab', active ? 'active' : ''].filter(Boolean).join(' '), text: label, dataset: { tab } })
-  }
-
-  function option(value, label) {
-    return el('option', { value, text: label })
-  }
-
-  function populateFilters(statusSel, typeSel) {
-    const statuses = new Set(allArtifacts.map(artifact => artifact.status).filter(Boolean))
-    const types = new Set(allArtifacts.map(artifact => artifact.type).filter(Boolean))
-    statusSel.append(...STATUS_ORDER.filter(status => statuses.has(status)).map(status => option(status, status)))
-    statusSel.value = statuses.has(filterStatus) ? filterStatus : 'all'
-    typeSel.append(...[...types].sort().map(type => option(type, type)))
-    typeSel.value = types.has(filterType) ? filterType : 'all'
-  }
-
-  function getFiltered() {
-    let result = allArtifacts
-    if (filterStatus !== 'all') result = result.filter(artifact => artifact.status === filterStatus)
-    if (filterType !== 'all') result = result.filter(artifact => artifact.type === filterType)
-    if (filterText) {
-      result = result.filter((artifact) => {
-        const title = String(artifact.title ?? '').toLowerCase()
-        const type = String(artifact.type ?? '').toLowerCase()
-        return title.includes(filterText) || type.includes(filterText)
-      })
-    }
-    if (!sortCol) return result
-    return [...result].sort((left, right) => {
-      const leftValue = left[sortCol] ?? ''
-      const rightValue = right[sortCol] ?? ''
-      const comparison = typeof leftValue === 'number' ? leftValue - rightValue : String(leftValue).localeCompare(String(rightValue))
-      return sortDir === 'asc' ? comparison : -comparison
-    })
-  }
-
-  function renderTab(tab, artifacts, state) {
-    void state
-    const container = $('#wf-content')
-    const countNode = $('#wf-count')
-    if (countNode) countNode.textContent = t('workflow.artifactCount', { count: artifacts.length })
-    const ctx = {
-      onSort: column => {
-        if (sortCol === column) sortDir = sortDir === 'asc' ? 'desc' : 'asc'
-        else { sortCol = column; sortDir = 'asc' }
-        renderers.renderTable(container, getFiltered(), ctx)
-      },
-      sortCol: () => sortCol,
-      sortDir: () => sortDir,
-      wireActionButtons,
-    }
-    if (tab === 'table') return renderers.renderTable(container, artifacts, ctx)
-    if (tab === 'graph') return renderers.renderDependencyGraph(container, artifacts)
-    if (tab === 'gates') return renderers.renderGateAnalysis(container, artifacts)
-    return renderers.renderCards(container, artifacts, ctx)
-  }
-
-  function showToast(msg, type = 'info') {
-    let toast = $('#wf-toast')
-    if (!toast) {
-      toast = el('div', { id: 'wf-toast' })
-      toast.style.cssText = 'position:fixed;top:70px;right:24px;padding:10px 18px;border-radius:8px;font-size:13px;z-index:999;transition:opacity 0.3s;opacity:0'
-      document.body.appendChild(toast)
-    }
-    const colors = { info: '#5588ff', error: '#ff4444', success: '#00dc82' }
-    toast.textContent = msg
-    toast.style.background = colors[type] || colors.info
-    toast.style.color = '#fff'
-    toast.style.opacity = '1'
-    setTimeout(() => { toast.style.opacity = '0' }, 3000)
-  }
-
-  function flattenArtifacts(roots) {
-    const result = []
-    const walk = (nodes, depth = 0) => {
-      for (const node of nodes ?? []) {
-        result.push({ ...node, depth })
-        walk(node.children, depth + 1)
-      }
-    }
-    walk(roots)
-    return result
-  }
-
-  function wireActionButtons(container) {
-    $$('.wf-action', container).forEach((button) => {
-      button.addEventListener('click', async () => {
-        const { id, action } = button.dataset
-        const originalText = button.textContent
-        button.disabled = true
-        button.textContent = t('common.loading')
-        try {
-          const response = await fetch(`/api/artifacts/${id}/transition`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ action }),
-          })
-          const data = await response.json()
-          if (data.success) {
-            showToast(`${t('workflow.gates')} \u2713`, 'success')
-            renderWorkflow()
-          } else {
-            restoreActionButton(button, originalText)
-            showToast(t('workflow.transitionFailed', { error: data.error }), 'error')
-          }
-        } catch (error) {
-          restoreActionButton(button, originalText)
-          showToast(t('workflow.error', { message: errorMessage(error) }), 'error')
-        }
-      })
-    })
-  }
-
-  function restoreActionButton(button, text) {
-    button.disabled = false
-    button.textContent = text
-  }
-
-  function errorMessage(error) {
-    return error instanceof Error ? error.message : String(error || 'Unknown error')
-  }
-
-  function observeRecoverableError(error) {
-    void error
-  }
-
-  window.DashboardPages = window.DashboardPages || {}
-  window.DashboardPages.workflow = renderWorkflow
-})()