fix(web): global [hidden] bug, progress bar, F5 persistence, finding detail + PoC

Real front-end bugs found and fixed:
- [hidden] never worked on any element whose class also sets 'display'
  (every .btn, .chip, ...): the browser's built-in '[hidden]{display:none}'
  rule and an author rule of equal specificity tie, and the later one in the
  cascade wins — so 'Next' stayed visible on the Review step alongside
  'Start Exploitation', and 'Open report'/'Stop' rendered during 'starting'.
  Fixed with a single global '[hidden]{display:none!important}' override.
- Progress bar was functionally correct but easy to miss (thin, 0%-width,
  low-contrast track) and gave no feedback while the agent count is still
  unknown (recon phase). Added a border for visibility and an indeterminate
  sliding-segment state for the 'agents: ?' window.
- A live run watched in the browser was lost on F5 (jumped back to the
  wizard) even though the job keeps running server-side. The active job id
  now persists in localStorage; on load the app reconnects the SSE stream
  (the server replays its full event buffer) instead of losing the view.

New:
- Findings are now clickable — a detail modal shows every Finding field
  (CWE/CVSS/OWASP/MITRE/stage/exploitability/confidence/votes/review status/
  auth context/account/agent), endpoint+payload, evidence, impact, business
  impact, remediation, and chains_from — in both the live run and past-run
  detail views.
- PoC surfacing: the finding modal looks up any script the run wrote to
  pocs/ that's cited in the finding's evidence (per the harness's own
  doctrine — see pipeline.rs change below), fetches and previews it inline,
  with a link to open the raw file. Live runs poll for new PoC files every
  5s once the run id is known.
- Pinned-leads confirmation: the live run header now states plainly how
  many leads were pinned (and their names) or that selection is auto
  (recon-driven) — this was previously buried in the scrolling activity log
  behind the harness's unconditional 'Loaded 435 agents' library-size line,
  which describes the full agent library, not what will actually run.

Harness doctrine (crates/harness/src/pipeline.rs, pocs_line()):
PoC-writing for black-box findings was previously conditioned on 'when an
issue needs a custom multi-step exploit/script' — vague enough that a
straightforward finding (single-request XSS/SQLi/IDOR) often got no PoC
file at all. Now required for every confirmed Medium+ finding, one
standalone .py/.sh script per finding, and explicit about citing the exact
file name in the finding's evidence field (which is what the web UI now
matches on to link a PoC to its finding).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0129WdYHccPsH27k5GGuwijd
This commit is contained in:
CyberSecurityUP
2026-08-23 14:37:28 -03:00
co-authored by Claude Sonnet 5
parent 51c38c1db3
commit d42e9ff8e8
5 changed files with 201 additions and 17 deletions
+15 -1
View File
@@ -65,6 +65,12 @@
}
* { box-sizing: border-box; }
/* The [hidden] attribute must always win. Any component class that sets its
own `display` (buttons, chips, flex/grid containers, ...) has the SAME
specificity as the browser's built-in `[hidden] { display: none }` rule —
whichever is declared later in the cascade wins, which silently breaks
`el.hidden = true` on anything already styled with `display`. Force it. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
background: var(--bg); color: var(--text); font-family: var(--sans);
@@ -288,8 +294,12 @@ textarea { resize: vertical; min-height: 72px; }
.run-actions { display: flex; gap: var(--sp-2); }
.progress-wrap { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }
.progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .3s; }
/* agent count unknown yet (still reconning) — slide a segment instead of
sitting at a static, easy-to-miss 0% fill */
.progress-bar.indeterminate .progress-fill { width: 30% !important; animation: progress-indeterminate 1.3s infinite linear; }
@keyframes progress-indeterminate { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.progress-label { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; }
.run-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); }
@@ -319,7 +329,11 @@ textarea { resize: vertical; min-height: 72px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.data-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--surface-2); }
.poc-file { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.poc-file .fn { font-family: var(--mono); font-size: 12px; flex: 1; }
.poc-pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); font-family: var(--mono); font-size: 11.5px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin-top: var(--sp-2); }
.data-table .col-endpoint { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.data-table .col-conf { font-family: var(--mono); text-align: right; }
.empty-state { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-faint); font-size: 12.5px; }