626 lines
29 KiB
HTML
626 lines
29 KiB
HTML
{% extends "ewoooc_base.html" %}
|
||
|
||
{% block title %}AI Code Review - EwoooC{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.code-review-page {
|
||
--bg: var(--momo-bg-paper);
|
||
--panel: var(--momo-bg-surface);
|
||
--border: var(--momo-border-light);
|
||
--text: var(--momo-text-primary);
|
||
--muted: var(--momo-text-secondary);
|
||
--red: var(--momo-danger);
|
||
--orange: var(--momo-warm-clay);
|
||
--yellow: var(--momo-warning);
|
||
--green: var(--momo-success);
|
||
--blue: var(--momo-info);
|
||
--purple: var(--momo-warm-saffron);
|
||
--accent: var(--momo-page-accent);
|
||
color: var(--text);
|
||
font-family: var(--momo-font-family);
|
||
font-size: 14px;
|
||
}
|
||
.code-review-page * { box-sizing: border-box; }
|
||
|
||
/* ── Layout ─────────────────────────────────────────── */
|
||
.topbar { background: var(--momo-dot-grid), var(--panel); border: 1px solid var(--momo-border-strong); border-radius: var(--momo-radius-md); margin-bottom: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
|
||
.topbar h1 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: 0; }
|
||
.topbar .badge { font-size: 11px; padding: 3px 8px; border-radius: var(--momo-radius-sm); background: var(--momo-tag-terra-bg); border: 1px solid var(--momo-tag-terra-border); color: var(--momo-tag-terra-text); }
|
||
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.5s infinite; margin-left: auto; }
|
||
.live-dot.idle { background: var(--muted); animation: none; }
|
||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
|
||
|
||
.layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 12px; min-height: 680px; overflow: visible; }
|
||
.sidebar { background: transparent; overflow: visible; }
|
||
.main { overflow: visible; min-width: 0; }
|
||
.layout,
|
||
.sidebar,
|
||
.main,
|
||
.card,
|
||
.card-header,
|
||
.card-body {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Card ───────────────────────────────────────────── */
|
||
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--momo-radius-md); margin-bottom: 12px; overflow: hidden; box-shadow: none; }
|
||
.card-header { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
|
||
.card-body { padding: 14px; }
|
||
|
||
/* ── Pipeline Steps ──────────────────────────────────── */
|
||
.pipeline { display: flex; flex-direction: column; gap: 6px; }
|
||
.step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--momo-radius-sm); border: 1px solid var(--border); background: var(--momo-bg-paper); transition: border-color .3s; }
|
||
.step.running { border-color: var(--blue); background: var(--momo-info-bg); }
|
||
.step.ok { border-color: var(--green); background: var(--momo-success-bg); }
|
||
.step.error { border-color: var(--red); background: var(--momo-danger-bg); }
|
||
.step-num { width: 22px; height: 22px; border-radius: var(--momo-radius-sm); background: var(--momo-bg-subtle); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.step.ok .step-num,
|
||
.step.running .step-num,
|
||
.step.error .step-num { color: var(--momo-text-inverse); }
|
||
.step.ok .step-num { background: var(--green); }
|
||
.step.running .step-num { background: var(--blue); }
|
||
.step.error .step-num { background: var(--red); }
|
||
.step-info { flex: 1; min-width: 0; }
|
||
.step-name { font-weight: 600; font-size: 13px; }
|
||
.step-agent { font-size: 11px; color: var(--purple); }
|
||
.step-summary { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.step-icon { font-size: 16px; }
|
||
.spinner { display: inline-block; animation: spin .8s linear infinite; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* ── Severity Badges ─────────────────────────────────── */
|
||
.sev-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
|
||
.sev-cell { text-align: center; padding: 10px 6px; border-radius: 6px; border: 1px solid var(--border); }
|
||
.sev-cell .num { font-size: 28px; font-weight: 700; line-height: 1; }
|
||
.sev-cell .lbl { font-size: 11px; color: var(--muted); margin-top: 4px; }
|
||
.sev-critical { border-color: var(--red)!important; } .sev-critical .num { color: var(--red); }
|
||
.sev-high { border-color: var(--orange)!important; } .sev-high .num { color: var(--orange); }
|
||
.sev-medium { border-color: var(--yellow)!important; } .sev-medium .num { color: var(--yellow); }
|
||
.sev-low { border-color: var(--green)!important; } .sev-low .num { color: var(--green); }
|
||
|
||
/* ── Findings Table ──────────────────────────────────── */
|
||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
th { padding: 8px 10px; text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
|
||
td { padding: 8px 10px; border-bottom: 1px solid var(--momo-border-light); vertical-align: top; }
|
||
tr:last-child td { border-bottom: none; }
|
||
tr:hover td { background: var(--momo-bg-paper); }
|
||
.badge-sev { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }
|
||
.badge-CRITICAL { background: var(--momo-danger-bg); color: var(--momo-danger-text); }
|
||
.badge-HIGH { background: var(--momo-warm-clay-soft); color: var(--orange); }
|
||
.badge-MEDIUM { background: var(--momo-warning-bg); color: var(--momo-warning-text); }
|
||
.badge-LOW { background: var(--momo-success-bg); color: var(--momo-success-text); }
|
||
.badge-type { display: inline-block; padding: 1px 6px; border-radius: var(--momo-radius-sm); font-size: 10px; background: var(--momo-bg-paper); color: var(--muted); }
|
||
code { background: var(--momo-bg-paper); padding: 1px 5px; border-radius: var(--momo-radius-xs); font-size: 12px; color: var(--momo-info-text); }
|
||
|
||
/* ── OpenClaw Report ─────────────────────────────────── */
|
||
.report-box { background: var(--momo-bg-paper); border: 1px solid var(--border); border-radius: var(--momo-radius-sm); padding: 12px; font-size: 13px; line-height: 1.6; }
|
||
.report-box b { color: var(--text); }
|
||
|
||
/* ── EA Decision ─────────────────────────────────────── */
|
||
.ea-box { padding: 12px 14px; border-radius: 6px; border-left: 4px solid var(--blue); background: var(--momo-info-bg); }
|
||
.ea-box.critical { border-left-color: var(--red); background: var(--momo-danger-bg); }
|
||
.ea-box.high { border-left-color: var(--orange); background: var(--momo-warm-clay-soft); }
|
||
.ea-box.medium { border-left-color: var(--yellow); }
|
||
.ea-box.low { border-left-color: var(--green); }
|
||
.ea-priority { font-size: 20px; font-weight: 700; }
|
||
.ea-reasoning { color: var(--muted); font-size: 12px; margin-top: 4px; }
|
||
.ea-fix { margin-top: 8px; font-size: 12px; }
|
||
|
||
/* ── History ─────────────────────────────────────────── */
|
||
.hist-item { padding: 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s; }
|
||
.hist-item:hover { border-color: var(--blue); }
|
||
.hist-sha { font-family: monospace; font-size: 12px; color: var(--blue); }
|
||
.hist-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
||
.hist-sev { display: flex; gap: 6px; margin-top: 5px; }
|
||
.hist-sev span { font-size: 11px; padding: 1px 6px; border-radius: 8px; }
|
||
|
||
/* ── Status Bar ──────────────────────────────────────── */
|
||
#statusBar { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; display: none; }
|
||
#statusBar.running { background: var(--momo-info-bg); border: 1px solid var(--blue); }
|
||
#statusBar.completed { background: var(--momo-success-bg); border: 1px solid var(--green); }
|
||
#statusBar.error { background: var(--momo-danger-bg); border: 1px solid var(--red); }
|
||
#statusBar.skipped { background: var(--momo-bg-paper); border: 1px solid var(--border); }
|
||
|
||
/* ── Empty state ─────────────────────────────────────── */
|
||
.empty { text-align: center; padding: 40px; color: var(--muted); }
|
||
.empty .icon { font-size: 40px; margin-bottom: 10px; }
|
||
|
||
/* ── Tabs ────────────────────────────────────────────── */
|
||
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
|
||
.tab { padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--muted); border: 1px solid transparent; }
|
||
.tab.active { background: var(--momo-page-accent-soft); color: var(--text); border-color: var(--momo-page-accent-line); }
|
||
.tab-pane { display: none; }
|
||
.tab-pane.active { display: block; }
|
||
|
||
@media (max-width: 760px) {
|
||
.topbar {
|
||
flex-wrap: wrap;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.topbar h1 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.layout {
|
||
grid-template-columns: 1fr;
|
||
height: auto;
|
||
min-height: calc(100vh - 49px);
|
||
overflow: visible;
|
||
}
|
||
|
||
.sidebar,
|
||
.main {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: visible;
|
||
}
|
||
|
||
.sidebar {
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.card,
|
||
.card-header,
|
||
.card-body,
|
||
.pipeline,
|
||
.step,
|
||
.step-info {
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card-header {
|
||
flex-wrap: wrap;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
#pipelineId {
|
||
flex: 1 1 100%;
|
||
margin-left: 0 !important;
|
||
overflow-wrap: anywhere;
|
||
white-space: normal;
|
||
}
|
||
|
||
.step-name,
|
||
.step-agent,
|
||
.step-summary,
|
||
.hist-sha,
|
||
.hist-meta,
|
||
.report-box,
|
||
.ea-box,
|
||
code {
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.step-summary {
|
||
white-space: normal;
|
||
}
|
||
|
||
.hist-item > div:first-child {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.tabs {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tab {
|
||
flex: 1 1 150px;
|
||
min-width: 0;
|
||
text-align: center;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.empty {
|
||
padding: 28px 16px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
#findingsTable table,
|
||
#findingsTable thead,
|
||
#findingsTable tbody,
|
||
#findingsTable tr,
|
||
#findingsTable td {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
#findingsTable thead {
|
||
display: none;
|
||
}
|
||
|
||
#findingsTable tr {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
#findingsTable tr:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
#findingsTable td {
|
||
border-bottom: 0;
|
||
padding: 6px 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
#findingsTable td::before {
|
||
color: var(--muted);
|
||
content: "";
|
||
display: block;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: .04em;
|
||
margin-bottom: 3px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
#findingsTable td:nth-child(1)::before { content: "嚴重度"; }
|
||
#findingsTable td:nth-child(2)::before { content: "類型"; }
|
||
#findingsTable td:nth-child(3)::before { content: "檔案 / 位置"; }
|
||
#findingsTable td:nth-child(4)::before { content: "問題說明"; }
|
||
#findingsTable td:nth-child(5)::before { content: "修復建議"; }
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="code-review-page">
|
||
|
||
<!-- Top Bar -->
|
||
<div class="topbar">
|
||
<span>🔍</span>
|
||
<h1>AI Code Review</h1>
|
||
<span class="badge">EwoooC · Post-Deploy Pipeline</span>
|
||
<div id="liveDot" class="live-dot idle" title="Pipeline 狀態"></div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- ── Sidebar ─────────────────────────────────────────────────── -->
|
||
<div class="sidebar">
|
||
|
||
<!-- Pipeline Steps -->
|
||
<div class="card">
|
||
<div class="card-header">🤖 Pipeline 進度
|
||
<span id="pipelineId" style="font-size:11px;color:var(--muted);margin-left:auto;font-family:monospace"></span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="pipeline" id="stepsContainer">
|
||
<div class="step" id="step-1"><div class="step-num">1</div><div class="step-info"><div class="step-name">讀取變更檔案</div><div class="step-agent">system</div></div></div>
|
||
<div class="step" id="step-2"><div class="step-num">2</div><div class="step-info"><div class="step-name">Hermes 程式碼掃描</div><div class="step-agent">Hermes · hermes3:latest</div></div></div>
|
||
<div class="step" id="step-3"><div class="step-num">3</div><div class="step-info"><div class="step-name">OpenClaw 架構評估</div><div class="step-agent">OpenClaw · Gemini 2.5</div></div></div>
|
||
<div class="step" id="step-4"><div class="step-num">4</div><div class="step-info"><div class="step-name">Elephant Alpha 決策</div><div class="step-agent">Elephant Alpha · 100B</div></div></div>
|
||
<div class="step" id="step-5"><div class="step-num">5</div><div class="step-info"><div class="step-name">NemoTron 行動派遣</div><div class="step-agent">NemoTron · Dispatcher</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Severity Summary -->
|
||
<div class="card">
|
||
<div class="card-header">📊 問題嚴重度分佈</div>
|
||
<div class="card-body">
|
||
<div class="sev-grid">
|
||
<div class="sev-cell sev-critical"><div class="num" id="cnt-critical">—</div><div class="lbl">🔴 CRITICAL</div></div>
|
||
<div class="sev-cell sev-high"><div class="num" id="cnt-high">—</div><div class="lbl">🟠 HIGH</div></div>
|
||
<div class="sev-cell sev-medium"><div class="num" id="cnt-medium">—</div><div class="lbl">🟡 MEDIUM</div></div>
|
||
<div class="sev-cell sev-low"><div class="num" id="cnt-low">—</div><div class="lbl">🟢 LOW</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Commit Info -->
|
||
<div class="card">
|
||
<div class="card-header">📦 本次部署資訊</div>
|
||
<div class="card-body" id="commitInfo" style="font-size:13px;color:var(--muted);line-height:1.8;">
|
||
<span style="color:var(--muted)">等待下次部署觸發...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- History -->
|
||
<div class="card">
|
||
<div class="card-header">🕐 歷史記錄</div>
|
||
<div class="card-body" style="padding:8px;" id="historyList">
|
||
<div class="empty"><div class="icon">📋</div><div>載入中...</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── Main Content ─────────────────────────────────────────────── -->
|
||
<div class="main">
|
||
|
||
<!-- Status Bar -->
|
||
<div id="statusBar"></div>
|
||
|
||
<!-- Tabs -->
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="switchTab('findings')">⚠️ 問題清單</div>
|
||
<div class="tab" onclick="switchTab('openclaw')">💡 OpenClaw 評估</div>
|
||
<div class="tab" onclick="switchTab('ea')">🤖 Elephant Alpha 決策</div>
|
||
</div>
|
||
|
||
<!-- Tab: Findings -->
|
||
<div class="tab-pane active" id="tab-findings">
|
||
<div class="card">
|
||
<div class="card-header">⚠️ 問題清單
|
||
<span id="findingsCount" style="font-size:11px;color:var(--muted);margin-left:auto"></span>
|
||
</div>
|
||
<div class="card-body" style="padding:0">
|
||
<div id="findingsTable">
|
||
<div class="empty"><div class="icon">🔍</div><div>等待 Code Review 完成...</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: OpenClaw -->
|
||
<div class="tab-pane" id="tab-openclaw">
|
||
<div class="card">
|
||
<div class="card-header">💡 OpenClaw 架構品質評估</div>
|
||
<div class="card-body">
|
||
<div class="report-box" id="openclawReport">
|
||
<span style="color:var(--muted)">等待 OpenClaw 分析完成...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: EA Decision -->
|
||
<div class="tab-pane" id="tab-ea">
|
||
<div class="card">
|
||
<div class="card-header">🤖 Elephant Alpha 決策協調結果</div>
|
||
<div class="card-body">
|
||
<div id="eaDecision">
|
||
<span style="color:var(--muted)">等待 Elephant Alpha 決策...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script>
|
||
const SEV_ORDER = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 };
|
||
let _polling = null;
|
||
let _lastPipelineId = null;
|
||
|
||
// ── Tab switching ──────────────────────────────────────────────────
|
||
function switchTab(name) {
|
||
document.querySelectorAll('.tab').forEach((t,i) => t.classList.toggle('active', ['findings','openclaw','ea'][i] === name));
|
||
document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
|
||
document.getElementById('tab-' + name).classList.add('active');
|
||
}
|
||
|
||
// ── Pipeline step rendering ───────────────────────────────────────
|
||
function renderSteps(steps, currentStep) {
|
||
for (let i = 1; i <= 5; i++) {
|
||
const el = document.getElementById('step-' + i);
|
||
if (!el) continue;
|
||
const info = steps.find(s => s.step === i);
|
||
el.className = 'step';
|
||
const numEl = el.querySelector('.step-num');
|
||
const summEl = el.querySelector('.step-summary') || (() => {
|
||
const d = document.createElement('div');
|
||
d.className = 'step-summary';
|
||
el.querySelector('.step-info').appendChild(d);
|
||
return d;
|
||
})();
|
||
|
||
if (info) {
|
||
if (info.status === 'ok') { el.classList.add('ok'); numEl.textContent = '✓'; }
|
||
else if (info.status === 'error') { el.classList.add('error'); numEl.textContent = '✗'; }
|
||
else if (info.status === 'running') { el.classList.add('running'); numEl.innerHTML = '<span class="spinner">⟳</span>'; }
|
||
summEl.textContent = info.summary || '';
|
||
} else if (i === currentStep) {
|
||
el.classList.add('running');
|
||
numEl.innerHTML = '<span class="spinner">⟳</span>';
|
||
} else {
|
||
numEl.textContent = i;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ── Severity counters ─────────────────────────────────────────────
|
||
function renderSeverity(sev) {
|
||
['critical','high','medium','low'].forEach(k => {
|
||
const el = document.getElementById('cnt-' + k);
|
||
if (el) el.textContent = (sev && sev[k] !== undefined) ? sev[k] : '0';
|
||
});
|
||
}
|
||
|
||
// ── Findings table ────────────────────────────────────────────────
|
||
function renderFindings(findings) {
|
||
const el = document.getElementById('findingsTable');
|
||
document.getElementById('findingsCount').textContent = findings.length ? `共 ${findings.length} 項` : '';
|
||
if (!findings.length) {
|
||
el.innerHTML = '<div class="empty"><div class="icon">✅</div><div>無發現問題</div></div>';
|
||
return;
|
||
}
|
||
const sorted = [...findings].sort((a,b) => (SEV_ORDER[a.severity]||3) - (SEV_ORDER[b.severity]||3));
|
||
el.innerHTML = `<table>
|
||
<thead><tr><th>嚴重度</th><th>類型</th><th>檔案 / 位置</th><th>問題說明</th><th>修復建議</th></tr></thead>
|
||
<tbody>${sorted.map(f => `
|
||
<tr>
|
||
<td><span class="badge-sev badge-${f.severity}">${f.severity}</span></td>
|
||
<td><span class="badge-type">${f.type||'?'}</span></td>
|
||
<td><code>${(f.file||'').split('/').pop()}</code><br><span style="font-size:11px;color:var(--muted)">${f.line_hint||''}</span></td>
|
||
<td>${escHtml(f.description||'')}</td>
|
||
<td style="color:var(--muted)">${escHtml(f.suggestion||'')}</td>
|
||
</tr>`).join('')}
|
||
</tbody></table>`;
|
||
}
|
||
|
||
// ── OpenClaw report ───────────────────────────────────────────────
|
||
function renderOpenClaw(html) {
|
||
document.getElementById('openclawReport').innerHTML = html || '<span style="color:var(--muted)">（未取得）</span>';
|
||
}
|
||
|
||
// ── EA Decision ───────────────────────────────────────────────────
|
||
function renderEA(ea, autoFix) {
|
||
if (!ea || !ea.priority) {
|
||
document.getElementById('eaDecision').innerHTML = '<span style="color:var(--muted)">等待決策...</span>';
|
||
return;
|
||
}
|
||
const priColors = { critical: 'var(--red)', high: 'var(--orange)', medium: 'var(--yellow)', low: 'var(--green)' };
|
||
const col = priColors[ea.priority] || 'var(--blue)';
|
||
const fixFiles = (ea.fix_files||[]).map(f=>`<code>${f}</code>`).join(' ');
|
||
document.getElementById('eaDecision').innerHTML = `
|
||
<div class="ea-box ${ea.priority}">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div class="ea-priority" style="color:${col}">${ea.priority.toUpperCase()}</div>
|
||
<div>${autoFix ? '🔧 <b>自動修復已觸發（AiderHeal）</b>' : (ea.human_review_needed ? '👁 <b>需人工審查</b>' : '✅ <b>無需修復</b>')}</div>
|
||
</div>
|
||
<div class="ea-reasoning">${escHtml(ea.reasoning||'')}</div>
|
||
${fixFiles ? `<div class="ea-fix">修復範圍：${fixFiles}</div>` : ''}
|
||
</div>`;
|
||
}
|
||
|
||
// ── Commit info ───────────────────────────────────────────────────
|
||
function renderCommitInfo(state) {
|
||
const el = document.getElementById('commitInfo');
|
||
if (!state.commit_sha) return;
|
||
const files = (state.changed_files||[]).slice(0,5).map(f=>`<code>${f.split('/').pop()}</code>`).join(' ');
|
||
const more = (state.changed_files||[]).length > 5 ? `<span style="color:var(--muted)">+${state.changed_files.length-5}</span>` : '';
|
||
el.innerHTML = `
|
||
<div><b>Commit</b> <code>${state.commit_sha.slice(0,8)}</code></div>
|
||
<div><b>Branch</b> <code>${state.branch||'?'}</code></div>
|
||
<div><b>模式</b> ${state.deploy_type||'sync'}</div>
|
||
<div><b>變更</b> ${files} ${more}</div>`;
|
||
}
|
||
|
||
// ── Status bar ────────────────────────────────────────────────────
|
||
function renderStatusBar(state) {
|
||
const el = document.getElementById('statusBar');
|
||
const dot = document.getElementById('liveDot');
|
||
if (!state.status) { el.style.display='none'; return; }
|
||
|
||
el.style.display = 'block';
|
||
el.className = state.status;
|
||
const msgs = {
|
||
running: `⟳ <b>Pipeline 執行中</b> — Step ${state.current_step}/5`,
|
||
completed: `✅ <b>Code Review 完成</b> — ${state.message||''}`,
|
||
error: `❌ <b>Pipeline 失敗</b> — ${escHtml(state.message||'')}`,
|
||
skipped: `⏭ <b>已略過</b> — ${escHtml(state.message||'')}`,
|
||
};
|
||
el.innerHTML = msgs[state.status] || '';
|
||
|
||
dot.className = 'live-dot' + (state.status === 'running' ? '' : ' idle');
|
||
}
|
||
|
||
// ── History ───────────────────────────────────────────────────────
|
||
let _historyData = [];
|
||
|
||
function renderHistory(items) {
|
||
_historyData = items;
|
||
const el = document.getElementById('historyList');
|
||
if (!items.length) { el.innerHTML = '<div class="empty"><div>尚無歷史記錄</div></div>'; return; }
|
||
el.innerHTML = items.map((h, idx) => {
|
||
const sev = h.severity_summary || {};
|
||
return `<div class="hist-item" onclick="loadHistoryItem(${idx})" data-idx="${idx}">
|
||
<div style="display:flex;justify-content:space-between">
|
||
<span class="hist-sha">${h.commit_sha}</span>
|
||
<span style="font-size:11px;color:var(--muted)">${h.created_at.slice(0,16).replace('T',' ')}</span>
|
||
</div>
|
||
<div class="hist-meta">🌿 ${h.branch} • ${(h.changed_files||[]).length} 檔案${h.auto_fix?' • 🔧 已自動修復':''}</div>
|
||
<div class="hist-sev">
|
||
${sev.critical?`<span style="background:rgba(248,81,73,.2);color:var(--red)">🔴 ${sev.critical}</span>`:''}
|
||
${sev.high?`<span style="background:rgba(210,153,34,.2);color:var(--orange)">🟠 ${sev.high}</span>`:''}
|
||
${sev.medium?`<span style="background:rgba(227,179,65,.2);color:var(--yellow)">🟡 ${sev.medium}</span>`:''}
|
||
${sev.low?`<span style="background:rgba(63,185,80,.2);color:var(--green)">🟢 ${sev.low}</span>`:''}
|
||
${!h.total_issues?`<span style="color:var(--green)">✅ 無問題</span>`:''}
|
||
</div>
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
function loadHistoryItem(idx) {
|
||
const h = _historyData[idx];
|
||
if (!h) return;
|
||
document.querySelectorAll('.hist-item').forEach((el, i) => {
|
||
el.style.borderColor = i === idx ? 'var(--blue)' : '';
|
||
});
|
||
renderSeverity(h.severity_summary);
|
||
const files = (h.changed_files||[]).slice(0,5).map(f=>`<code>${f.split('/').pop()}</code>`).join(' ');
|
||
const more = (h.changed_files||[]).length > 5 ? `<span style="color:var(--muted)">+${h.changed_files.length-5}</span>` : '';
|
||
document.getElementById('commitInfo').innerHTML = `
|
||
<div><b>Commit</b> <code>${h.commit_sha}</code></div>
|
||
<div><b>Branch</b> <code>${h.branch||'?'}</code></div>
|
||
<div><b>時間</b> ${h.created_at.slice(0,16).replace('T',' ')}</div>
|
||
<div><b>變更</b> ${files} ${more}</div>`;
|
||
document.getElementById('pipelineId').textContent = (h.pipeline_id||'').slice(-14);
|
||
const sBar = document.getElementById('statusBar');
|
||
sBar.style.display = 'block';
|
||
sBar.className = 'completed';
|
||
sBar.innerHTML = `✅ <b>歷史記錄</b> — Commit ${h.commit_sha}${h.auto_fix ? ' 🔧 已自動修復' : ''}`;
|
||
renderFindings(h.findings || []);
|
||
renderOpenClaw(h.openclaw_report || '');
|
||
renderEA(h.ea_decision || {}, h.auto_fix || false);
|
||
for (let i = 1; i <= 5; i++) {
|
||
const el = document.getElementById('step-' + i);
|
||
if (el) { el.className = 'step ok'; el.querySelector('.step-num').textContent = '✓'; }
|
||
}
|
||
}
|
||
|
||
// ── Main polling loop ─────────────────────────────────────────────
|
||
async function poll() {
|
||
try {
|
||
const r = await fetch('/code-review/api/status');
|
||
const state = await r.json();
|
||
|
||
if (state.pipeline_id !== _lastPipelineId && state.pipeline_id) {
|
||
_lastPipelineId = state.pipeline_id;
|
||
}
|
||
|
||
renderStatusBar(state);
|
||
renderSteps(state.steps||[], state.current_step||0);
|
||
renderSeverity(state.severity_summary);
|
||
renderFindings(state.findings||[]);
|
||
renderOpenClaw(state.openclaw_report);
|
||
renderEA(state.ea_decision, state.auto_fix_triggered);
|
||
renderCommitInfo(state);
|
||
document.getElementById('pipelineId').textContent = (state.pipeline_id||'').slice(-14);
|
||
|
||
// 每 3s 輪詢（running）/ 30s（idle）
|
||
const interval = state.status === 'running' ? 3000 : 30000;
|
||
_polling = setTimeout(poll, interval);
|
||
} catch(e) {
|
||
_polling = setTimeout(poll, 10000);
|
||
}
|
||
}
|
||
|
||
async function loadHistory() {
|
||
try {
|
||
const r = await fetch('/code-review/api/history?limit=15');
|
||
const items = await r.json();
|
||
renderHistory(items);
|
||
// 無 active pipeline 且尚未顯示任何 pipeline 內容時，自動展示最新一筆
|
||
if (items.length && !_lastPipelineId) {
|
||
loadHistoryItem(0);
|
||
}
|
||
} catch(e) {
|
||
document.getElementById('historyList').innerHTML = '<div class="empty"><div>載入失敗</div></div>';
|
||
}
|
||
}
|
||
|
||
function escHtml(s) {
|
||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||
}
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────
|
||
poll();
|
||
loadHistory();
|
||
setInterval(loadHistory, 60000);
|
||
</script>
|
||
{% endblock %}
|