@hongmaple0820/scale-engine 0.48.0 → 0.50.1

package/dist/dashboard/spa/components/DataTable.js

@@ -0,0 +1,53 @@
+/**
+ * DataTable — Reusable sortable data table
+ * Usage: Dashboard.components.DataTable({ columns, rows, emptyText })
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  /**
+   * @param {Object} opts
+   * @param {Array<{key: string, label: string, width?: string, render?: Function}>} opts.columns
+   * @param {Array<Object>} opts.rows
+   * @param {string} opts.emptyText
+   * @param {string} opts.cls
+   */
+  window.Dashboard.components.DataTable = function DataTable({ columns = [], rows = [], emptyText = 'No data', cls = '' }) {
+    if (!rows.length) {
+      return `<div class="text-muted" style="padding:24px;text-align:center">${emptyText}</div>`
+    }
+
+    const header = columns.map(c =>
+      `<th${c.width ? ` style="width:${c.width}"` : ''}>${c.label}</th>`
+    ).join('')
+
+    const body = rows.map(row => {
+      const cells = columns.map(c => {
+        const value = row[c.key]
+        const rendered = c.render ? c.render(value, row) : escapeHtml(String(value ?? ''))
+        return `<td>${rendered}</td>`
+      }).join('')
+      return `<tr>${cells}</tr>`
+    }).join('')
+
+    return `
+      <div class="table-wrap ${cls}">
+        <table class="data-table">
+          <thead><tr>${header}</tr></thead>
+          <tbody>${body}</tbody>
+        </table>
+      </div>
+    `
+  }
+
+  function escapeHtml(str) {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+  }
+})()

package/dist/dashboard/spa/components/EventStream.js

@@ -0,0 +1,66 @@
+/**
+ * EventStream — Real-time event display
+ * Usage: Dashboard.components.EventStream(events, opts)
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  const { relativeTime, t } = window.Dashboard
+
+  const EVENT_ICONS = {
+    'tool.completed': '✓',
+    'tool.failed': '✗',
+    'review.required': '🔍',
+    'review.passed': '✓',
+    'review.failed': '✗',
+    'hook.deployed': '🔗',
+    'hook.generated': '⚙',
+    'behavior.brute_retry': '⚠',
+    'behavior.premature_done': '⚠',
+    'behavior.blame_shift': '⚠',
+    'evolution.cycle_completed': '🔄',
+    'task.transition': '→',
+  }
+
+  const EVENT_COLORS = {
+    'tool.completed': 'accent',
+    'tool.failed': 'danger',
+    'review.passed': 'success',
+    'review.failed': 'danger',
+    'hook.deployed': 'info',
+    'behavior.brute_retry': 'warning',
+    'behavior.premature_done': 'warning',
+  }
+
+  /**
+   * @param {Array} events
+   * @param {Object} opts
+   * @param {number} opts.limit - Max events to show (default 20)
+   * @param {boolean} opts.showTime - Show relative time (default true)
+   */
+  window.Dashboard.components.EventStream = function EventStream(events = [], opts = {}) {
+    const limit = opts.limit ?? 20
+    const showTime = opts.showTime !== false
+    const sliced = events.slice(0, limit)
+
+    if (!sliced.length) {
+      return `<div class="text-muted" style="padding:16px;text-align:center">${t('common.noEvents') || 'No events'}</div>`
+    }
+
+    return `<div class="event-stream">${sliced.map(ev => {
+      const icon = EVENT_ICONS[ev.type] || '&#8226;'
+      const color = EVENT_COLORS[ev.type] || 'text-2'
+      const typeLabel = ev.type.split('.').pop()
+      return `
+        <div class="event-item">
+          <span class="event-icon ${color}">${icon}</span>
+          <span class="event-type">${typeLabel}</span>
+          ${showTime ? `<span class="event-time">${relativeTime(ev.timestamp)}</span>` : ''}
+        </div>
+      `
+    }).join('')}</div>`
+  }
+})()

package/dist/dashboard/spa/components/LoadingState.js

@@ -0,0 +1,39 @@
+/**
+ * LoadingState — Loading and empty state components
+ * Usage: Dashboard.components.LoadingState(message)
+ *        Dashboard.components.EmptyState({ icon, title, description })
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  window.Dashboard.components.LoadingState = function LoadingState(message = 'Loading...') {
+    return `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <div class="text-muted">${message}</div>
+      </div>
+    `
+  }
+
+  window.Dashboard.components.EmptyState = function EmptyState({ icon = '&#128196;', title = 'No data', description = '' } = {}) {
+    return `
+      <div class="empty-state">
+        <div class="empty-icon">${icon}</div>
+        <div class="empty-title">${title}</div>
+        ${description ? `<div class="empty-desc text-muted">${description}</div>` : ''}
+      </div>
+    `
+  }
+
+  window.Dashboard.components.ErrorState = function ErrorState(message = 'Something went wrong') {
+    return `
+      <div class="empty-state">
+        <div class="empty-icon" style="color:var(--danger)">&#9888;</div>
+        <div class="empty-title">${message}</div>
+      </div>
+    `
+  }
+})()

package/dist/dashboard/spa/components/MetricCard.js

@@ -0,0 +1,30 @@
+/**
+ * MetricCard — Reusable metric display card
+ * Usage: Dashboard.components.MetricCard({ label, value, cls, icon })
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  window.Dashboard.components.MetricCard = function MetricCard({ label, value, cls = '', icon = '' }) {
+    return `
+      <div class="metric-card">
+        ${icon ? `<div class="metric-icon">${icon}</div>` : ''}
+        <div class="metric-label">${label}</div>
+        <div class="metric-value ${cls}">${value}</div>
+      </div>
+    `
+  }
+
+  /**
+   * MetricCardRow — Row of metric cards
+   * Usage: Dashboard.components.MetricRow(cards)
+   */
+  window.Dashboard.components.MetricRow = function MetricRow(cards) {
+    return `<div class="metrics-row">${cards.map(c =>
+      window.Dashboard.components.MetricCard(c)
+    ).join('')}</div>`
+  }
+})()

package/dist/dashboard/spa/components/Panel.js

@@ -0,0 +1,27 @@
+/**
+ * Panel — Reusable content panel with title
+ * Usage: Dashboard.components.Panel({ title, content, cls, badge })
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  window.Dashboard.components.Panel = function Panel({ title = '', content = '', cls = '', badge = '' }) {
+    return `
+      <div class="panel ${cls}">
+        ${title ? `<div class="panel-title">${title}${badge ? ` <span class="count">${badge}</span>` : ''}</div>` : ''}
+        <div class="panel-content">${content}</div>
+      </div>
+    `
+  }
+
+  /**
+   * Grid — 2-column grid layout
+   * Usage: Dashboard.components.Grid2(leftContent, rightContent)
+   */
+  window.Dashboard.components.Grid2 = function Grid2(left, right, cls = '') {
+    return `<div class="grid-2 ${cls}">${left}${right}</div>`
+  }
+})()

package/dist/dashboard/spa/components/StatusBadge.js

@@ -0,0 +1,51 @@
+/**
+ * StatusBadge — Status indicator with color coding
+ * Usage: Dashboard.components.StatusBadge(status)
+ */
+;(() => {
+  'use strict'
+
+  window.Dashboard = window.Dashboard || {}
+  window.Dashboard.components = window.Dashboard.components || {}
+
+  const STATUS_COLORS = {
+    // Artifact statuses
+    DRAFT: 'info',
+    REVIEWING: 'warning',
+    FROZEN: 'accent',
+    DONE: 'success',
+    CANCELLED: 'muted',
+    // Task statuses
+    TODO: 'info',
+    READY: 'info',
+    IN_PROGRESS: 'warning',
+    REVIEW_REQUIRED: 'warning',
+    REVIEW_PASSED: 'accent',
+    COMPLETED: 'success',
+    FAILED: 'danger',
+    // Gate statuses
+    passed: 'success',
+    failed: 'danger',
+    pending: 'warning',
+    // General
+    active: 'accent',
+    inactive: 'muted',
+    error: 'danger',
+  }
+
+  window.Dashboard.components.StatusBadge = function StatusBadge(status, label = '') {
+    const color = STATUS_COLORS[status] || 'info'
+    const text = label || status
+    return `<span class="badge badge-${color}">${text}</span>`
+  }
+
+  /**
+   * PriorityBadge — Priority indicator
+   */
+  window.Dashboard.components.PriorityBadge = function PriorityBadge(priority) {
+    const labels = ['Critical', 'High', 'Medium', 'Low']
+    const colors = ['danger', 'warning', 'info', 'muted']
+    const idx = Math.min(Math.max(Number(priority) || 2, 0), 3)
+    return `<span class="badge badge-${colors[idx]}">${labels[idx]}</span>`
+  }
+})()