mirror of
https://github.com/CyberSecurityUP/NeuroSploit.git
synced 2026-10-18 13:41:32 +02:00
feat(web+report): Wiz-style attack path nodes, inline finding details, PDF formatting
- Graph: circular SVG-icon nodes with colored rings by entity type (Host, Finding, Impact, Credential, etc.) — Wiz/Orca visual style - Graph: per-finding inline detail panel with CWE/CVSS/OWASP/MITRE cards instead of modal popup - Graph: legend uses colored dots matching node ring colors - Settings: fix LLM Provider Keys modal using correct CSS classes (modal-head/modal-foot instead of modal-header/modal-footer) - Report PDF: test accounts rendered as bulleted list instead of run-on paragraph; impact/remediation preserve paragraph breaks Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UqW6BbQgqGkEDn3RYuCVoM
This commit is contained in:
CyberSecurityUPandClaude Opus 4.6 committed
1 parent
f796547803
commit
edc3d83c64
5 files changed
+196
-88
No files matched your search
+78
-37
@@ -3102,6 +3102,28 @@ function gmName(n) {
|
||||
return p.title || p.name || p.category || p.path || p.type || p.address || n.key;
|
||||
}
|
||||
|
||||
const GM_ICON = {
|
||||
Target: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>`,
|
||||
Host: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="14" rx="2"/><line x1="3" y1="14" x2="21" y2="14"/><circle cx="7" cy="9" r="1" fill="currentColor"/><circle cx="7" cy="17" r="1" fill="currentColor"/></svg>`,
|
||||
Service: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2L3 7v10l9 5 9-5V7z"/><line x1="12" y1="12" x2="12" y2="22"/><line x1="3" y1="7" x2="12" y2="12"/><line x1="21" y1="7" x2="12" y2="12"/></svg>`,
|
||||
Technology: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2L3 7v10l9 5 9-5V7z"/><line x1="12" y1="12" x2="12" y2="22"/><line x1="3" y1="7" x2="12" y2="12"/><line x1="21" y1="7" x2="12" y2="12"/></svg>`,
|
||||
Endpoint: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M12 2a10 10 0 0110 10"/><path d="M12 2a10 10 0 00-10 10"/><path d="M12 22a10 10 0 0010-10"/><path d="M12 22a10 10 0 01-10-10"/></svg>`,
|
||||
Vulnerability: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="16" r=".5" fill="currentColor"/></svg>`,
|
||||
Finding: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="16" r=".5" fill="currentColor"/></svg>`,
|
||||
AttackStep: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="13 2 13 9 20 9"/><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>`,
|
||||
ExploitAttempt: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>`,
|
||||
Credential: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1" fill="currentColor"/></svg>`,
|
||||
Secret: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>`,
|
||||
Identity: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
|
||||
Role: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>`,
|
||||
Permission: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>`,
|
||||
Asset: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>`,
|
||||
Control: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
|
||||
BusinessImpact: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
|
||||
Internet: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>`,
|
||||
};
|
||||
function gmIcon(label) { return GM_ICON[label] || GM_ICON.Asset; }
|
||||
|
||||
function renderGraphFindingList(x) {
|
||||
const data = x.graphData?.graph;
|
||||
const list = x.q('gflist');
|
||||
@@ -3133,8 +3155,8 @@ function renderGraphMemory(x) {
|
||||
show(x.q('graph-empty'), !has);
|
||||
show(x.q('wrap'), has);
|
||||
renderGraphFindingList(x);
|
||||
x.q('legend').innerHTML = [['asset', 'asset / host'], ['surface', 'service / endpoint'], ['weak', 'vulnerability / finding'], ['step', 'attack step'], ['cred', 'credential / identity'], ['impact', 'impact']]
|
||||
.map(([k, l]) => `<span class="gm-leg gk-${k}">${esc(l)}</span>`).join('') +
|
||||
x.q('legend').innerHTML = [['internet', 'Internet'], ['asset', 'Host / Target'], ['surface', 'Service / Endpoint'], ['weak', 'Finding'], ['step', 'Attack Step'], ['cred', 'Credential / Role'], ['impact', 'Impact']]
|
||||
.map(([k, l]) => `<span class="gm-leg gk-${k}"><span class="gm-leg-dot"></span>${esc(l)}</span>`).join('') +
|
||||
'<span class="gm-leg-sep"></span><span class="gm-edge-leg es-confirmed">confirmed</span><span class="gm-edge-leg es-needs_validation">needs validation</span><span class="gm-edge-leg es-hypothesis">hypothesis</span>';
|
||||
if (!has) { stage.innerHTML = ''; return; }
|
||||
const filterFid = x.view.filterFinding || null;
|
||||
@@ -3182,22 +3204,17 @@ function renderGraphMemory(x) {
|
||||
if (filterFid) {
|
||||
const fNode = data.nodes.find(n => n.label === 'Finding' && n.key === filterFid);
|
||||
const fid = fNode ? id(fNode) : `Finding|${filterFid}`;
|
||||
// Only keep edges directly involving this finding, then walk outward
|
||||
// from connected non-Finding nodes (hosts, impacts, steps).
|
||||
// Exclude edges connecting OTHER findings to shared hosts.
|
||||
const findingEdges = edges.filter(e => eid(e.from) === fid || eid(e.to) === fid);
|
||||
const reachable = new Set([fid]);
|
||||
for (const e of findingEdges) { reachable.add(eid(e.from)); reachable.add(eid(e.to)); }
|
||||
// Walk traversal edges from those seeds, but never bridge to other findings
|
||||
let changed = true;
|
||||
while (changed) {
|
||||
changed = false;
|
||||
for (const e of edges) {
|
||||
const from = eid(e.from), to = eid(e.to);
|
||||
if (from === fid || to === fid) continue; // already handled
|
||||
if (from === fid || to === fid) continue;
|
||||
const fromIn = reachable.has(from), toIn = reachable.has(to);
|
||||
if (!fromIn && !toIn) continue;
|
||||
// Don't bridge to other finding nodes
|
||||
if (fromIn && !toIn && e.to.label === 'Finding') continue;
|
||||
if (toIn && !fromIn && e.from.label === 'Finding') continue;
|
||||
if (fromIn && !toIn) { reachable.add(to); changed = true; }
|
||||
@@ -3210,29 +3227,46 @@ function renderGraphMemory(x) {
|
||||
if (fNode && descBox) {
|
||||
const f = gmFinding(x, fNode.props?.finding_id);
|
||||
const props = fNode.props || {};
|
||||
const finding = f?.f || {};
|
||||
const cweStr = finding.cwe || props.cwe || '';
|
||||
const cvssStr = finding.cvss || props.cvss || '';
|
||||
const owasp = finding.owasp || '';
|
||||
const mitre = finding.mitre || props.mitre || '';
|
||||
const stageVal = finding.stage || props.stage || '';
|
||||
const exploitability = finding.exploitability || '';
|
||||
const confidence = finding.confidence ?? props.confidence ?? '';
|
||||
const votes = finding.votes || '';
|
||||
const reviewStatus = finding.review_status || props.status || '';
|
||||
const agent = finding.agent || '';
|
||||
const whereText = finding.where_text || finding.proof || props.description || '';
|
||||
const whatText = finding.what_text || '';
|
||||
const fixText = finding.fix_text || '';
|
||||
descBox.innerHTML = `<div class="fd-header">
|
||||
<span class="sev ${sevClass(props.local_severity || 'info')}">${esc(props.local_severity || 'info')}</span>
|
||||
<span class="fd-title">${esc(gmName(fNode))}</span>
|
||||
<span class="fd-title">${esc(finding.title || gmName(fNode))}</span>
|
||||
</div>
|
||||
<div class="fd-body">${props.description ? `<p>${esc(props.description)}</p>` : ''}
|
||||
${props.category ? `<p><b>Category:</b> ${esc(props.category)}</p>` : ''}
|
||||
${props.cwe ? `<p><b>CWE:</b> ${esc(Array.isArray(props.cwe) ? props.cwe.join(', ') : props.cwe)}</p>` : ''}
|
||||
${props.stage ? `<p><b>Stage:</b> ${esc(props.stage)}</p>` : ''}
|
||||
<div class="fd-cards">
|
||||
${cweStr ? `<div class="fd-card"><div class="fd-card-label">CWE</div><div class="fd-card-value">${esc(Array.isArray(cweStr) ? cweStr.join(', ') : cweStr)}</div></div>` : ''}
|
||||
${cvssStr ? `<div class="fd-card"><div class="fd-card-label">CVSS</div><div class="fd-card-value">${esc(String(cvssStr))}</div></div>` : ''}
|
||||
${owasp ? `<div class="fd-card"><div class="fd-card-label">OWASP</div><div class="fd-card-value">${esc(owasp)}</div></div>` : ''}
|
||||
${mitre ? `<div class="fd-card"><div class="fd-card-label">MITRE</div><div class="fd-card-value">${esc(mitre)}</div></div>` : ''}
|
||||
${stageVal ? `<div class="fd-card"><div class="fd-card-label">Stage</div><div class="fd-card-value">${esc(stageVal)}</div></div>` : ''}
|
||||
${exploitability ? `<div class="fd-card"><div class="fd-card-label">Exploitability</div><div class="fd-card-value">${esc(exploitability)}</div></div>` : ''}
|
||||
${confidence !== '' ? `<div class="fd-card"><div class="fd-card-label">Confidence</div><div class="fd-card-value">${esc(String(confidence))}</div></div>` : ''}
|
||||
${reviewStatus ? `<div class="fd-card"><div class="fd-card-label">Review Status</div><div class="fd-card-value">${esc(reviewStatus)}</div></div>` : ''}
|
||||
${agent ? `<div class="fd-card"><div class="fd-card-label">Agent</div><div class="fd-card-value mono">${esc(agent)}</div></div>` : ''}
|
||||
</div>
|
||||
<div class="fd-meta">
|
||||
${props.status ? `<span>Status: ${esc(props.status)}</span>` : ''}
|
||||
${f ? '<button class="btn btn-sm" data-openfinding>Open finding details</button>' : ''}
|
||||
</div>`;
|
||||
${whereText ? `<div class="fd-section"><div class="fd-section-title">WHERE THE PROBLEM IS</div><p>${esc(whereText)}</p></div>` : ''}
|
||||
${whatText ? `<div class="fd-section"><div class="fd-section-title">WHAT IT MEANS</div><p>${esc(whatText)}</p></div>` : ''}
|
||||
${fixText ? `<div class="fd-section"><div class="fd-section-title">HOW TO FIX IT</div><p>${esc(fixText)}</p></div>` : ''}`;
|
||||
show(descBox, true);
|
||||
const openBtn = descBox.querySelector('[data-openfinding]');
|
||||
if (openBtn && f) openBtn.addEventListener('click', () => openFindingModal(f.f, f.pocs, f.runId));
|
||||
}
|
||||
} else if (descBox) {
|
||||
show(descBox, false);
|
||||
}
|
||||
|
||||
// Columns by entity kind; a long column wraps into sub-columns.
|
||||
const W = 220, H = 54, GX = 90, GY = 12, PER = 12;
|
||||
// Circular node layout — left-to-right columns by entity kind
|
||||
const NW = 140, NH = 90, GX = 60, GY = 30, PER = 8;
|
||||
const cols = new Map();
|
||||
for (const n of nodes) {
|
||||
const c = GM_COL[n.label] ?? 3;
|
||||
@@ -3248,16 +3282,16 @@ function renderGraphMemory(x) {
|
||||
|| sevRank(a.props?.local_severity) - sevRank(b.props?.local_severity)
|
||||
|| (a.label + gmName(a)).localeCompare(b.label + gmName(b)));
|
||||
const sub = Math.ceil(list.length / PER);
|
||||
list.forEach((n, i) => pos.set(id(n), { x: (col + Math.floor(i / PER)) * (W + GX) - Math.floor(i / PER) * (GX - 24), y: (i % PER) * (H + GY) }));
|
||||
maxH = Math.max(maxH, Math.min(list.length, PER) * (H + GY));
|
||||
list.forEach((n, i) => pos.set(id(n), { x: (col + Math.floor(i / PER)) * (NW + GX), y: (i % PER) * (NH + GY) }));
|
||||
maxH = Math.max(maxH, Math.min(list.length, PER) * (NH + GY));
|
||||
col += sub;
|
||||
});
|
||||
const width = col * (W + GX);
|
||||
const width = col * (NW + GX);
|
||||
const CX = NW / 2, CY = 28;
|
||||
const path = (a, b) => {
|
||||
const x1 = a.x + W, y1 = a.y + H / 2, x2 = b.x, y2 = b.y + H / 2;
|
||||
if (x2 > x1) { const m = (x1 + x2) / 2; return `M${x1},${y1} C${m},${y1} ${m},${y2} ${x2},${y2}`; }
|
||||
const r = Math.max(a.x, b.x) + W + 40;
|
||||
return `M${x1},${y1} C${r},${y1} ${r},${y2} ${b.x + W},${y2}`;
|
||||
const x1 = a.x + CX + 28, y1 = a.y + CY, x2 = b.x + CX - 28, y2 = b.y + CY;
|
||||
const mx = (x1 + x2) / 2;
|
||||
return `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`;
|
||||
};
|
||||
const svg = edges.map((e) => {
|
||||
const a = pos.get(eid(e.from)), b = pos.get(eid(e.to));
|
||||
@@ -3268,12 +3302,14 @@ function renderGraphMemory(x) {
|
||||
const cards = nodes.map((n) => {
|
||||
const p = pos.get(id(n));
|
||||
const props = n.props || {};
|
||||
const badge = props.status ? `<span class="gm-st st-${esc(props.status)}">${esc(STATUS_LABEL[props.status] || props.status)}</span>` : '';
|
||||
const sev = props.local_severity ? `<span class="sev ${sevClass(props.local_severity)}">${esc(props.local_severity)}</span>` : '';
|
||||
const crit = props.critical === true || props.privileged === true ? '<span class="gm-crit" title="crown jewel / privileged">★</span>' : '';
|
||||
return `<div class="gm-node gk-${GM_KIND[n.label] || 'meta'}" style="left:${p.x}px;top:${p.y}px;width:${W}px;height:${H}px" data-id="${esc(id(n))}">
|
||||
<div class="gm-node-h"><span class="gm-lbl">${esc(n.label)}${props.stage ? ` · ${esc(props.stage)}` : ''}</span>${crit}${sev}${badge}</div>
|
||||
<div class="gm-node-t" title="${esc(gmName(n))}">${esc(gmName(n))}</div></div>`;
|
||||
const kind = GM_KIND[n.label] || 'meta';
|
||||
const sev = props.local_severity;
|
||||
const sevBadge = sev ? `<span class="gm-sev-badge sev ${sevClass(sev)}">${esc(sev.charAt(0).toUpperCase())}</span>` : '';
|
||||
const countBadge = props.endpoint_count ? `<span class="gm-badge" style="background:var(--sev-high-fg);color:#fff">${props.endpoint_count}</span>` : '';
|
||||
return `<div class="gm-node gk-${kind}" style="left:${p.x}px;top:${p.y}px;width:${NW}px" data-id="${esc(id(n))}">
|
||||
<div class="gm-circle">${gmIcon(n.label)}${sevBadge}${countBadge}</div>
|
||||
<div class="gm-node-label" title="${esc(gmName(n))}">${esc(gmName(n))}</div>
|
||||
<div class="gm-node-sub">${esc(n.label)}${props.stage ? ` · ${esc(props.stage)}` : ''}</div></div>`;
|
||||
}).join('');
|
||||
stage.innerHTML = `<svg class="gm-svg" width="${width + 80}" height="${maxH + 40}">${svg}</svg>${cards}`;
|
||||
stage.style.width = `${width + 80}px`;
|
||||
@@ -3894,9 +3930,14 @@ async function openProviderKeysModal() {
|
||||
let existing = $('#providerKeysModal');
|
||||
if (!existing) {
|
||||
document.body.insertAdjacentHTML('beforeend', `<div class="modal-overlay" id="providerKeysModal" hidden>
|
||||
<div class="modal" style="max-width:620px"><div class="modal-header"><h3>LLM Provider Keys</h3><span class="modal-sub">API keys for engagements. Kept in server memory only.</span><button class="modal-close" onclick="$('#providerKeysModal').hidden=true">✕</button></div>
|
||||
<div class="modal-body" id="providerKeysModalBody" style="max-height:60vh;overflow-y:auto"></div>
|
||||
<div class="modal-footer"><button class="btn btn-accent" onclick="$('#providerKeysModal').hidden=true">Done</button></div></div></div>`);
|
||||
<div class="modal" style="max-width:620px">
|
||||
<div class="modal-head">
|
||||
<div><div class="title">LLM Provider Keys</div><span class="modal-sub">API keys for engagements. Kept in server memory only.</span></div>
|
||||
<button class="icon-btn" onclick="$('#providerKeysModal').hidden=true">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="providerKeysModalBody" style="max-height:60vh;overflow-y:auto"></div>
|
||||
<div class="modal-foot"><button class="btn btn-accent" onclick="$('#providerKeysModal').hidden=true">Done</button></div>
|
||||
</div></div>`);
|
||||
existing = $('#providerKeysModal');
|
||||
}
|
||||
const body = $('#providerKeysModalBody');
|
||||
|
||||
+66
-40
@@ -657,7 +657,7 @@ textarea { resize: vertical; min-height: 72px; }
|
||||
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
|
||||
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
|
||||
.modal-head .title { font-size: var(--fs-lg); font-weight: 600; }
|
||||
.modal-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-faint); margin-top: 2px; }
|
||||
.modal-head .modal-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-faint); margin-top: 2px; }
|
||||
.modal-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); }
|
||||
.modal-tab { padding: var(--sp-3) var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text-faint); border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; }
|
||||
.modal-tab.active { color: var(--text); border-bottom-color: var(--accent); }
|
||||
@@ -668,15 +668,14 @@ textarea { resize: vertical; min-height: 72px; }
|
||||
.field-status.ok { color: var(--sev-low-fg); }
|
||||
.field-status.bad { color: var(--sev-critical-fg); }
|
||||
|
||||
.provider-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); position: relative; }
|
||||
.provider-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
|
||||
.provider-row:last-child { border-bottom: none; }
|
||||
.provider-row .p-name { flex: none; width: 150px; font-size: var(--fs-sm); font-weight: 500; }
|
||||
.provider-row .p-kind { flex: none; width: 74px; font-size: var(--fs-2xs); text-transform: uppercase; color: var(--text-faint); font-family: var(--mono); }
|
||||
.provider-row .p-status { flex: 1; font-size: var(--fs-2xs); color: var(--text-faint); }
|
||||
.provider-row .p-status.configured { color: var(--sev-low-fg); font-weight: 600; }
|
||||
.provider-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; }
|
||||
.provider-row .dot.set { background: var(--sev-low-fg); }
|
||||
.provider-row .btn-config { flex: none; }
|
||||
.provider-row .p-name { flex: none; width: 160px; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.provider-row .p-kind { flex: none; width: 64px; font-size: var(--fs-2xs); text-transform: uppercase; color: var(--text-faint); font-family: var(--mono); }
|
||||
.provider-row input { flex: 1; min-width: 0; }
|
||||
.provider-row .btn { flex: none; }
|
||||
.key-verify { flex: none; font-size: var(--fs-2xs); font-weight: 700; min-width: 60px; }
|
||||
.key-verify.ok { color: var(--sev-low-fg); }
|
||||
.key-verify.bad { color: var(--sev-critical-fg); }
|
||||
@@ -973,37 +972,65 @@ body.resizing-ns { user-select: none; cursor: ns-resize; }
|
||||
.ts-step { font-family: var(--mono); font-size: var(--fs-xs); }
|
||||
.ts-action { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; }
|
||||
|
||||
/* graph (web + internal network) */
|
||||
/* graph (web + internal network) — Wiz-style attack path visualization */
|
||||
.gm-wrap { position: relative; height: 640px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: grab;
|
||||
background-color: var(--surface-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; }
|
||||
background-color: var(--surface); background-image: radial-gradient(var(--border) .5px, transparent .5px); background-size: 24px 24px; }
|
||||
.gm-wrap.dragging { cursor: grabbing; }
|
||||
.gm-wrap[hidden] { display: none; }
|
||||
.gm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
|
||||
.gm-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
|
||||
.gm-e { fill: none; stroke-width: 1.4; opacity: .55; }
|
||||
.gm-e.gm-trav { stroke-width: 2; opacity: .85; }
|
||||
.gm-e { fill: none; stroke-width: 2; opacity: .6; }
|
||||
.gm-e.gm-trav { stroke-width: 2.5; opacity: .85; }
|
||||
.gm-e.es-confirmed { stroke: var(--sev-low-fg); }
|
||||
.gm-e.es-needs_validation { stroke: var(--sev-medium-fg); stroke-dasharray: 6 4; }
|
||||
.gm-e.es-hypothesis { stroke: var(--text-faint); stroke-dasharray: 2 4; }
|
||||
.gm-e.es-needs_review { stroke: var(--sev-info-fg); stroke-dasharray: 4 3; }
|
||||
.gm-stage.focusing .gm-e { opacity: .12; }
|
||||
.gm-stage.focusing .gm-e.hl { opacity: 1; stroke-width: 2.6; }
|
||||
.gm-node { position: absolute; background: var(--surface); border: 1px solid var(--border-strong); border-left: 4px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; overflow: hidden; box-shadow: 0 1px 0 var(--border); }
|
||||
.gm-node:hover { border-color: var(--text-dim); }
|
||||
.gm-node.sel { outline: 2px solid var(--focus-ring); }
|
||||
.gm-node-h { display: flex; align-items: center; gap: 5px; }
|
||||
.gm-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-faint); }
|
||||
.gm-node .sev { font-size: var(--fs-2xs); padding: 0 5px; }
|
||||
.gm-crit { color: var(--sev-critical-fg); font-size: var(--fs-xs); }
|
||||
.gm-node-t { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
|
||||
.gk-asset { border-left-color: var(--sev-info-fg); }
|
||||
.gk-surface { border-left-color: var(--text-faint); }
|
||||
.gk-weak { border-left-color: var(--sev-high-fg); }
|
||||
.gk-step { border-left-color: var(--accent); }
|
||||
.gk-cred { border-left-color: var(--sev-medium-fg); }
|
||||
.gk-impact { border-left-color: var(--sev-critical-fg); background: var(--sev-critical-bg); }
|
||||
.gk-meta { border-left-color: var(--border); opacity: .8; }
|
||||
.gm-leg { font-size: var(--fs-xs); padding: 3px 8px 3px 6px; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-xs); background: var(--surface); color: var(--text-dim); }
|
||||
.gm-stage.focusing .gm-e { opacity: .1; }
|
||||
.gm-stage.focusing .gm-e.hl { opacity: 1; stroke-width: 3; }
|
||||
/* Circular node — Wiz/Orca style */
|
||||
.gm-node { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
|
||||
.gm-node:hover .gm-circle { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
|
||||
.gm-node.sel .gm-circle { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
|
||||
.gm-circle { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; position: relative; }
|
||||
.gm-circle svg { width: 26px; height: 26px; }
|
||||
.gm-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--surface); }
|
||||
.gm-node-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text); text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
|
||||
.gm-node-sub { font-size: var(--fs-2xs); color: var(--text-faint); text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* Color rings by kind */
|
||||
.gk-internet .gm-circle { border-color: #4da6ff; background: #e8f4fd; }
|
||||
.gk-asset .gm-circle { border-color: #4da6ff; background: #e8f4fd; }
|
||||
.gk-surface .gm-circle { border-color: #f59e0b; background: #fef3c7; }
|
||||
.gk-weak .gm-circle { border-color: #ef4444; background: #fef2f2; }
|
||||
.gk-step .gm-circle { border-color: #8b5cf6; background: #f3e8ff; }
|
||||
.gk-cred .gm-circle { border-color: #10b981; background: #ecfdf5; }
|
||||
.gk-impact .gm-circle { border-color: #ef4444; background: #fef2f2; }
|
||||
.gk-meta .gm-circle { border-color: var(--border); background: var(--surface-2); }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) .gk-internet .gm-circle { border-color: #60a5fa; background: rgba(96,165,250,.12); }
|
||||
:root:not([data-theme="light"]) .gk-asset .gm-circle { border-color: #60a5fa; background: rgba(96,165,250,.12); }
|
||||
:root:not([data-theme="light"]) .gk-surface .gm-circle { border-color: #fbbf24; background: rgba(251,191,36,.12); }
|
||||
:root:not([data-theme="light"]) .gk-weak .gm-circle { border-color: #f87171; background: rgba(248,113,113,.12); }
|
||||
:root:not([data-theme="light"]) .gk-step .gm-circle { border-color: #a78bfa; background: rgba(167,139,250,.12); }
|
||||
:root:not([data-theme="light"]) .gk-cred .gm-circle { border-color: #34d399; background: rgba(52,211,153,.12); }
|
||||
:root:not([data-theme="light"]) .gk-impact .gm-circle { border-color: #f87171; background: rgba(248,113,113,.12); }
|
||||
}
|
||||
:root[data-theme="dark"] .gk-internet .gm-circle { border-color: #60a5fa; background: rgba(96,165,250,.12); }
|
||||
:root[data-theme="dark"] .gk-asset .gm-circle { border-color: #60a5fa; background: rgba(96,165,250,.12); }
|
||||
:root[data-theme="dark"] .gk-surface .gm-circle { border-color: #fbbf24; background: rgba(251,191,36,.12); }
|
||||
:root[data-theme="dark"] .gk-weak .gm-circle { border-color: #f87171; background: rgba(248,113,113,.12); }
|
||||
:root[data-theme="dark"] .gk-step .gm-circle { border-color: #a78bfa; background: rgba(167,139,250,.12); }
|
||||
:root[data-theme="dark"] .gk-cred .gm-circle { border-color: #34d399; background: rgba(52,211,153,.12); }
|
||||
:root[data-theme="dark"] .gk-impact .gm-circle { border-color: #f87171; background: rgba(248,113,113,.12); }
|
||||
.gm-sev-badge { position: absolute; top: -2px; left: -2px; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 1px 5px; border-radius: 8px; }
|
||||
.gm-leg { font-size: var(--fs-xs); padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.gm-leg .gm-leg-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; }
|
||||
.gm-leg.gk-internet .gm-leg-dot { border-color: #4da6ff; }
|
||||
.gm-leg.gk-asset .gm-leg-dot { border-color: #4da6ff; }
|
||||
.gm-leg.gk-surface .gm-leg-dot { border-color: #f59e0b; }
|
||||
.gm-leg.gk-weak .gm-leg-dot { border-color: #ef4444; }
|
||||
.gm-leg.gk-step .gm-leg-dot { border-color: #8b5cf6; }
|
||||
.gm-leg.gk-cred .gm-leg-dot { border-color: #10b981; }
|
||||
.gm-leg.gk-impact .gm-leg-dot { border-color: #ef4444; }
|
||||
.gm-leg-sep { width: 1px; height: 18px; background: var(--border); }
|
||||
.gm-edge-leg { font-size: var(--fs-xs); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
|
||||
.gm-edge-leg::before { content: ""; width: 22px; border-top: 2px solid; }
|
||||
@@ -1106,12 +1133,6 @@ a.deliv-card:hover { border-color: var(--accent); }
|
||||
.moves li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; }
|
||||
.moves details summary { cursor: pointer; font-size: var(--fs-xs); color: var(--accent); margin-top: 4px; }
|
||||
|
||||
.gm-leg.gk-asset { border-left-color: var(--sev-info-fg); }
|
||||
.gm-leg.gk-surface { border-left-color: var(--text-faint); }
|
||||
.gm-leg.gk-weak { border-left-color: var(--sev-high-fg); }
|
||||
.gm-leg.gk-step { border-left-color: var(--accent); }
|
||||
.gm-leg.gk-cred { border-left-color: var(--sev-medium-fg); }
|
||||
.gm-leg.gk-impact { border-left-color: var(--sev-critical-fg); background: var(--surface); }
|
||||
.panel-toolbar .input-sm { width: 200px; flex: 0 0 auto; }
|
||||
.panel-toolbar select.input-sm { width: 150px; }
|
||||
.panel-toolbar .search-wrap { flex: 1 1 260px; max-width: 420px; }
|
||||
@@ -1128,10 +1149,15 @@ a.deliv-card:hover { border-color: var(--accent); }
|
||||
.gfl-item .gfl-sev { font-size: var(--fs-2xs); font-weight: 700; flex: none; padding: 1px 5px; border-radius: var(--radius-xs); }
|
||||
.gfl-item .gfl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
||||
.graph-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.gm-finding-desc { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-2); flex: none; }
|
||||
.gm-finding-desc .fd-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
|
||||
.gm-finding-desc { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-4); margin: 0 0 var(--sp-2); flex: none; max-height: 320px; overflow-y: auto; }
|
||||
.gm-finding-desc .fd-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
|
||||
.gm-finding-desc .fd-title { font-weight: 600; font-size: var(--fs-base); }
|
||||
.gm-finding-desc .fd-body { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
|
||||
.gm-finding-desc .fd-body p { margin: 4px 0; }
|
||||
.gm-finding-desc .fd-meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-faint); }
|
||||
.gm-finding-desc .fd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
|
||||
.gm-finding-desc .fd-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
|
||||
.gm-finding-desc .fd-card-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
|
||||
.gm-finding-desc .fd-card-value { font-size: var(--fs-sm); font-weight: 500; margin-top: 2px; font-family: var(--mono); }
|
||||
.gm-finding-desc .fd-section { margin-bottom: var(--sp-3); }
|
||||
.gm-finding-desc .fd-section:last-child { margin-bottom: 0; }
|
||||
.gm-finding-desc .fd-section-title { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: var(--sp-1); }
|
||||
.gm-finding-desc .fd-section p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; margin: 0; }
|
||||
@media (max-width: 760px) { .graph-finding-list { width: 160px; } }
|
||||
Reference in new issue
Block a user