Vendorize Lovart dashboard shell
这个提交包含在：
hao
@@ -0,0 +1,708 @@
|
||||
const state = {
|
||||
summary: null,
|
||||
runs: [],
|
||||
systems: [],
|
||||
advisories: {},
|
||||
profiles: {},
|
||||
selectedRunId: null,
|
||||
selectedArtifact: null,
|
||||
refreshHandle: null,
|
||||
refreshMs: 5000,
|
||||
autoRefresh: true,
|
||||
filters: {
|
||||
search: "",
|
||||
system: "",
|
||||
status: "",
|
||||
profile: ""
|
||||
},
|
||||
panels: {
|
||||
timeline: true,
|
||||
reasoning: true,
|
||||
evidence: true,
|
||||
logs: true,
|
||||
sources: true,
|
||||
run_json: false,
|
||||
advisory_json: false,
|
||||
profile_json: false
|
||||
}
|
||||
};
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const icon = (name, className = "icon") =>
|
||||
`<svg class="${className}" aria-hidden="true"><use href="./assets/icons.svg#${name}"></use></svg>`;
|
||||
|
||||
const statusClass = (status) => ({
|
||||
"verified-real": "status-pill status-verified-real",
|
||||
"verified-synthetic": "status-pill status-verified-synthetic",
|
||||
"blocked-artifact": "status-pill status-blocked-artifact",
|
||||
"blocked-destructive": "status-pill status-blocked-destructive",
|
||||
"triage-manual": "status-pill status-triage-manual",
|
||||
"suspected": "status-pill status-suspected",
|
||||
completed: "status-pill status-verified-real",
|
||||
failed: "status-pill status-blocked-artifact",
|
||||
skipped: "status-pill status-triage-manual"
|
||||
}[status] || "status-pill status-default");
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """);
|
||||
}
|
||||
|
||||
function formatStatus(value) {
|
||||
return String(value || "unknown").replaceAll("-", " ");
|
||||
}
|
||||
|
||||
function timeAgo(value) {
|
||||
if (!value) return "-";
|
||||
const diff = Date.now() - new Date(value).getTime();
|
||||
if (Number.isNaN(diff)) return value;
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
async function fetchJson(url) {
|
||||
const response = await fetch(`${url}?t=${Date.now()}`, { cache: "no-store" });
|
||||
if (!response.ok) {
|
||||
throw new Error(`${url} -> ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function distinct(values) {
|
||||
return [...new Set(values.filter(Boolean))].sort();
|
||||
}
|
||||
|
||||
function sumStatuses(predicate) {
|
||||
return Object.entries(state.summary?.statuses || {})
|
||||
.filter(([key]) => predicate(key))
|
||||
.reduce((sum, [, value]) => sum + Number(value || 0), 0);
|
||||
}
|
||||
|
||||
function metricCards() {
|
||||
const successCount = Number(state.summary?.statuses?.["verified-real"] || 0) + Number(state.summary?.statuses?.["verified-synthetic"] || 0);
|
||||
const blockedCount = sumStatuses((key) => key.startsWith("blocked"));
|
||||
const inProgressCount = Math.max(Number(state.summary?.run_count || 0) - successCount - blockedCount, 0);
|
||||
|
||||
return [
|
||||
{
|
||||
label: "Total Runs",
|
||||
value: state.summary?.run_count || 0,
|
||||
note: `${state.summary?.advisory_count || 0} advisories indexed`,
|
||||
color: "var(--accent-purple)",
|
||||
iconName: "report"
|
||||
},
|
||||
{
|
||||
label: "Success",
|
||||
value: successCount,
|
||||
note: "verified-real + verified-synthetic",
|
||||
color: "var(--accent-green)",
|
||||
iconName: "shield"
|
||||
},
|
||||
{
|
||||
label: "Blocked",
|
||||
value: blockedCount,
|
||||
note: "artifact or destructive blockers",
|
||||
color: "var(--accent-red)",
|
||||
iconName: "failure"
|
||||
},
|
||||
{
|
||||
label: "In Progress",
|
||||
value: inProgressCount,
|
||||
note: "manual review or incomplete verification",
|
||||
color: "var(--accent-blue)",
|
||||
iconName: "timeline"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function renderMetrics() {
|
||||
$("metricCards").innerHTML = metricCards()
|
||||
.map(
|
||||
(card) => `
|
||||
<article class="metric-card" style="--metric-color:${card.color}">
|
||||
<div class="metric-label">${icon(card.iconName)}<span>${escapeHtml(card.label)}</span></div>
|
||||
<div class="metric-value">${escapeHtml(card.value)}</div>
|
||||
<div class="metric-note">${escapeHtml(card.note)}</div>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderSyncState(kind, title, detail) {
|
||||
$("syncState").innerHTML = `
|
||||
${icon("sync", "icon icon-sync")}
|
||||
<div>
|
||||
<strong>${escapeHtml(title)}</strong>
|
||||
<span>${escapeHtml(detail)}</span>
|
||||
</div>
|
||||
`;
|
||||
$("syncState").dataset.kind = kind;
|
||||
}
|
||||
|
||||
function hydrateFilters() {
|
||||
const controls = [
|
||||
["systemFilter", "system", state.runs.map((item) => item.system_id), "All systems"],
|
||||
["statusFilter", "status", state.runs.map((item) => item.verification_status), "All statuses"],
|
||||
["profileFilter", "profile", state.runs.map((item) => item.repro_profile_id), "All profiles"]
|
||||
];
|
||||
|
||||
for (const [id, key, values, label] of controls) {
|
||||
const control = $(id);
|
||||
const current = state.filters[key];
|
||||
control.innerHTML = `<option value="">${label}</option>`;
|
||||
control.innerHTML += distinct(values)
|
||||
.map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(value)}</option>`)
|
||||
.join("");
|
||||
control.value = current;
|
||||
}
|
||||
}
|
||||
|
||||
function filteredRuns() {
|
||||
return state.runs.filter((item) => {
|
||||
if (state.filters.system && item.system_id !== state.filters.system) return false;
|
||||
if (state.filters.status && item.verification_status !== state.filters.status) return false;
|
||||
if (state.filters.profile && item.repro_profile_id !== state.filters.profile) return false;
|
||||
if (!state.filters.search) return true;
|
||||
const haystack = [
|
||||
item.run_id,
|
||||
item.advisory_id,
|
||||
item.system_id,
|
||||
item.repro_profile_id,
|
||||
item.advisory_meta?.title || "",
|
||||
item.advisory_meta?.summary || ""
|
||||
]
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
return haystack.includes(state.filters.search);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSystems() {
|
||||
$("systemStats").innerHTML = state.systems.length
|
||||
? state.systems
|
||||
.map((system) => {
|
||||
const total = Math.max(Number(system.total || 0), 1);
|
||||
const verified = Number(system.verified_real || 0) + Number(system.verified_synthetic || 0);
|
||||
const coverage = Math.round((verified / total) * 100);
|
||||
return `
|
||||
<article class="system-card">
|
||||
<div class="timeline-head">
|
||||
<strong class="system-title">${escapeHtml(system.display_name || system.system_id)}</strong>
|
||||
<span class="section-chip">${escapeHtml(system.browser_present || 0)}/${escapeHtml(system.browser_required || 0)} browser</span>
|
||||
</div>
|
||||
<div class="muted">${escapeHtml(system.system_id)} · latest ${escapeHtml(system.latest_update || "-")}</div>
|
||||
<div class="tag-row" style="margin-top:10px;">
|
||||
<span class="tag">real ${escapeHtml(system.verified_real || 0)}</span>
|
||||
<span class="tag">synthetic ${escapeHtml(system.verified_synthetic || 0)}</span>
|
||||
<span class="tag">blocked ${escapeHtml(system.blocked || 0)}</span>
|
||||
</div>
|
||||
<div class="meter"><span style="--fill:${coverage}%"></span></div>
|
||||
</article>
|
||||
`;
|
||||
})
|
||||
.join("")
|
||||
: `<div class="empty-state">No system coverage data.</div>`;
|
||||
}
|
||||
|
||||
function renderRecentFailures() {
|
||||
const failures = state.summary?.recent_failures || [];
|
||||
$("recentFailures").innerHTML = failures.length
|
||||
? failures
|
||||
.map(
|
||||
(item) => `
|
||||
<article class="failure-card">
|
||||
<div class="timeline-head">
|
||||
<strong class="failure-title">${escapeHtml(item.run_id)}</strong>
|
||||
<span class="${statusClass(item.status)}">${escapeHtml(formatStatus(item.status))}</span>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:8px;">${escapeHtml(item.title || item.advisory_id)}</div>
|
||||
<div class="failure-reason" style="margin-top:8px;">${escapeHtml(item.blocked_reason || "-")}</div>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("")
|
||||
: `<div class="empty-state">No recent blockers.</div>`;
|
||||
}
|
||||
|
||||
function renderRunQueue() {
|
||||
const runs = filteredRuns();
|
||||
$("runCount").textContent = `${runs.length} shown`;
|
||||
$("runQueue").innerHTML = runs.length
|
||||
? runs
|
||||
.map((item) => {
|
||||
const active = item.run_id === state.selectedRunId ? "is-active" : "";
|
||||
const browserState = item.browser_evidence?.present ? "ready" : (item.browser_evidence?.required ? "required" : "optional");
|
||||
const lead = item.reasoning_lines?.[0] || item.blocked_reason || item.advisory_meta?.summary || "";
|
||||
return `
|
||||
<button class="run-card ${active}" type="button" data-run-id="${escapeHtml(item.run_id)}">
|
||||
<div class="run-topline">
|
||||
<strong class="run-title">${escapeHtml(item.run_id)}</strong>
|
||||
<span class="${statusClass(item.verification_status)}">${escapeHtml(formatStatus(item.verification_status))}</span>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:8px;">${escapeHtml(item.advisory_meta?.title || item.advisory_id)}</div>
|
||||
<div class="run-meta" style="margin-top:8px;">
|
||||
<span>${escapeHtml(item.system_id)}</span>
|
||||
<span>${escapeHtml(item.repro_profile_id)}</span>
|
||||
<span>${escapeHtml(timeAgo(item.finished_at))}</span>
|
||||
</div>
|
||||
<div class="tag-row" style="margin-top:10px;">
|
||||
<span class="tag">artifacts ${escapeHtml((item.artifact_groups || []).reduce((sum, group) => sum + group.count, 0))}</span>
|
||||
<span class="tag">browser ${escapeHtml(browserState)}</span>
|
||||
</div>
|
||||
<div class="muted" style="margin-top:10px;">${escapeHtml(lead)}</div>
|
||||
</button>
|
||||
`;
|
||||
})
|
||||
.join("")
|
||||
: `<div class="empty-state">No runs match the current filters.</div>`;
|
||||
|
||||
document.querySelectorAll("[data-run-id]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
state.selectedRunId = button.dataset.runId;
|
||||
location.hash = `run=${state.selectedRunId}`;
|
||||
renderRunQueue();
|
||||
renderDetail();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function progressSegments(progress) {
|
||||
const order = [
|
||||
["completed", "Completed", "progress-completed"],
|
||||
["blocked", "Blocked", "progress-blocked"],
|
||||
["failed", "Failed", "progress-failed"],
|
||||
["skipped", "Skipped", "progress-skipped"],
|
||||
["planned", "Planned", "progress-planned"],
|
||||
["other", "Other", "progress-other"]
|
||||
];
|
||||
const total = order.reduce((sum, [key]) => sum + Number(progress?.[key] || 0), 0);
|
||||
if (!total) {
|
||||
return {
|
||||
bar: `<div class="progress-segment progress-other" style="width:100%"></div>`,
|
||||
legend: `<span class="tag"><span class="swatch progress-other"></span>no progress</span>`
|
||||
};
|
||||
}
|
||||
const bar = order
|
||||
.filter(([key]) => Number(progress?.[key] || 0) > 0)
|
||||
.map(([key, _label, className]) => {
|
||||
const pct = Math.max((Number(progress[key] || 0) / total) * 100, 4);
|
||||
return `<span class="progress-segment ${className}" style="width:${pct}%"></span>`;
|
||||
})
|
||||
.join("");
|
||||
const legend = order
|
||||
.filter(([key]) => Number(progress?.[key] || 0) > 0)
|
||||
.map(([key, label, className]) => `<span class="tag"><span class="swatch ${className}"></span>${escapeHtml(label)} ${escapeHtml(progress[key] || 0)}</span>`)
|
||||
.join("");
|
||||
return { bar, legend };
|
||||
}
|
||||
|
||||
function timelineTone(status) {
|
||||
if (status === "completed" || status === "verified-real" || status === "verified-synthetic") return "timeline-success";
|
||||
if (String(status || "").startsWith("blocked") || status === "failed") return "timeline-blocked";
|
||||
if (status === "planned") return "timeline-pending";
|
||||
return "timeline-neutral";
|
||||
}
|
||||
|
||||
function renderPanel(panelKey, title, meta, iconName, content) {
|
||||
const open = state.panels[panelKey] !== false;
|
||||
return `
|
||||
<section class="panel ${open ? "" : "is-collapsed"}" data-panel="${panelKey}">
|
||||
<button class="panel-header" type="button" data-panel-toggle="${panelKey}">
|
||||
<span class="panel-title">${icon(iconName)}<span>${escapeHtml(title)}</span></span>
|
||||
<span class="panel-meta">
|
||||
<span>${meta}</span>
|
||||
${icon("chevron", "icon panel-chevron")}
|
||||
</span>
|
||||
</button>
|
||||
<div class="panel-content">
|
||||
<div class="panel-content-inner">${content}</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
function defaultArtifact(run) {
|
||||
const preference = ["attack", "requests", "container", "browser", "baseline", "compose", "reports"];
|
||||
for (const key of preference) {
|
||||
const group = (run.artifact_groups || []).find((item) => item.key === key && item.items?.length);
|
||||
if (!group) continue;
|
||||
const textItem = group.items.find((item) => item.kind === "text");
|
||||
return textItem || group.items[0];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function openArtifact(href, label, kind) {
|
||||
state.selectedArtifact = { href, label, kind };
|
||||
document.querySelectorAll(".artifact-button").forEach((button) => {
|
||||
button.classList.toggle("is-active", button.dataset.href === href);
|
||||
});
|
||||
|
||||
const labelNode = $("viewerLabel");
|
||||
const metaNode = $("viewerMeta");
|
||||
const openNode = $("viewerOpen");
|
||||
const viewer = $("viewerFrame");
|
||||
if (!labelNode || !metaNode || !openNode || !viewer) return;
|
||||
|
||||
labelNode.textContent = label;
|
||||
metaNode.textContent = href;
|
||||
openNode.href = href;
|
||||
|
||||
try {
|
||||
if (kind === "image") {
|
||||
viewer.innerHTML = `<img src="${escapeHtml(href)}?t=${Date.now()}" alt="${escapeHtml(label)}">`;
|
||||
return;
|
||||
}
|
||||
if (href.endsWith(".html")) {
|
||||
viewer.innerHTML = `<iframe src="${escapeHtml(href)}?t=${Date.now()}"></iframe>`;
|
||||
return;
|
||||
}
|
||||
const response = await fetch(`${href}?t=${Date.now()}`, { cache: "no-store" });
|
||||
if (!response.ok) throw new Error(`${href} -> ${response.status}`);
|
||||
const text = await response.text();
|
||||
let formatted = text;
|
||||
if (href.endsWith(".json")) {
|
||||
try {
|
||||
formatted = JSON.stringify(JSON.parse(text), null, 2);
|
||||
} catch (_error) {
|
||||
}
|
||||
}
|
||||
viewer.innerHTML = `<pre>${escapeHtml(formatted)}</pre>`;
|
||||
} catch (error) {
|
||||
viewer.innerHTML = `<pre>Artifact load failed: ${escapeHtml(error.message)}</pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
function bindPanelToggles() {
|
||||
document.querySelectorAll("[data-panel-toggle]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const key = button.dataset.panelToggle;
|
||||
state.panels[key] = !(state.panels[key] !== false);
|
||||
const panel = document.querySelector(`[data-panel="${key}"]`);
|
||||
if (panel) {
|
||||
panel.classList.toggle("is-collapsed", state.panels[key] === false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderDetail() {
|
||||
const run = state.runs.find((item) => item.run_id === state.selectedRunId);
|
||||
if (!run) {
|
||||
$("detailWorkspace").innerHTML = `
|
||||
<div class="workspace-empty">
|
||||
${icon("shield", "icon icon-xl")}
|
||||
<h2>Select a run</h2>
|
||||
<p class="empty-copy">Pick a run from the left queue to inspect timeline, evidence, logs and raw JSON.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const advisory = run.advisory_meta || {};
|
||||
const profile = run.profile_meta || {};
|
||||
const screenshotItems = ((run.artifact_groups || []).find((group) => group.key === "browser")?.items || []).filter((item) => item.kind === "image");
|
||||
const segments = progressSegments(run.progress || {});
|
||||
const browserStatus = run.browser_evidence?.present ? "Ready" : (run.browser_evidence?.required ? "Required" : "Optional");
|
||||
const artifactCount = (run.artifact_groups || []).reduce((sum, group) => sum + Number(group.count || 0), 0);
|
||||
|
||||
const timelineContent = `
|
||||
<div class="progress-bar">${segments.bar}</div>
|
||||
<div class="progress-legend">${segments.legend}</div>
|
||||
<div class="timeline">
|
||||
${(run.timeline || [])
|
||||
.map((item) => `
|
||||
<article class="timeline-item ${timelineTone(item.status)}">
|
||||
<span class="timeline-dot"></span>
|
||||
<div class="timeline-head">
|
||||
<strong>${escapeHtml(item.step || "-")}</strong>
|
||||
<span class="timeline-time">${escapeHtml(item.at || "-")}</span>
|
||||
</div>
|
||||
<div class="${statusClass(item.status || "default")}" style="margin-top:8px;">${escapeHtml(formatStatus(item.status || "unknown"))}</div>
|
||||
<div class="timeline-detail">${escapeHtml(item.detail || "-")}</div>
|
||||
</article>
|
||||
`)
|
||||
.join("") || `<div class="empty-state">No timeline items recorded.</div>`}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const reasoningCards = [
|
||||
{
|
||||
label: "Summary",
|
||||
copy: advisory.summary || "No advisory summary available."
|
||||
},
|
||||
{
|
||||
label: "Success Criteria",
|
||||
copy: (profile.success_criteria || []).join(" | ") || "No success criteria defined."
|
||||
},
|
||||
{
|
||||
label: "Seed / Attack Notes",
|
||||
copy: (run.reasoning_lines || []).join("\n\n") || "No reasoning lines recorded."
|
||||
},
|
||||
{
|
||||
label: "Allowed Targets",
|
||||
copy: (profile.allowed_target_types || []).join(", ") || "No target scope declared."
|
||||
}
|
||||
];
|
||||
|
||||
const reasoningContent = `
|
||||
${run.blocked_reason ? `<div class="callout"><strong>Failure reason</strong><div class="plan-copy">${escapeHtml(run.blocked_reason)}</div></div>` : ""}
|
||||
<div class="tag-row" style="margin-bottom:14px;">
|
||||
<span class="tag">vuln family ${escapeHtml(profile.vuln_family || "unknown")}</span>
|
||||
<span class="tag">cleanup ${escapeHtml(profile.cleanup_policy || "-")}</span>
|
||||
<span class="tag">destructive risk ${escapeHtml(profile.destructive_risk || "-")}</span>
|
||||
<span class="tag">artifact ${escapeHtml(run.artifact_mode || "-")}</span>
|
||||
</div>
|
||||
<div class="plan-grid">
|
||||
${reasoningCards
|
||||
.map(
|
||||
(card) => `
|
||||
<article class="plan-card">
|
||||
<span class="plan-label">${escapeHtml(card.label)}</span>
|
||||
<div class="plan-copy">${escapeHtml(card.copy)}</div>
|
||||
</article>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const evidenceContent = `
|
||||
<div class="artifact-groups">
|
||||
${(run.artifact_groups || [])
|
||||
.map(
|
||||
(group) => `
|
||||
<section class="artifact-group">
|
||||
<h3>${escapeHtml(group.label)} · ${escapeHtml(group.count)}</h3>
|
||||
<div class="artifact-grid">
|
||||
${group.items
|
||||
.map(
|
||||
(item) => `
|
||||
<button class="artifact-button" type="button" data-artifact data-href="${escapeHtml(item.href)}" data-kind="${escapeHtml(item.kind)}" data-label="${escapeHtml(item.label)}">
|
||||
<span>${escapeHtml(item.label)}</span>
|
||||
<span class="artifact-kind">${escapeHtml(item.kind)}</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</section>
|
||||
`
|
||||
)
|
||||
.join("") || `<div class="empty-state">No artifact groups for this run.</div>`}
|
||||
|
||||
${
|
||||
screenshotItems.length
|
||||
? `<div class="gallery">
|
||||
${screenshotItems
|
||||
.map(
|
||||
(item) => `
|
||||
<button class="artifact-button gallery-card" type="button" data-artifact data-href="${escapeHtml(item.href)}" data-kind="${escapeHtml(item.kind)}" data-label="${escapeHtml(item.label)}">
|
||||
<img src="${escapeHtml(item.href)}" alt="${escapeHtml(item.label)}">
|
||||
<span>${escapeHtml(item.label)}</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const logContent = `
|
||||
<div class="viewer-card">
|
||||
<div class="viewer-toolbar">
|
||||
<div>
|
||||
<div id="viewerLabel" class="viewer-label">${escapeHtml(state.selectedArtifact?.label || "Select an artifact")}</div>
|
||||
<div id="viewerMeta" class="viewer-meta">${escapeHtml(state.selectedArtifact?.href || "Artifact preview will appear here.")}</div>
|
||||
</div>
|
||||
<div class="detail-actions">
|
||||
<a id="viewerOpen" class="button button-secondary" href="${escapeHtml(state.selectedArtifact?.href || run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("link")}<span>Open artifact</span></a>
|
||||
<button id="viewerRefresh" class="button button-secondary" type="button">${icon("refresh")}<span>Refresh preview</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="viewerFrame" class="viewer-frame"><pre>Select a report, log, screenshot, JSON or HTML artifact to preview it here.</pre></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const sourcesContent = `
|
||||
<div class="tag-row">
|
||||
${(advisory.aliases || []).map((alias) => `<span class="tag">${escapeHtml(alias)}</span>`).join("")}
|
||||
${(advisory.secure_code_topics || []).map((topic) => `<a class="tag" href="./docs/secure-code-index.html" target="_blank" rel="noreferrer">${escapeHtml(topic)}</a>`).join("")}
|
||||
</div>
|
||||
<div class="source-links">
|
||||
${advisory.official_source_url ? `<a href="${escapeHtml(advisory.official_source_url)}" target="_blank" rel="noreferrer">${escapeHtml(advisory.official_source_url)}</a>` : `<span class="muted">No official source linked.</span>`}
|
||||
${(advisory.secondary_source_urls || []).map((url) => `<a href="${escapeHtml(url)}" target="_blank" rel="noreferrer">${escapeHtml(url)}</a>`).join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const rawRunContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(run, null, 2))}</pre></article>`;
|
||||
const rawAdvisoryContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(advisory, null, 2))}</pre></article>`;
|
||||
const rawProfileContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(profile, null, 2))}</pre></article>`;
|
||||
|
||||
$("detailWorkspace").innerHTML = `
|
||||
<section class="detail-hero">
|
||||
<div class="detail-topline">
|
||||
<span class="${statusClass(run.verification_status)}">${escapeHtml(formatStatus(run.verification_status))}</span>
|
||||
<div class="tag-row">
|
||||
<span class="tag">${escapeHtml(run.system_id)}</span>
|
||||
<span class="tag">${escapeHtml(run.repro_profile_id)}</span>
|
||||
<span class="tag">${escapeHtml(run.verification_mode || "-")}</span>
|
||||
<span class="tag">${escapeHtml(run.target_env || "-")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="detail-title">${escapeHtml(advisory.title || run.advisory_id)}</h2>
|
||||
<div class="detail-subtitle">${escapeHtml(advisory.summary || "No advisory summary available.")}</div>
|
||||
|
||||
<div class="detail-actions">
|
||||
<a class="button button-primary" href="${escapeHtml(run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("report")}<span>HTML report</span></a>
|
||||
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.report_md)}" target="_blank" rel="noreferrer">${icon("markdown")}<span>Markdown</span></a>
|
||||
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.bundle)}" target="_blank" rel="noreferrer">${icon("json")}<span>Run JSON</span></a>
|
||||
</div>
|
||||
|
||||
<div class="detail-stat-grid">
|
||||
<article class="detail-stat">
|
||||
<strong>Timeline Steps</strong>
|
||||
<span>${escapeHtml(run.timeline?.length || 0)}</span>
|
||||
</article>
|
||||
<article class="detail-stat">
|
||||
<strong>Artifacts</strong>
|
||||
<span>${escapeHtml(artifactCount)}</span>
|
||||
</article>
|
||||
<article class="detail-stat">
|
||||
<strong>Browser Evidence</strong>
|
||||
<span>${escapeHtml(browserStatus)}</span>
|
||||
</article>
|
||||
<article class="detail-stat">
|
||||
<strong>Finished</strong>
|
||||
<span>${escapeHtml(timeAgo(run.finished_at))}</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
${renderPanel("timeline", "Progress Timeline", `${escapeHtml(run.timeline?.length || 0)} steps`, "timeline", timelineContent)}
|
||||
${renderPanel("reasoning", "Attack Plan & Reasoning", escapeHtml(profile.vuln_family || "unknown"), "reasoning", reasoningContent)}
|
||||
${renderPanel("evidence", "Evidence Explorer", `${escapeHtml(run.artifact_groups?.length || 0)} groups`, "evidence", evidenceContent)}
|
||||
${renderPanel("logs", "Live Log Viewer", state.selectedArtifact ? "active" : "idle", "logs", logContent)}
|
||||
${renderPanel("sources", "Sources & Fix Topics", `${escapeHtml((advisory.secondary_source_urls || []).length + (advisory.official_source_url ? 1 : 0))} links`, "sources", sourcesContent)}
|
||||
${renderPanel("run_json", "Run JSON", "raw", "json", rawRunContent)}
|
||||
${renderPanel("advisory_json", "Advisory JSON", "raw", "json", rawAdvisoryContent)}
|
||||
${renderPanel("profile_json", "Profile JSON", "raw", "json", rawProfileContent)}
|
||||
`;
|
||||
|
||||
bindPanelToggles();
|
||||
|
||||
document.querySelectorAll("[data-artifact]").forEach((button) => {
|
||||
button.addEventListener("click", () => openArtifact(button.dataset.href, button.dataset.label, button.dataset.kind));
|
||||
});
|
||||
|
||||
$("viewerRefresh")?.addEventListener("click", () => {
|
||||
if (state.selectedArtifact) {
|
||||
openArtifact(state.selectedArtifact.href, state.selectedArtifact.label, state.selectedArtifact.kind);
|
||||
}
|
||||
});
|
||||
|
||||
const artifactExists = (run.artifact_groups || []).some((group) => group.items.some((item) => item.href === state.selectedArtifact?.href));
|
||||
const defaultItem = artifactExists ? state.selectedArtifact : defaultArtifact(run);
|
||||
if (defaultItem) {
|
||||
openArtifact(defaultItem.href, defaultItem.label, defaultItem.kind);
|
||||
}
|
||||
}
|
||||
|
||||
function renderAll() {
|
||||
renderMetrics();
|
||||
renderSystems();
|
||||
renderRecentFailures();
|
||||
renderRunQueue();
|
||||
renderDetail();
|
||||
}
|
||||
|
||||
function attachGlobalEvents() {
|
||||
$("searchInput").addEventListener("input", (event) => {
|
||||
state.filters.search = String(event.target.value || "").trim().toLowerCase();
|
||||
renderRunQueue();
|
||||
});
|
||||
|
||||
[
|
||||
["systemFilter", "system"],
|
||||
["statusFilter", "status"],
|
||||
["profileFilter", "profile"]
|
||||
].forEach(([id, key]) => {
|
||||
$(id).addEventListener("input", (event) => {
|
||||
state.filters[key] = String(event.target.value || "");
|
||||
renderRunQueue();
|
||||
});
|
||||
});
|
||||
|
||||
$("refreshDashboard").addEventListener("click", () => loadData(false));
|
||||
$("autoRefresh").addEventListener("change", (event) => {
|
||||
state.autoRefresh = Boolean(event.target.checked);
|
||||
startRefreshLoop();
|
||||
});
|
||||
}
|
||||
|
||||
function startRefreshLoop() {
|
||||
if (state.refreshHandle) {
|
||||
clearInterval(state.refreshHandle);
|
||||
state.refreshHandle = null;
|
||||
}
|
||||
if (!state.autoRefresh) return;
|
||||
state.refreshHandle = setInterval(() => loadData(true), state.refreshMs);
|
||||
}
|
||||
|
||||
async function loadData(preserveSelection = true) {
|
||||
const previous = state.selectedRunId;
|
||||
renderSyncState("loading", "Refreshing", new Date().toLocaleTimeString());
|
||||
|
||||
try {
|
||||
const [summary, runs, systems, advisories, profiles] = await Promise.all([
|
||||
fetchJson("./summary.json"),
|
||||
fetchJson("./runs.json"),
|
||||
fetchJson("./systems.json"),
|
||||
fetchJson("./advisories.json"),
|
||||
fetchJson("./profiles.json")
|
||||
]);
|
||||
|
||||
state.summary = summary;
|
||||
state.runs = runs;
|
||||
state.systems = systems;
|
||||
state.advisories = advisories;
|
||||
state.profiles = profiles;
|
||||
hydrateFilters();
|
||||
|
||||
const hashRun = location.hash.startsWith("#run=") ? location.hash.replace("#run=", "") : null;
|
||||
const candidate = preserveSelection ? (hashRun || previous) : hashRun;
|
||||
if (candidate && runs.some((item) => item.run_id === candidate)) {
|
||||
state.selectedRunId = candidate;
|
||||
} else {
|
||||
state.selectedRunId = runs[0]?.run_id || null;
|
||||
}
|
||||
|
||||
renderAll();
|
||||
renderSyncState("live", "Live", summary.generated_at || new Date().toISOString());
|
||||
} catch (error) {
|
||||
$("runQueue").innerHTML = `<div class="empty-state">Dashboard load failed: ${escapeHtml(error.message)}</div>`;
|
||||
$("detailWorkspace").innerHTML = `<div class="workspace-empty"><h2>Load failed</h2><p class="empty-copy">${escapeHtml(error.message)}</p></div>`;
|
||||
renderSyncState("error", "Load Failed", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
attachGlobalEvents();
|
||||
await loadData(false);
|
||||
startRefreshLoop();
|
||||
window.addEventListener("hashchange", () => loadData(false));
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
文件差异内容过多而无法显示
加载差异
在新工单中引用
屏蔽一个用户