mirror of
https://github.com/elicpeter/nyx.git
synced 2026-07-15 21:11:02 +02:00
Release/0.5.0 (#35)
* feat: Introduce function-scoped variable interning for state analysis with new tests and fixtures * feat: Add Phase 26 symbolic execution enhancements with bitwise operator support, abstract interpretation refinements, and new taint analysis tests * feat: Refine state analysis to handle factory-pattern resource returns with mixed-path tests and leak detection enhancements * feat: Add Phase 27 debug views with symbolic execution, abstract interpretation, SSA, and call graph viewers; integrate with debug layout and styles * feat: Add Phase 31 type-qualified symbolic resolution with receiver-based callee disambiguation and testing * feat: Extend symbolic execution with state iteration, enhanced debug views, and debounced input handling * feat: Add Phase 13 resource and auth pattern extensions with new tests and fixtures * feat: Introduce CFG debug graph renderer with compact mode, toolbar, and DAG layout integration * feat: Add Phase 28 encoding and decoding transform modeling with structural symex enhancements and new taint analysis tests * feat: Extend abstract interpretation with type facts and constant value tracking in debug views and server logic * feat: Add linear path handling and witness extraction to symbolic execution with Phase 28 transform mismatch detection * feat: Refine Go auth and sanitizer handling with enhanced rules, state updates, and benchmark improvements * feat: Enable auth-state analysis by default and update relevant tests in benchmark config * test: Update state_tests to reflect default enablement of auth-state analysis and add auth suppression test * docs: update CHANGELOG.md * feat: Introduce per-index taint tracking in `HeapState` with `HeapSlot`, overflow handling, and revised SSA transfers * feat: Introduce C/C++ language labels and refine heap state tracking in SSA transfers * feat: Implement per-index array slot tracking in symbolic heap with overflow collapse * feat: Add implicit definition handling for uninitialized declarations in SSA value allocation * feat: Refactor function parameters and constants for improved clarity and maintainability * refactor: Reorder module imports and improve formatting for consistency * refactor: Fix formatting erorrs * refactor: Fix clippy warnings * refactor: Fix fmt warnings (again) * chore: Update dependencies and improve feature configuration * Add comprehensive tests for undertested modules (#36) (COPILOT) * Add comprehensive tests for undertested modules Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/f3fc877e-f386-49ba-9793-fc93d3805083 * Add comprehensive tests for ext, project, walk, and errors modules Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/f3fc877e-f386-49ba-9793-fc93d3805083 --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * chore: Update dependencies and improve feature configuration * fix: formatting errors in new tests * chore: Update license list in about.toml * chore: made functions input inline * chore: updated cfg graph to take up the full page * chore: add Prettier configuration and update code formatting * Add frontend test suite with Vitest (111 tests) (#37) * Add Vitest test suite for frontend - 111 tests across utils, components, hooks, and graph utilities Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/7cf0dba2-ecff-4740-ba4d-92717e74a0b7 * ci: add frontend test step to CI workflow Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/5bc0ac9f-0a32-4d03-9cb7-7a15aea53fca --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * chore: simplify array initialization in test files for consistency * ran typecheck * feat: add AnalysisWorkspace component and integrate it into CfgViewerPage * feat: update routing in AppLayout and improve empty state message in ExplorerPage * feat: enhance scan progress tracking with additional metrics and stages * feat: update license information and add license check script * feat: implement cross-file symbolic execution with callee body persistence * feat: replace dagre graphs with Graphology + ELK + Sigma for more advanced call stack and cfg rendering * feat: ensure CFG function view is scoped to the selected function, preventing bleed into sibling functions * feat: enhance resource tracking with proxy method summaries and improve finding extraction * feat: add terminal function exit detection for accurate resource leak analysis * feat: add warnings for loops and functions without bodies to improve error recovery * feat: update lambda expression handling to ensure proper function classification and control flow * feat: remove bounded formatting/string ops and add JSON.parse sanitizer for improved data handling * feat: add inline return taint analysis and regression tests for improved security checks * feat: add engine version management and migration handling for database schema updates * feat: enhance first_call_ident to skip nested function bodies and add regression tests * feat: enhance callee name resolution with two-segment normalization and disambiguation * feat: add cross-file context flags and debug assertions for taint analysis * feat: refactor taint analysis structure to unify context handling and improve clarity * feat: enhance dead code elimination to preserve Sink, Source, and Sanitizer labels with new tests * docs: updated CHANGELOG.md * fmt: formatting fixes * fix: fixed frontend formatting and lint warnings * fix: optimized ci * fix: optimized ci * Add comprehensive multi-file test coverage to Nyx (#38) * Initial checklist for multi-file test suite expansion Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/e550cb88-9767-4442-94d4-101bf5bb0e23 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * Add 12 new multi-file test fixtures with TP/TN/near-miss coverage Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/e550cb88-9767-4442-94d4-101bf5bb0e23 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * deleted root repo * rebuilt to test for regressions --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Co-authored-by: elipeter <elicpeter@gmail.com> * feat: enhance import alias resolution and taint tracking * feat: implement security hardening with CSRF protection and path validation * feat: add support for import alias bindings in Python, PHP, and Rust * feat: enhance CFG analysis modes and improve code readability * feat: add detection for parameterized SQL queries to enhance security * feat: add safe internal redirect handling and enhance session destroy validation * feat: implement security improvements by addressing vulnerabilities in execAsync, session management, and file downloads * feat: enhance taint detection by adding support for inline source member expressions in call arguments * feat: implement pre-emission of Source nodes for inline source member expressions in call arguments * feat: add support for Throw statement in control flow and error handling * feat: add debug and echo endpoints with potential information leakage * feat: implement internal redirect suppression and enhance taint detection * feat: implement module alias tracking for dynamic dispatch in JS/TS * feat: add authorization analysis module with Express support * feat: add authorization analysis module with Express support * feat: add tests for admin guard requirements and clean checks in authorization analysis * feat: integrate Koa and Fastify frameworks into authorization analysis * feat: add Flask and Django support to authorization analysis module * feat: add support for Rails and Sinatra frameworks in authorization analysis * feat: add support for Axum, ActixWeb, and Rocket frameworks in authorization analysis * feat: add support for ActixWeb, Axum, and Rocket frameworks in authorization analysis * feat: add support for Rails and Sinatra in authorization analysis * chore: add .DS_Store to .gitignore * refactor: simplify conditional checks and improve readability in multiple files * refactor: update usage of Option methods for improved clarity and consistency * refactor: improve code readability by simplifying conditional checks and formatting * refactor: improve code formatting and readability by simplifying conditional checks * refactor: simplify conditional checks and improve readability in multiple files * refactor: simplify conditional checks in axum.rs for improved readability * feat: add CodeQL analysis configuration for enhanced security scanning * test: add comprehensive tests for `src/output.rs` SARIF builder (#39) * chore: start test coverage improvement work Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/cd7ff398-134e-4728-a5e7-0353a0744423 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * test: add comprehensive tests for src/output.rs SARIF builder Agent-Logs-Url: https://github.com/elicpeter/nyx/sessions/cd7ff398-134e-4728-a5e7-0353a0744423 Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> * refactor: improve code formatting and readability in output.rs --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: elicpeter <54954007+elicpeter@users.noreply.github.com> Co-authored-by: elipeter <elicpeter@gmail.com> * refactor: improve code formatting and readability in output.rs * Potential fix for code scanning alert no. 210: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Potential fix for code scanning alert no. 211: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * refactor: enhance triage file path handling with improved error management and validation * refactor: updated func summaries for richer detail * refactor: update SSA summary extraction to use canonical FuncKey for distinct entries * refactor: enhance callee metadata structure to support arity, receiver, and qualifier for better overload resolution * refactor: add support for keyword arguments in function calls and enhance receiver extraction for method-style calls * refactor: implement new Flask routes for safe and unsafe shell command execution * refactor: separate receiver handling in SSA operations and enhance taint propagation * refactor: improve arity handling by using arg_uses for positional argument count and enhance witness scoring for tainted arguments * refactor: implement auth decorator extraction and classification for multiple languages * refactor: enhance Rust module path resolution and use map handling for cross-file disambiguation * refactor: introduce CalleeQuery struct for structured callee resolution and enhance resolver logic * refactor: implement same-file identity collision handling for `runTask` to ensure correct resolver behavior * refactor: standardize default struct initialization across multiple files * feat: add scripts for formatting checks and auto-fixes with test summaries * refactor: simplify character splitting and enhance namespace qualifier handling * refactor: improve documentation clarity and enhance code readability in resolver logic * refactor: replace default struct initialization with explicit field assignments for clarity * feat: enhance anonymous function naming by deriving context-based bindings * refactor: streamline match expressions for improved readability and performance * refactor: streamline match expressions for improved readability and performance * refactor: replace loop with while let for improved clarity and performance * feat: add SSA constant propagation support to analysis context for improved accuracy * feat: add SSA constant propagation support to analysis context for improved accuracy * feat: implement shell metacharacter validation and bounded-length checks in Rust analysis * feat: add static map analysis for command injection suppression and type safety * refactor: simplify match statements and reduce line breaks for improved readability * feat(summary): phase 1/5 SinkSite data model for primary sink-location attribution Introduce SinkSite (file_rel, line, col, snippet, cap) carrying the primary sink source-location through function summaries. Swap SsaFuncSummary.param_to_sink and FuncSummary.param_to_sink from a coarse Cap map to a deduped SmallVec<[SinkSite; 1]> per parameter, with a backward-compatible cap_sites() helper and serde defaults so pre-phase-1 on-disk rows continue to deserialise cleanly. Extraction: SinkSiteLocator bundles the tree/bytes/file_rel needed by extract_ssa_func_summary; ParsedFile::extract_ssa_artifacts wires the locator in for the persisted pass-1 path, while pass-2 intra-file transient summaries fall back to cap-only sites (behavior unchanged). Merge: GlobalSummaries::insert now unions sink sites with (file_rel, line, col, cap) dedup via shared union_param_sink_sites helper. Database: JSON-serialised summary columns carry the new shape automatically; no schema change needed. Phase 2 will consume SinkSite in build_taint_diag() to overwrite the caller-site Finding.line with the callee's sink line when resolved via summary. Phase 1 keeps behavior unchanged: scanning tests/benchmark/corpus/rust/cmdi/cmdi_indirect.rs still produces the same (wrong) line 10 finding. Adds round-trip tests covering SinkSite solo, SsaFuncSummary with sink sites, legacy-JSON default handling for both summary types, and merge dedup. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(taint): phase 2/5 thread SinkSite into SsaTaintEvent and Finding Plumb Phase 1's SinkSite through the event pipeline into Findings, no output change yet. SsaTaintEvent gains `primary_sink_site: Option<SinkSite>`; when the main or callback sink-emission path has non-empty `param_to_sink_sites`, filter to sites whose `(line != 0) && (cap ∩ sink_caps != ∅)` and emit one event per distinct site — the multi-primary collapse keeps each downstream Finding single-primary. Resolution: ResolvedSummary and SinkInfo gain mirror `param_to_sink_sites` fields, populated from `SsaFuncSummary.param_to_sink` (SSA + callback paths) and `FuncSummary.param_to_sink` (global paths). Label, local-summary, and interop resolution paths leave the field empty — they only ever had cap-level info to begin with. Finding: new `primary_location: Option<SinkLocation>` with `file_rel/line/col`. `ssa_events_to_findings` maps `event.primary_sink_site` → `Finding.primary_location`, filtering cap-only sites (`line == 0`) to `None` so the (0,0) sentinel never leaks to formatters. Dedup key extended with the primary location so multi-site events aren't collapsed back together. Invariants (debug_assert!): * every SinkSite reaching emission has `line != 0 && cap ∩ sink_caps != ∅` — enforced by the pick_primary_sink_sites* filters; * every populated Finding.primary_location has `line != 0` AND non-empty `file_rel` — the cap-only → None translation upstream guarantees this. Deliberately independent of `uses_summary`: that flag tracks whether the *taint chain* used a summary, whereas primary attribution requires only that the *sink* itself was summary-resolved. A local source reaching a cross-file sink produces `uses_summary=false` alongside a populated primary_location — documented on Finding.primary_location, covered by `cross_file_sink_finding_carries_primary_location`. build_taint_diag, SARIF/JSON/explanation formatters, and the benchmark scorer remain untouched: finding.line still comes from `cfg_graph[finding.sink]`, so cmdi_indirect.rs still reports line 10 and the benchmark's rs-cmdi-003 row still shows FN in the LOC column. Tests: `cross_file_sink_finding_carries_primary_location` (proves plumbing via a synthetic FuncSummary carrying a SinkSite at 42:5) and `cross_file_sink_cap_only_site_leaves_primary_location_none` (regression guard against cap-only sites surfacing). All 1566 lib tests + integration tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(output): phase 3/5 consume primary sink location in diag + SARIF When a finding's primary_location (populated in phase 2 from a callee summary's SinkSite) names the dangerous instruction inside a callee body, attribute the diagnostic line to that location instead of the caller's call site. The call site is demoted to a Call step in flow_steps, and a synthetic Sink step at the primary location is appended so analysts still see the full trace. Changes: - Add scan_root parameter to build_taint_diag so file_rel can be resolved back to an absolute path via a shared resolve_file_rel helper. Empty file_rel (single-file scans where namespace == "") resolves to the file under analysis. - Extend SinkLocation with snippet, carried from the upstream SinkSite so the formatter needs no second file read. - Relax the ssa_events_to_findings debug_assert to allow empty file_rel, which is valid when scan root equals the file itself. - SARIF: emit data-flow as codeFlows[0].threadFlows[0].locations[]; locations[0] already reflects the primary sink position via the updated diag line/col. Acceptance: scan on tests/benchmark/corpus/rust/cmdi/cmdi_indirect.rs now reports line 5 (Command::new) as the primary sink, with the call site at line 10 visible in flow_steps. Two expect.json fixtures updated (must_match line_range widened): - javascript/taint/context_sensitive_call: 12-14 -> 7-14 (line 8 is the real sink inside run()). - rust/cfg/closure_async: 10-10 -> 10-11 (line 11 is Command::new inside the closure). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(bench): phase 4/5 validate primary sink attribution across corpus Extend the benchmark scorer and ground truth to lock in phase 3's primary-location behavior, and add fixtures that exercise the new capability end-to-end. Scorer (tests/benchmark_test.rs): - Add optional `expected_call_site_lines: Option<Vec<[usize; 2]>>` on Case. When present, score_location_level additionally requires at least one flow_step in the finding's evidence trace to fall within ±2 of the call-site range. When absent, the check is skipped — fully forward-compatible with existing fixtures. - Retain ±2 tolerance on expected_sink_lines (compared against the now-primary Diag.line post-phase-3). Ground truth edits: - rs-cmdi-cross-001: expected_sink_lines [8,8] -> [9,9]. Line 8 is the transform::wrap call site (a cross-file propagator, not a sink); line 9 is Command::new, the real sink. The ±2 tolerance happened to mask this stale attribution but it was semantically wrong — phase 4 is the right time to correct it. Also adds expected_call_site_lines [8,8] so the new field is exercised on an existing cross-file case. - rs-cmdi-003: adds expected_call_site_lines [10,10] (run_cmd call). This fixture's sink (Command::new inside run_cmd at line 5) was the motivating case for phases 1-3; adding the call-site assertion guards against regression to caller-line attribution. New fixtures: - rust/cmdi/cmdi_indirect_multisink.rs (rs-cmdi-009): helper run_both takes two tainted params and invokes two Command sinks on consecutive lines. Locks in that primary line lands inside the helper (lines 5-6), not at the caller (line 12). Notes document that SinkSite is currently one-per-callee so both findings today collapse onto the first sink; expected_sink_lines=[5,6] and expected_call_site_lines=[12,12] stay valid either way. - python/cmdi/cross_indirect_sink/{app.py,helper.py} (py-cmdi-cross- 004): sink os.system lives in helper.py (cross-file), caller in app.py reads env source and calls run_cmd. Verifies phase 3's cross-file primary attribution: Diag.path = helper.py, Diag.line = 5, with app.py:7 recorded in flow_steps as a Call step. Acceptance: - `cargo test --test benchmark_test -- --ignored --nocapture` passes. - rs-cmdi-003 is TP/TP/TP (the target flip FN->TP at LOC). All pre-existing TP/TP/TP fixtures remain TP/TP/TP; 2 new fixtures are TP/TP/TP. - Aggregate rule-level: TP=158 FP=10 FN=1 TN=97, P=0.940 R=0.994 F1=0.966 on the 266-case corpus (was TP=156 FP=10 FN=1 TN=97 on 264 pre-phase-4, delta is the +2 new cases both resolving TP). - Full `cargo test` green (1566 lib tests + all integration tests). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(taint): phase 5/5 lock Finding.primary_location contract via regression test Add a regression test in src/taint/ssa_transfer.rs that wires up a synthetic SsaFuncSummary with a SinkSite at other.rs:42:10 and drives the three emission stages (pick_primary_sink_sites → emit_ssa_taint_events → ssa_events_to_findings) against a minimal caller SSA body. Asserts the resulting Finding.primary_location is exactly that triple. The existing integration tests in src/taint/tests.rs cover the coarse FuncSummary path end-to-end through analyse_file. This test locks in the lower-level SSA-side plumbing so a future refactor that silently drops the site between pick → emit → findings fails here rather than only at the benchmark layer. Also refreshes tests/benchmark/results/latest.json (timestamp only; rs-cmdi-003 remains TP/TP/TP and the aggregate P/R/F1 are unchanged from phase 4). Closes the primary sink-location attribution feature (phases 1-5/5): * Phase 1 — SinkSite data model on summaries. * Phase 2 — SinkSite threaded into SsaTaintEvent and Finding. * Phase 3 — diag + SARIF consume primary_location. * Phase 4 — benchmark validates primary_call_site_lines across corpus. * Phase 5 — regression test locks the event→finding contract. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor: clean up formatting and improve readability in multiple files * refactor: simplify type definition for deduplication key in findings * test(harness): add must_not_match expectation for FP regression guards Extends ExpectedFinding with must_not_match field that asserts a diagnostic must NOT fire — presence is a hard failure. Non-consuming scan so it coexists with must_match entries on the same rule_id. Adds forbidden_violations accumulator and updates summary line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(regression): update expectations to ensure must_not_match for various taint and resource leak rules * feat: implement auto-seeding for JS/TS handler parameters to enhance taint tracking * feat: update switch statement handling to improve control flow analysis * feat: implement promisify alias handling for JS/TS to enhance taint tracking * feat: enhance taint tracking by refining expectation handling and adding mode filtering * feat: refine SQL handling in stream processing and enhance auto-seeding for handler parameters * feat: update taint tracking rules to enforce full mode matching and improve flow analysis * feat: enhance Ruby subshell handling to improve taint tracking and flow analysis * feat: update xss_response expectations to refine taint flow analysis and enhance regression guarding * feat: refine framework detection and update expectation handling for Echo and Sinatra * feat: implement max_count for taint tracking expectations and deduplicate findings * feat: add strict_unexpected handling for taint-unsanitised-flow in expectation files * feat: enhance deduplication of taint-unsanitised-flow findings by collapsing based on line and severity * feat: add strict_unexpected handling for taint-unsanitised-flow in multiple expectation files * feat: add structural invariant checks for SSA bodies * feat: ensure deterministic phi emission order using BTreeSet * feat: enhance handling of terminators to ensure authoritative flow through successor edges * feat: enhance Goto terminator handling to ensure all successors are marked executable * feat: refactor code for improved readability and organization * feat: simplify predicate checks and enhance readability in SSA handling * feat: implement per-file parse timeout and enhance file size handling * feat: migrate analysis engine toggles from environment variables to configuration file * feat: remove unnecessary whitespace in hostile_input_tests.rs * feat: remove unnecessary whitespace in hostile_input_tests.rs * feat: update dependencies and enhance documentation on language maturity * feat: enhance security headers and improve request body limits * feat: implement sink capability bits for deduplication and enhance evidence tagging * feat: implement dynamic activation handling for gated sinks and enhance validation logic * feat: enhance configuration documentation and clarify inline analysis cache behavior * feat: implement panic recovery during analysis to continue scans past errors * feat: add expectations configuration for taint analysis and performance metrics * feat: enhance error handling and logging during file reading and mutex locking * feat: add cross-file body loading tests and plumbing for CF-1 phase * feat: implement cross-file k=1 context-sensitive inline taint analysis with new tests and fixtures * feat: implement indexed-scan parity in cross-file inline analysis with new dropdown and copy functionality * feat: enhance classification span handling in CFG and AST for improved source attribution * feat: add new Express routes for handling user input and telemetry data * feat: implement ternary expression handling in CFG with diamond structure for JS/TS * feat: implement Phase CF-3 abstract-domain transfer channels in summaries * feat: add support for string-prefix transfer in cross-file calls and update tests * docs: reduce RESULTS.md doc size * feat: implement Phase CF-4 per-return-path summary decomposition with tests * feat: update parameter handling in pass1 and refactor SsaFuncSummary initialization * feat: implement Phase CF-5 for cross-file SCC joint fixed-point convergence with new flags and tests * feat: implement Phase CF-6 with parameter-granularity points-to summaries and associated tests * refactor: update comments and documentation for clarity and consistency * style: format code for consistency and readability * refactor: simplify verdict handling and improve edge checking logic * refactor: optimize path and identifier collection by avoiding unnecessary cloning * chore: update Cargo.toml for Rust version 1.85 and add ignored files; modify CHANGELOG and README for clarity on state analysis defaults * refactor: update documentation and improve clarity in configuration files * refactor: update documentation and improve clarity in configuration files * feat: add JS/TS pass-2 convergence tests and expectations configuration * feat: add Phase 5 regression tests for inline cache origin attribution and update related logic * feat: implement Phase 7 deduplication and alternative path linking for taint findings * feat: implement structural DFS index for anonymous functions and update naming conventions * feat: add Phase 8 regression tests for container-element taint in JS and Python * feat: add engine-depth profiles and explain-engine option for CLI * feat: update expectations and add new README fixtures for multi-file scan regression * feat: implement Phase 11 callback-alias and factory patterns with regression tests * feat: implement Terminator::Switch for multi-way dispatch and add regression tests * feat: add real-CVE benchmark fixtures for CVE-2023-48022, CVE-2019-14939, and CVE-2023-26159 with corresponding patched variants * refactor: extract cfg and ssa_transfer to submodules * refactor: cargo fmt * refactor: remove unnecessary blank line in cfg_tests.rs * refactor: remove unnecessary planning file * chore: update Rust version to 1.88 and bump dependencies in Cargo files * feat: enhance triage UI with new layout and controls, update README for clarity * feat: enhance triage UI with new layout and controls, update README for clarity * chore: remove outdated section from README for version 0.5.0 * docs: improve clarity and consistency in README content * chore: add "GPL-3.0-or-later" to license options in about.toml * chore: update license handling in about.toml and check-licenses.mjs * style: format code for improved readability in TriagePage component * style: format code for improved readability in TriagePage component * chore: enhance license handling and improve body_id scoping in seed lookup * feat: introduce owner and parent body IDs for enhanced seed scoping * feat: implement direction-aware engine provenance with new CLI flag for strict CI gating * feat: add Undef SSA operation for improved control-flow handling * style: improve code formatting for consistency and readability in multiple files * feat: add 16-function chain SCC across multiple files for enhanced analysis * style: simplify code formatting for improved readability in multiple files * fix: update CapHitReason default implementation and improve README clarity * docs: enhance README with detailed explanations of taint analysis and limitations * docs: refine README for clarity and consistency in taint analysis section * style: improve code formatting for better readability in NewScanModal and scans * fix: update cargo-about command to use --offline for deterministic license generation * fix: update cargo-about command to use --offline for deterministic license generation * ci: add step to prime cargo registry cache for deterministic license generation * feat: add support for non-sink collections in authorization analysis * feat: enhance authorization checks with row-level ownership equality and binding tracking * feat: implement self-scoped user handling and enhance ownership checks * refactor: simplify assertions and formatting in authorization analysis tests * fix: normalize line endings in THIRDPARTY-LICENSES.html generation and update README with AI disclosure * docs: update AI disclosure section for clarity and conciseness * feat: add AI Contribution Policy and update contributing guidelines for AI assistance disclosure * feat: enhance authorization analysis with SSA-derived variable type classification * feat: implement auth_finding_to_diag function for enhanced security diagnostics * feat: add args_value_refs to CallSite struct for enhanced argument tracking * feat: add args_value_refs to CallSite struct for enhanced argument tracking * feat: add direction-aware engine provenance with LossDirection classification and new CLI flag * feat: simplify strip_cap_from_call_args call by removing unnecessary line breaks * feat: enhance error message handling in cli_validation_tests for better Windows compatibility * feat: optimize release profile settings in Cargo.toml and update CodeQL configuration * feat: enhance release build process with SBOM generation and SLSA provenance * feat: update actions/checkout and actions/setup-node to v6, enhance CLI options, and improve auth-check summaries * feat: introduce PathFact handling for path safety checks and rejection logic * feat: introduce PathFact handling for path safety checks and rejection logic * feat: update benchmark data and enhance path sanitization logic with new safety checks * feat: document AI assistance in frontend UI development and human review process * feat: add return path facts for enhanced path safety checks and update documentation * chore: update release date for version 0.5.0 in CHANGELOG.md * chore: clean up ci.yml by removing outdated comments and clarifying steps * feat: implement cross-language path sanitizers and validators for enhanced security * feat: enhance SSA value usage tracking by including block terminators and improve path safety checks * feat: enhance switch statement handling by adding per-case path constraints and support for exclusive cases * refactor: simplify conditional formatting and improve code readability in executor and lower modules * feat: add vulnerable examples for various languages demonstrating authentication and sanitization issues * feat: enhance actor context recognition for self-actor identifiers and add support for global non-sink receivers * feat: enhance actor context recognition for self-actor identifiers and add support for global non-sink receivers * feat: add transform classifiers for Java, Go, and Ruby with corresponding tests * refactor: clarify comments on reassign-to-constant idiom and sink behavior in guards.rs --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Eli Peter
GitHub
parent
c4ce08b452
commit
41128177d2
2144 changed files with 201812 additions and 8927 deletions
519
frontend/src/pages/ConfigPage.tsx
Normal file
519
frontend/src/pages/ConfigPage.tsx
Normal file
|
|
@ -0,0 +1,519 @@
|
|||
import { useState, useCallback } from 'react';
|
||||
import {
|
||||
useConfig,
|
||||
useSources,
|
||||
useSinks,
|
||||
useSanitizers,
|
||||
useTerminators,
|
||||
useProfiles,
|
||||
} from '../api/queries/config';
|
||||
import {
|
||||
useAddSource,
|
||||
useDeleteSource,
|
||||
useAddSink,
|
||||
useDeleteSink,
|
||||
useAddSanitizer,
|
||||
useDeleteSanitizer,
|
||||
useAddTerminator,
|
||||
useDeleteTerminator,
|
||||
useAddProfile,
|
||||
useDeleteProfile,
|
||||
useActivateProfile,
|
||||
useToggleTriageSync,
|
||||
} from '../api/mutations/config';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import type { LabelEntryView, TerminatorView, ProfileView } from '../api/types';
|
||||
|
||||
const LANG_OPTIONS = [
|
||||
'javascript',
|
||||
'typescript',
|
||||
'python',
|
||||
'go',
|
||||
'java',
|
||||
'c',
|
||||
'cpp',
|
||||
'php',
|
||||
'ruby',
|
||||
'rust',
|
||||
];
|
||||
|
||||
const CAP_OPTIONS = [
|
||||
'all',
|
||||
'env_var',
|
||||
'html_escape',
|
||||
'shell_escape',
|
||||
'url_encode',
|
||||
'json_parse',
|
||||
'file_io',
|
||||
'sql_query',
|
||||
'deserialize',
|
||||
'ssrf',
|
||||
'code_exec',
|
||||
'crypto',
|
||||
];
|
||||
|
||||
// ── Collapsible Config Section ───────────────────────────────────────────────
|
||||
|
||||
function ConfigSection({
|
||||
title,
|
||||
id,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
id: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="config-section" id={id}>
|
||||
<div
|
||||
className={`config-section-header${collapsed ? ' collapsed' : ''}`}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
>
|
||||
<span
|
||||
className={`config-collapse-arrow${collapsed ? ' collapsed' : ''}`}
|
||||
>
|
||||
▼
|
||||
</span>{' '}
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
<div className={`config-section-body${collapsed ? ' collapsed' : ''}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Label Table (Source/Sink/Sanitizer) ──────────────────────────────────────
|
||||
|
||||
function LabelSection({
|
||||
title,
|
||||
id,
|
||||
kind,
|
||||
entries,
|
||||
onAdd,
|
||||
onDelete,
|
||||
}: {
|
||||
title: string;
|
||||
id: string;
|
||||
kind: string;
|
||||
entries: LabelEntryView[];
|
||||
onAdd: (body: { lang: string; matchers: string[]; cap: string }) => void;
|
||||
onDelete: (entry: LabelEntryView) => void;
|
||||
}) {
|
||||
const [lang, setLang] = useState('');
|
||||
const [matcher, setMatcher] = useState('');
|
||||
const [cap, setCap] = useState('all');
|
||||
|
||||
const builtins = entries.filter((e) => e.is_builtin);
|
||||
const custom = entries.filter((e) => !e.is_builtin);
|
||||
|
||||
const handleAdd = useCallback(() => {
|
||||
if (!lang || !matcher) return;
|
||||
onAdd({ lang, matchers: [matcher], cap });
|
||||
setMatcher('');
|
||||
}, [lang, matcher, cap, onAdd]);
|
||||
|
||||
return (
|
||||
<ConfigSection title={title} id={id}>
|
||||
<div className="inline-form add-label-form">
|
||||
<div className="form-group">
|
||||
<label>Language</label>
|
||||
<select
|
||||
style={{ width: 140 }}
|
||||
value={lang}
|
||||
onChange={(e) => setLang(e.target.value)}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{LANG_OPTIONS.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Matcher</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="functionName"
|
||||
value={matcher}
|
||||
onChange={(e) => setMatcher(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Capability</label>
|
||||
<select value={cap} onChange={(e) => setCap(e.target.value)}>
|
||||
{CAP_OPTIONS.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleAdd}>
|
||||
Add {kind}
|
||||
</button>
|
||||
</div>
|
||||
<div className="table-wrap" style={{ marginTop: 8 }}>
|
||||
{entries.length === 0 ? (
|
||||
<div className="empty-state" style={{ padding: 12 }}>
|
||||
<p>No {kind} rules</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="label-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Language</th>
|
||||
<th>Matchers</th>
|
||||
<th>Cap</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{builtins.map((e, i) => (
|
||||
<tr key={`b-${i}`} className="label-builtin">
|
||||
<td>{e.lang}</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)' }}>
|
||||
{e.matchers.join(', ')}
|
||||
</td>
|
||||
<td>{e.cap}</td>
|
||||
<td>
|
||||
<span className="badge-builtin">built-in</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{custom.map((e, i) => (
|
||||
<tr key={`c-${i}`}>
|
||||
<td>{e.lang}</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)' }}>
|
||||
{e.matchers.join(', ')}
|
||||
</td>
|
||||
<td>{e.cap}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() => onDelete(e)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</ConfigSection>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Config Page ──────────────────────────────────────────────────────────────
|
||||
|
||||
export function ConfigPage() {
|
||||
const {
|
||||
data: config,
|
||||
isLoading: configLoading,
|
||||
error: configError,
|
||||
} = useConfig();
|
||||
const { data: sources } = useSources();
|
||||
const { data: sinks } = useSinks();
|
||||
const { data: sanitizers } = useSanitizers();
|
||||
const { data: terminators } = useTerminators();
|
||||
const { data: profiles } = useProfiles();
|
||||
|
||||
const addSource = useAddSource();
|
||||
const deleteSource = useDeleteSource();
|
||||
const addSink = useAddSink();
|
||||
const deleteSink = useDeleteSink();
|
||||
const addSanitizer = useAddSanitizer();
|
||||
const deleteSanitizer = useDeleteSanitizer();
|
||||
const addTerminator = useAddTerminator();
|
||||
const deleteTerminator = useDeleteTerminator();
|
||||
const addProfile = useAddProfile();
|
||||
const deleteProfile = useDeleteProfile();
|
||||
const activateProfile = useActivateProfile();
|
||||
const toggleTriageSync = useToggleTriageSync();
|
||||
|
||||
const [termLang, setTermLang] = useState('');
|
||||
const [termName, setTermName] = useState('');
|
||||
const [profileName, setProfileName] = useState('');
|
||||
|
||||
const handleAddTerminator = useCallback(() => {
|
||||
if (!termLang || !termName) return;
|
||||
addTerminator.mutate({ lang: termLang, name: termName });
|
||||
setTermName('');
|
||||
}, [termLang, termName, addTerminator]);
|
||||
|
||||
const handleSaveProfile = useCallback(() => {
|
||||
if (!profileName) return;
|
||||
addProfile.mutate({ name: profileName, settings: {} });
|
||||
setProfileName('');
|
||||
}, [profileName, addProfile]);
|
||||
|
||||
if (configLoading) return <LoadingState message="Loading configuration..." />;
|
||||
if (configError) return <ErrorState message={configError.message} />;
|
||||
|
||||
// Extract config fields (config is typed as unknown since it's the raw NyxConfig)
|
||||
const cfg = config as Record<string, Record<string, unknown>> | undefined;
|
||||
const scanner = cfg?.scanner as Record<string, unknown> | undefined;
|
||||
const output = cfg?.output as Record<string, unknown> | undefined;
|
||||
const server = cfg?.server as Record<string, unknown> | undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<h2>Config</h2>
|
||||
</div>
|
||||
|
||||
{/* General Section */}
|
||||
<ConfigSection title="General" id="config-general">
|
||||
<div className="detail-meta">
|
||||
<div>
|
||||
<strong>Analysis Mode:</strong> {String(scanner?.mode || 'full')}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Min Severity:</strong>{' '}
|
||||
{String(scanner?.min_severity || 'Low')}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Max File Size:</strong>{' '}
|
||||
{scanner?.max_file_size_mb
|
||||
? String(scanner.max_file_size_mb) + ' MB'
|
||||
: 'unlimited'}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Excluded Dirs:</strong>{' '}
|
||||
{((scanner?.excluded_directories as string[]) || []).join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Excluded Exts:</strong>{' '}
|
||||
{((scanner?.excluded_extensions as string[]) || []).join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Attack Surface Ranking:</strong>{' '}
|
||||
{output?.attack_surface_ranking ? 'Enabled' : 'Disabled'}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'var(--space-4)',
|
||||
paddingTop: 'var(--space-3)',
|
||||
borderTop: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
<div className="toggle-inline">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="triage-sync-toggle"
|
||||
checked={!!server?.triage_sync}
|
||||
onChange={(e) =>
|
||||
toggleTriageSync.mutate({ enabled: e.target.checked })
|
||||
}
|
||||
/>
|
||||
<label htmlFor="triage-sync-toggle">
|
||||
<strong>Triage Sync</strong> — Auto-sync triage decisions to{' '}
|
||||
<code>.nyx/triage.json</code> for git-based team sharing
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigSection>
|
||||
|
||||
{/* Sources */}
|
||||
<LabelSection
|
||||
title="Sources"
|
||||
id="config-sources"
|
||||
kind="source"
|
||||
entries={sources || []}
|
||||
onAdd={(body) => addSource.mutate(body)}
|
||||
onDelete={(e) =>
|
||||
deleteSource.mutate({
|
||||
lang: e.lang,
|
||||
matchers: e.matchers,
|
||||
cap: e.cap,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Sinks */}
|
||||
<LabelSection
|
||||
title="Sinks"
|
||||
id="config-sinks"
|
||||
kind="sink"
|
||||
entries={sinks || []}
|
||||
onAdd={(body) => addSink.mutate(body)}
|
||||
onDelete={(e) =>
|
||||
deleteSink.mutate({ lang: e.lang, matchers: e.matchers, cap: e.cap })
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Sanitizers */}
|
||||
<LabelSection
|
||||
title="Sanitizers"
|
||||
id="config-sanitizers"
|
||||
kind="sanitizer"
|
||||
entries={sanitizers || []}
|
||||
onAdd={(body) => addSanitizer.mutate(body)}
|
||||
onDelete={(e) =>
|
||||
deleteSanitizer.mutate({
|
||||
lang: e.lang,
|
||||
matchers: e.matchers,
|
||||
cap: e.cap,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Terminators */}
|
||||
<ConfigSection title="Terminators" id="config-terminators">
|
||||
<div className="inline-form" id="add-term-form">
|
||||
<div className="form-group">
|
||||
<label>Language</label>
|
||||
<select
|
||||
style={{ width: 140 }}
|
||||
value={termLang}
|
||||
onChange={(e) => setTermLang(e.target.value)}
|
||||
>
|
||||
<option value="">Select...</option>
|
||||
{LANG_OPTIONS.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Function Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="process.exit"
|
||||
value={termName}
|
||||
onChange={(e) => setTermName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={handleAddTerminator}
|
||||
>
|
||||
Add Terminator
|
||||
</button>
|
||||
</div>
|
||||
<div className="table-wrap">
|
||||
{!terminators || terminators.length === 0 ? (
|
||||
<div className="empty-state" style={{ padding: 12 }}>
|
||||
<p>No terminators configured</p>
|
||||
</div>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Language</th>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(terminators as TerminatorView[]).map((t, i) => (
|
||||
<tr key={i}>
|
||||
<td>{t.lang}</td>
|
||||
<td style={{ fontFamily: 'var(--font-mono)' }}>{t.name}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() => deleteTerminator.mutate(t)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</ConfigSection>
|
||||
|
||||
{/* Profiles */}
|
||||
<ConfigSection title="Profiles" id="config-profiles">
|
||||
<div className="table-wrap">
|
||||
{!profiles || profiles.length === 0 ? (
|
||||
<div className="empty-state" style={{ padding: 12 }}>
|
||||
<p>No profiles configured</p>
|
||||
</div>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Settings</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(profiles as ProfileView[]).map((p) => (
|
||||
<tr key={p.name}>
|
||||
<td>
|
||||
<strong>{p.name}</strong>
|
||||
</td>
|
||||
<td>
|
||||
{p.is_builtin ? (
|
||||
<span className="badge-builtin">built-in</span>
|
||||
) : (
|
||||
<span className="badge-custom">custom</span>
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
fontSize: 'var(--text-xs)',
|
||||
maxWidth: 300,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(p.settings)}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => activateProfile.mutate(p.name)}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
{!p.is_builtin && (
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() => deleteProfile.mutate(p.name)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
<div className="inline-form" style={{ marginTop: 12 }}>
|
||||
<div className="form-group">
|
||||
<label>Profile Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="my_profile"
|
||||
value={profileName}
|
||||
onChange={(e) => setProfileName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={handleSaveProfile}
|
||||
>
|
||||
Save Current as Profile
|
||||
</button>
|
||||
</div>
|
||||
</ConfigSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
878
frontend/src/pages/ExplorerPage.tsx
Normal file
878
frontend/src/pages/ExplorerPage.tsx
Normal file
|
|
@ -0,0 +1,878 @@
|
|||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import {
|
||||
useExplorerSymbols,
|
||||
useExplorerFindings,
|
||||
} from '../api/queries/explorer';
|
||||
import { useFinding } from '../api/queries/findings';
|
||||
import { useDebugFunctions } from '../api/queries/debug';
|
||||
import { ApiError } from '../api/client';
|
||||
import { FileTree } from '../components/data-display/FileTree';
|
||||
import { CodeViewer } from '../components/data-display/CodeViewer';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { EmptyState } from '../components/ui/EmptyState';
|
||||
import { ExplorerIcon } from '../components/icons/Icons';
|
||||
import { useFileTree } from '../hooks/useFileTree';
|
||||
import { FunctionSelector } from './debug/FunctionSelector';
|
||||
import { CfgAnalysisPanel } from './debug/CfgViewerPage';
|
||||
import { SsaAnalysisPanel } from './debug/SsaViewerPage';
|
||||
import { TaintAnalysisPanel } from './debug/TaintViewerPage';
|
||||
import { SummaryAnalysisPanel } from './debug/SummaryExplorerPage';
|
||||
import { AbstractInterpAnalysisPanel } from './debug/AbstractInterpPage';
|
||||
import { SymexAnalysisPanel } from './debug/SymexPage';
|
||||
import type { TreeEntry, FlowStep, FindingView } from '../api/types';
|
||||
|
||||
type ExplorerMode = 'tree' | 'symbols' | 'hotspots';
|
||||
type ExplorerView =
|
||||
| 'code'
|
||||
| 'cfg'
|
||||
| 'ssa'
|
||||
| 'taint'
|
||||
| 'summaries'
|
||||
| 'abstract-interp'
|
||||
| 'symex';
|
||||
|
||||
const FLOW_KIND_COLORS: Record<string, string> = {
|
||||
source: 'var(--success)',
|
||||
assignment: 'var(--accent)',
|
||||
call: 'var(--sev-medium)',
|
||||
phi: 'var(--text-tertiary)',
|
||||
sink: 'var(--sev-high)',
|
||||
};
|
||||
|
||||
const FLOW_KIND_LABELS: Record<string, string> = {
|
||||
source: 'Source',
|
||||
assignment: 'Assign',
|
||||
call: 'Call',
|
||||
phi: 'Phi',
|
||||
sink: 'Sink',
|
||||
};
|
||||
|
||||
const VIEW_CONFIG: Array<{
|
||||
id: ExplorerView;
|
||||
label: string;
|
||||
requiresFunction?: boolean;
|
||||
supportsFunction?: boolean;
|
||||
}> = [
|
||||
{ id: 'code', label: 'Code' },
|
||||
{ id: 'cfg', label: 'CFG', requiresFunction: true, supportsFunction: true },
|
||||
{ id: 'ssa', label: 'SSA', requiresFunction: true, supportsFunction: true },
|
||||
{
|
||||
id: 'taint',
|
||||
label: 'Taint',
|
||||
requiresFunction: true,
|
||||
supportsFunction: true,
|
||||
},
|
||||
{ id: 'summaries', label: 'Summaries', supportsFunction: true },
|
||||
{
|
||||
id: 'abstract-interp',
|
||||
label: 'Abstract Interp',
|
||||
requiresFunction: true,
|
||||
supportsFunction: true,
|
||||
},
|
||||
{
|
||||
id: 'symex',
|
||||
label: 'Symex',
|
||||
requiresFunction: true,
|
||||
supportsFunction: true,
|
||||
},
|
||||
];
|
||||
|
||||
const VIEW_CONFIG_BY_ID = new Map(VIEW_CONFIG.map((view) => [view.id, view]));
|
||||
|
||||
export function ExplorerPage() {
|
||||
const [params, setParams] = useSearchParams();
|
||||
const [explorerMode, setExplorerMode] = useState<ExplorerMode>('tree');
|
||||
const [highlightLine, setHighlightLine] = useState<number | undefined>();
|
||||
const [selectedFindingIndex, setSelectedFindingIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const [invalidFunctionNotice, setInvalidFunctionNotice] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const codeScrollPositionsRef = useRef<Record<string, number>>({});
|
||||
|
||||
const rawView = params.get('view');
|
||||
const rawFile = params.get('file') || null;
|
||||
const rawFunction = params.get('function') || null;
|
||||
const currentView: ExplorerView = isExplorerView(rawView) ? rawView : 'code';
|
||||
const currentViewConfig = VIEW_CONFIG_BY_ID.get(currentView)!;
|
||||
const isCodeView = currentView === 'code';
|
||||
|
||||
const updateExplorerParams = useCallback(
|
||||
(
|
||||
updates: Partial<Record<'file' | 'view' | 'function', string | null>>,
|
||||
replace = false,
|
||||
) => {
|
||||
setParams(
|
||||
(prev) => {
|
||||
const next = new URLSearchParams(prev);
|
||||
for (const [key, value] of Object.entries(updates)) {
|
||||
if (value) {
|
||||
next.set(key, value);
|
||||
} else {
|
||||
next.delete(key);
|
||||
}
|
||||
}
|
||||
return next;
|
||||
},
|
||||
{ replace },
|
||||
);
|
||||
},
|
||||
[setParams],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (rawView !== currentView) {
|
||||
updateExplorerParams({ view: currentView }, true);
|
||||
}
|
||||
}, [currentView, rawView, updateExplorerParams]);
|
||||
|
||||
const { data: symbolEntries, error: symbolsError } =
|
||||
useExplorerSymbols(rawFile);
|
||||
const hasInvalidFile = Boolean(
|
||||
rawFile && isPathResolutionError(symbolsError),
|
||||
);
|
||||
const hasFileLookupError = Boolean(
|
||||
rawFile && symbolsError && !hasInvalidFile,
|
||||
);
|
||||
const selectedFile = rawFile && !hasInvalidFile ? rawFile : null;
|
||||
|
||||
const handleFileSelect = useCallback(
|
||||
(path: string) => {
|
||||
setHighlightLine(undefined);
|
||||
setSelectedFindingIndex(null);
|
||||
setInvalidFunctionNotice(null);
|
||||
updateExplorerParams({ file: path, function: null });
|
||||
},
|
||||
[updateExplorerParams],
|
||||
);
|
||||
|
||||
const {
|
||||
rootEntries,
|
||||
isLoading: treeLoading,
|
||||
expandedPaths,
|
||||
loadedChildren,
|
||||
selectedPath,
|
||||
handleToggleExpand,
|
||||
handleSelectFile,
|
||||
} = useFileTree(selectedFile, handleFileSelect);
|
||||
|
||||
const { data: functions, isLoading: functionsLoading } =
|
||||
useDebugFunctions(selectedFile);
|
||||
const selectedFunction =
|
||||
rawFunction && functions?.some((fn) => fn.name === rawFunction)
|
||||
? rawFunction
|
||||
: null;
|
||||
const hasFunctionOptions = (functions?.length ?? 0) > 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (!rawFunction) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedFile) {
|
||||
setInvalidFunctionNotice(
|
||||
`Function "${rawFunction}" was cleared because no valid file is selected.`,
|
||||
);
|
||||
updateExplorerParams({ function: null }, true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!functions) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!functions.some((fn) => fn.name === rawFunction)) {
|
||||
setInvalidFunctionNotice(
|
||||
`Function "${rawFunction}" was not found in ${selectedFile}.`,
|
||||
);
|
||||
updateExplorerParams({ function: null }, true);
|
||||
}
|
||||
}, [functions, rawFunction, selectedFile, updateExplorerParams]);
|
||||
|
||||
const { data: findings } = useExplorerFindings(selectedFile);
|
||||
const { data: fullFinding } = useFinding(selectedFindingIndex ?? '');
|
||||
|
||||
const handleSelectFinding = useCallback((index: number, line: number) => {
|
||||
setSelectedFindingIndex(index);
|
||||
setHighlightLine(line);
|
||||
}, []);
|
||||
|
||||
const handleViewSelect = useCallback(
|
||||
(view: ExplorerView) => {
|
||||
updateExplorerParams({ view });
|
||||
},
|
||||
[updateExplorerParams],
|
||||
);
|
||||
|
||||
const handleFunctionChange = useCallback(
|
||||
(fnName: string | null) => {
|
||||
setInvalidFunctionNotice(null);
|
||||
updateExplorerParams({ function: fnName });
|
||||
},
|
||||
[updateExplorerParams],
|
||||
);
|
||||
|
||||
const selectedEntry = findEntry(rootEntries, loadedChildren, selectedFile);
|
||||
const language = selectedEntry?.language || '';
|
||||
const hotspotFiles = useMemo(
|
||||
() => buildHotspotList(rootEntries, loadedChildren),
|
||||
[loadedChildren, rootEntries],
|
||||
);
|
||||
|
||||
const sevBreakdown = findings
|
||||
? findings.reduce(
|
||||
(acc, finding) => {
|
||||
const key = finding.severity.toUpperCase();
|
||||
acc[key] = (acc[key] || 0) + 1;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, number>,
|
||||
)
|
||||
: {};
|
||||
|
||||
const evidence = fullFinding?.evidence;
|
||||
const flowSteps = evidence?.flow_steps;
|
||||
const hasFlow = flowSteps && flowSteps.length > 0;
|
||||
const hasStateEvidence =
|
||||
fullFinding?.rule_id.startsWith('state-') && evidence?.state;
|
||||
|
||||
const codeHighlights =
|
||||
selectedFindingIndex != null && evidence
|
||||
? {
|
||||
sourceLine: evidence.source?.line,
|
||||
sinkLine: evidence.sink?.line,
|
||||
findingLine: fullFinding?.line,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const flowLineSet = new Set<number>();
|
||||
if (hasFlow) {
|
||||
for (const step of flowSteps) {
|
||||
if (step.line) {
|
||||
flowLineSet.add(step.line);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const analysisContent = renderAnalysisContent({
|
||||
currentView,
|
||||
currentViewLabel: currentViewConfig.label,
|
||||
selectedFile,
|
||||
selectedFunction,
|
||||
functions,
|
||||
functionsLoading,
|
||||
onBrowseFiles: () => handleViewSelect('code'),
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`explorer-page ${isCodeView ? 'explorer-page-code' : 'explorer-page-analysis'}`}
|
||||
>
|
||||
<div className="explorer-left">
|
||||
<div className="explorer-left-header">
|
||||
<div className="explorer-mode-toggle">
|
||||
{(['tree', 'symbols', 'hotspots'] as ExplorerMode[]).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
className={`mode-btn${explorerMode === mode ? ' active' : ''}`}
|
||||
onClick={() => setExplorerMode(mode)}
|
||||
>
|
||||
{mode === 'tree'
|
||||
? 'Files'
|
||||
: mode === 'symbols'
|
||||
? 'Symbols'
|
||||
: 'Hotspots'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="explorer-left-body">
|
||||
{explorerMode === 'tree' && (
|
||||
<>
|
||||
{treeLoading && <LoadingState message="Loading files..." />}
|
||||
{rootEntries && (
|
||||
<FileTree
|
||||
entries={rootEntries}
|
||||
expandedPaths={expandedPaths}
|
||||
selectedPath={selectedPath}
|
||||
onToggleExpand={handleToggleExpand}
|
||||
onSelectFile={handleSelectFile}
|
||||
loadedChildren={loadedChildren}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{explorerMode === 'symbols' && (
|
||||
<div className="explorer-symbol-list">
|
||||
{!selectedFile && (
|
||||
<div className="explorer-hint">
|
||||
Select a file to view symbols
|
||||
</div>
|
||||
)}
|
||||
{selectedFile && symbolEntries && symbolEntries.length === 0 && (
|
||||
<div className="explorer-hint">No symbols found</div>
|
||||
)}
|
||||
{selectedFile &&
|
||||
symbolEntries?.map((sym, index) => (
|
||||
<div
|
||||
key={`${sym.name}-${index}`}
|
||||
className="explorer-symbol-item"
|
||||
>
|
||||
<span className={`symbol-kind symbol-kind-${sym.kind}`}>
|
||||
{sym.kind === 'function' ? 'ƒ' : 'm'}
|
||||
</span>
|
||||
<span className="symbol-name">{sym.name}</span>
|
||||
{sym.arity !== undefined && sym.arity !== null && (
|
||||
<span className="symbol-arity">({sym.arity})</span>
|
||||
)}
|
||||
{sym.finding_count > 0 && (
|
||||
<span className="tree-node-badge">
|
||||
{sym.finding_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{explorerMode === 'hotspots' && (
|
||||
<div className="explorer-hotspot-list">
|
||||
{hotspotFiles.length === 0 && (
|
||||
<div className="explorer-hint">
|
||||
No findings in scanned files
|
||||
</div>
|
||||
)}
|
||||
{hotspotFiles.map((entry) => (
|
||||
<div
|
||||
key={entry.path}
|
||||
className={`hotspot-item${selectedFile === entry.path ? ' selected' : ''}`}
|
||||
onClick={() => handleSelectFile(entry.path)}
|
||||
>
|
||||
<span className="hotspot-name" title={entry.path}>
|
||||
{entry.name}
|
||||
</span>
|
||||
<span className="hotspot-count">
|
||||
<span
|
||||
className={`badge badge-sev badge-sev-${(entry.severity_max || 'low').toLowerCase()}`}
|
||||
>
|
||||
{entry.finding_count}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="explorer-main-shell">
|
||||
<div className="explorer-file-header">
|
||||
<div className="explorer-file-header-top">
|
||||
<div className="explorer-file-header-copy">
|
||||
<span className="explorer-file-label">File</span>
|
||||
<span className="explorer-file-path">
|
||||
{selectedFile || 'Select a file in Explorer'}
|
||||
</span>
|
||||
</div>
|
||||
{selectedFile && currentViewConfig.supportsFunction && (
|
||||
<div className="explorer-function-picker">
|
||||
<FunctionSelector
|
||||
file={selectedFile}
|
||||
selectedFunction={selectedFunction}
|
||||
onFunctionChange={handleFunctionChange}
|
||||
showFilePath={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="explorer-view-tabs"
|
||||
role="tablist"
|
||||
aria-label="File views"
|
||||
>
|
||||
{VIEW_CONFIG.map((view) => (
|
||||
<button
|
||||
key={view.id}
|
||||
className={`explorer-view-tab${currentView === view.id ? ' active' : ''}`}
|
||||
onClick={() => handleViewSelect(view.id)}
|
||||
type="button"
|
||||
>
|
||||
{view.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{hasInvalidFile && rawFile && (
|
||||
<div className="explorer-inline-notice">
|
||||
The requested file <code>{rawFile}</code> could not be found.
|
||||
Choose another file in Explorer.
|
||||
</div>
|
||||
)}
|
||||
{hasFileLookupError && (
|
||||
<div className="explorer-inline-notice explorer-inline-notice-warning">
|
||||
Explorer could not validate the selected file right now.
|
||||
</div>
|
||||
)}
|
||||
{invalidFunctionNotice && (
|
||||
<div className="explorer-inline-notice">
|
||||
{invalidFunctionNotice}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="explorer-main-body">
|
||||
{isCodeView ? (
|
||||
<>
|
||||
{!selectedFile && (
|
||||
<EmptyState
|
||||
icon={<ExplorerIcon size={48} />}
|
||||
message={
|
||||
hasInvalidFile
|
||||
? 'Choose a file from the Explorer to continue.'
|
||||
: 'Select a file from the tree to view its contents.'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{selectedFile && (
|
||||
<CodeViewer
|
||||
filePath={selectedFile}
|
||||
findings={findings || undefined}
|
||||
highlights={codeHighlights}
|
||||
highlightLine={highlightLine}
|
||||
flowLines={flowLineSet.size > 0 ? flowLineSet : undefined}
|
||||
language={language}
|
||||
initialScrollTop={
|
||||
codeScrollPositionsRef.current[selectedFile]
|
||||
}
|
||||
onScrollPositionChange={(scrollTop) => {
|
||||
codeScrollPositionsRef.current[selectedFile] = scrollTop;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
analysisContent
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCodeView && (
|
||||
<div className="explorer-right">
|
||||
{!selectedFile && (
|
||||
<div className="explorer-right-section">
|
||||
<div className="explorer-hint">
|
||||
Select a file to view analysis details
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedFile && (
|
||||
<>
|
||||
<div className="explorer-right-section">
|
||||
<h3>File Summary</h3>
|
||||
<div className="explorer-file-meta">
|
||||
{language && <span className="badge">{language}</span>}
|
||||
<span className="meta-text">
|
||||
{findings ? findings.length : 0} finding
|
||||
{findings?.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
{findings && findings.length > 0 && (
|
||||
<div className="explorer-sev-breakdown">
|
||||
{Object.entries(sevBreakdown)
|
||||
.sort(([a], [b]) => sevOrder(a) - sevOrder(b))
|
||||
.map(([sev, count]) => (
|
||||
<span
|
||||
key={sev}
|
||||
className={`badge badge-sev badge-sev-${sev.toLowerCase()}`}
|
||||
>
|
||||
{sev}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="explorer-right-section">
|
||||
<h3>Symbols</h3>
|
||||
{symbolEntries && symbolEntries.length === 0 && (
|
||||
<div className="explorer-hint">No symbols found</div>
|
||||
)}
|
||||
{symbolEntries?.map((sym, index) => (
|
||||
<div
|
||||
key={`${sym.name}-${index}`}
|
||||
className="explorer-symbol-item compact"
|
||||
>
|
||||
<span className={`symbol-kind symbol-kind-${sym.kind}`}>
|
||||
{sym.kind === 'function' ? 'ƒ' : 'm'}
|
||||
</span>
|
||||
<span className="symbol-name">{sym.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="explorer-right-section">
|
||||
<h3>Findings</h3>
|
||||
{findings && findings.length === 0 && (
|
||||
<div className="explorer-hint">No findings in this file</div>
|
||||
)}
|
||||
<div className="explorer-findings-list">
|
||||
{findings?.map((finding) => (
|
||||
<div
|
||||
key={`${finding.line}-${finding.rule_id}`}
|
||||
className={`explorer-finding-item${selectedFindingIndex === finding.index ? ' active' : ''}`}
|
||||
onClick={() =>
|
||||
handleSelectFinding(finding.index, finding.line)
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={`finding-sev-dot sev-${finding.severity.toLowerCase()}`}
|
||||
/>
|
||||
<span className="finding-line">L{finding.line}</span>
|
||||
<span className="finding-rule">{finding.rule_id}</span>
|
||||
{finding.message && (
|
||||
<span className="finding-msg" title={finding.message}>
|
||||
{finding.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasFlow && (
|
||||
<div className="explorer-right-section">
|
||||
<h3>Taint Flow</h3>
|
||||
<ExplorerFlowTimeline
|
||||
steps={flowSteps}
|
||||
onStepClick={(line) => setHighlightLine(line)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasStateEvidence && fullFinding && (
|
||||
<ExplorerStateDetail finding={fullFinding} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderAnalysisContent({
|
||||
currentView,
|
||||
currentViewLabel,
|
||||
selectedFile,
|
||||
selectedFunction,
|
||||
functions,
|
||||
functionsLoading,
|
||||
onBrowseFiles,
|
||||
}: {
|
||||
currentView: ExplorerView;
|
||||
currentViewLabel: string;
|
||||
selectedFile: string | null;
|
||||
selectedFunction: string | null;
|
||||
functions: Array<{ name: string }> | undefined;
|
||||
functionsLoading: boolean;
|
||||
onBrowseFiles: () => void;
|
||||
}) {
|
||||
if (!selectedFile) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<ExplorerIcon size={48} />}
|
||||
message="Select a file from the tree to view its contents."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentView === 'summaries') {
|
||||
return (
|
||||
<div className="explorer-analysis-content">
|
||||
<SummaryAnalysisPanel
|
||||
file={selectedFile}
|
||||
functionName={selectedFunction}
|
||||
scope="file"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (functionsLoading) {
|
||||
return <LoadingState message="Loading functions..." />;
|
||||
}
|
||||
|
||||
if ((functions?.length ?? 0) === 0) {
|
||||
return (
|
||||
<AnalysisEmptyState
|
||||
title="No functions found"
|
||||
message="This file does not expose any functions for function-scoped analysis."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedFunction) {
|
||||
return (
|
||||
<AnalysisEmptyState
|
||||
title={`Select a function to inspect ${currentViewLabel}`}
|
||||
message={`Choose a function in the header to view ${currentViewLabel.toLowerCase()} for this file.`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
switch (currentView) {
|
||||
case 'cfg':
|
||||
return (
|
||||
<CfgAnalysisPanel file={selectedFile} functionName={selectedFunction} />
|
||||
);
|
||||
case 'ssa':
|
||||
return (
|
||||
<div className="explorer-analysis-content">
|
||||
<SsaAnalysisPanel
|
||||
file={selectedFile}
|
||||
functionName={selectedFunction}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'taint':
|
||||
return (
|
||||
<div className="explorer-analysis-content">
|
||||
<TaintAnalysisPanel
|
||||
file={selectedFile}
|
||||
functionName={selectedFunction}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'abstract-interp':
|
||||
return (
|
||||
<div className="explorer-analysis-content">
|
||||
<AbstractInterpAnalysisPanel
|
||||
file={selectedFile}
|
||||
functionName={selectedFunction}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'symex':
|
||||
return (
|
||||
<div className="explorer-analysis-content">
|
||||
<SymexAnalysisPanel
|
||||
file={selectedFile}
|
||||
functionName={selectedFunction}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case 'code':
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function AnalysisEmptyState({
|
||||
title,
|
||||
message,
|
||||
onBrowseFiles,
|
||||
}: {
|
||||
title: string;
|
||||
message: string;
|
||||
onBrowseFiles?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<EmptyState>
|
||||
<h3>{title}</h3>
|
||||
<p>{message}</p>
|
||||
{onBrowseFiles && (
|
||||
<button className="btn btn-primary btn-sm" onClick={onBrowseFiles}>
|
||||
Browse Files
|
||||
</button>
|
||||
)}
|
||||
</EmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
function ExplorerFlowTimeline({
|
||||
steps,
|
||||
onStepClick,
|
||||
}: {
|
||||
steps: FlowStep[];
|
||||
onStepClick: (line: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flow-timeline explorer-flow">
|
||||
{steps.map((step, index) => {
|
||||
const color = FLOW_KIND_COLORS[step.kind] || 'var(--text-secondary)';
|
||||
const label = FLOW_KIND_LABELS[step.kind] || step.kind;
|
||||
const isLast = index === steps.length - 1;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`flow-step${step.is_cross_file ? ' flow-step-cross-file' : ''}`}
|
||||
onClick={() => step.line && onStepClick(step.line)}
|
||||
>
|
||||
<div className="flow-step-connector">
|
||||
<div className="flow-step-dot" style={{ background: color }} />
|
||||
{!isLast && <div className="flow-step-line" />}
|
||||
</div>
|
||||
<div className="flow-step-card">
|
||||
<div className="flow-step-header">
|
||||
<span className="flow-step-badge" style={{ color }}>
|
||||
{label}
|
||||
</span>
|
||||
{step.variable && (
|
||||
<span className="flow-step-var">{step.variable}</span>
|
||||
)}
|
||||
{step.callee && (
|
||||
<span className="flow-step-callee">{step.callee}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flow-step-loc">
|
||||
L{step.line}:{step.col}
|
||||
{step.function ? ` in ${step.function}` : ''}
|
||||
</div>
|
||||
{step.snippet && (
|
||||
<div className="flow-step-snippet">{step.snippet}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const STATE_REMEDIATION_HINTS: Record<string, string> = {
|
||||
'state-use-after-close':
|
||||
'Ensure the resource is not accessed after calling close/free.',
|
||||
'state-double-close':
|
||||
'Remove the duplicate close call, or guard with a null/closed check.',
|
||||
'state-resource-leak':
|
||||
'Add a close/free call before the function exits, or use defer/with/try-with-resources/RAII.',
|
||||
'state-resource-leak-possible':
|
||||
'Ensure the resource is closed on all code paths, including error/early-return paths.',
|
||||
'state-unauthed-access':
|
||||
'Add an authentication check before this operation, or move it behind auth middleware.',
|
||||
};
|
||||
|
||||
function ExplorerStateDetail({ finding }: { finding: FindingView }) {
|
||||
const state = finding.evidence?.state;
|
||||
if (!state) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isAuth = state.machine === 'auth';
|
||||
const machineLabel = isAuth ? 'Authentication State' : 'Resource Lifecycle';
|
||||
const hint = STATE_REMEDIATION_HINTS[finding.rule_id];
|
||||
const acquireLocation =
|
||||
finding.rule_id.includes('leak') && finding.evidence?.sink
|
||||
? `L${finding.evidence.sink.line}:${finding.evidence.sink.col}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="explorer-right-section">
|
||||
<h3>State Analysis</h3>
|
||||
<div className="state-transition-card">
|
||||
<div className="state-machine-label">{machineLabel}</div>
|
||||
{state.subject && (
|
||||
<div className="state-subject">
|
||||
<span className="state-subject-label">Variable:</span>
|
||||
<code className="state-subject-name">{state.subject}</code>
|
||||
</div>
|
||||
)}
|
||||
<div className="state-transition-visual">
|
||||
<span className="state-from">{state.from_state}</span>
|
||||
<span className="state-arrow">→</span>
|
||||
<span className="state-to">{state.to_state}</span>
|
||||
</div>
|
||||
{acquireLocation && (
|
||||
<div className="state-acquire-location">
|
||||
Acquired at: {acquireLocation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{hint && (
|
||||
<div className="state-remediation">
|
||||
<div className="state-remediation-label">Remediation</div>
|
||||
{hint}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function findEntry(
|
||||
rootEntries: TreeEntry[] | undefined,
|
||||
loadedChildren: Map<string, TreeEntry[]>,
|
||||
path: string | null,
|
||||
): TreeEntry | undefined {
|
||||
if (!path) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (rootEntries) {
|
||||
const found = rootEntries.find((entry) => entry.path === path);
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
}
|
||||
|
||||
for (const children of loadedChildren.values()) {
|
||||
const found = children.find((entry) => entry.path === path);
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function buildHotspotList(
|
||||
rootEntries: TreeEntry[] | undefined,
|
||||
loadedChildren: Map<string, TreeEntry[]>,
|
||||
): TreeEntry[] {
|
||||
const files: TreeEntry[] = [];
|
||||
|
||||
function collect(entries: TreeEntry[]) {
|
||||
for (const entry of entries) {
|
||||
if (entry.entry_type === 'file' && entry.finding_count > 0) {
|
||||
files.push(entry);
|
||||
}
|
||||
if (entry.entry_type === 'dir') {
|
||||
const children = loadedChildren.get(entry.path);
|
||||
if (children) {
|
||||
collect(children);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (rootEntries) {
|
||||
collect(rootEntries);
|
||||
}
|
||||
files.sort((a, b) => b.finding_count - a.finding_count);
|
||||
return files;
|
||||
}
|
||||
|
||||
function sevOrder(sev: string): number {
|
||||
switch (sev) {
|
||||
case 'HIGH':
|
||||
return 0;
|
||||
case 'MEDIUM':
|
||||
return 1;
|
||||
case 'LOW':
|
||||
return 2;
|
||||
default:
|
||||
return 3;
|
||||
}
|
||||
}
|
||||
|
||||
function isExplorerView(value: string | null): value is ExplorerView {
|
||||
return VIEW_CONFIG_BY_ID.has(value as ExplorerView);
|
||||
}
|
||||
|
||||
function isPathResolutionError(error: unknown): boolean {
|
||||
return (
|
||||
error instanceof ApiError && (error.status === 403 || error.status === 404)
|
||||
);
|
||||
}
|
||||
1024
frontend/src/pages/FindingDetailPage.tsx
Normal file
1024
frontend/src/pages/FindingDetailPage.tsx
Normal file
File diff suppressed because it is too large
Load diff
729
frontend/src/pages/FindingsPage.tsx
Normal file
729
frontend/src/pages/FindingsPage.tsx
Normal file
|
|
@ -0,0 +1,729 @@
|
|||
import { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useFindingsURLState } from '../hooks/useFindingsURLState';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import {
|
||||
useFindings,
|
||||
useFindingFilters,
|
||||
fetchFindingDetail,
|
||||
} from '../api/queries/findings';
|
||||
import { useBulkTriage, useAddSuppression } from '../api/mutations/triage';
|
||||
import { Pagination } from '../components/ui/Pagination';
|
||||
import { Dropdown, DropdownItem } from '../components/ui/Dropdown';
|
||||
import { CopyMarkdownButton } from '../components/CopyMarkdownButton';
|
||||
import { truncPath } from '../utils/truncPath';
|
||||
import { findingsToMarkdown } from '../utils/findingMarkdown';
|
||||
import type { FindingView, FilterValues } from '../api/types';
|
||||
|
||||
// ── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatTriageState(state: string): string {
|
||||
return (state || 'open').replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
// ── Filter Bar ──────────────────────────────────────────────────────────────
|
||||
|
||||
interface FilterSelectProps {
|
||||
id: string;
|
||||
label: string;
|
||||
values: string[] | undefined;
|
||||
current: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
function FilterSelect({
|
||||
id,
|
||||
label,
|
||||
values,
|
||||
current,
|
||||
onChange,
|
||||
}: FilterSelectProps) {
|
||||
if (!values || values.length === 0) return null;
|
||||
return (
|
||||
<select id={id} value={current} onChange={(e) => onChange(e.target.value)}>
|
||||
<option value="">All {label}</option>
|
||||
{values.map((v) => (
|
||||
<option key={v} value={v}>
|
||||
{v}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Bulk Action Bar ─────────────────────────────────────────────────────────
|
||||
|
||||
interface BulkBarProps {
|
||||
selectedCount: number;
|
||||
sharedStatus: string | null;
|
||||
onBulkTriage: (state: string) => void;
|
||||
onSuppressByPattern: () => void;
|
||||
onBulkCopy: () => Promise<string>;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [
|
||||
{ value: 'investigating', label: 'Investigating' },
|
||||
{ value: 'false_positive', label: 'Mark as False Positive' },
|
||||
{ value: 'accepted_risk', label: 'Accept Risk' },
|
||||
];
|
||||
|
||||
function BulkActionBar({
|
||||
selectedCount,
|
||||
sharedStatus,
|
||||
onBulkTriage,
|
||||
onSuppressByPattern,
|
||||
onBulkCopy,
|
||||
}: BulkBarProps) {
|
||||
const disabled = selectedCount === 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bulk-action-bar${selectedCount > 0 ? ' visible' : ''}`}
|
||||
aria-hidden={disabled}
|
||||
>
|
||||
<span className="bulk-count">{selectedCount} selected</span>
|
||||
|
||||
<div className="bulk-actions">
|
||||
<Dropdown
|
||||
align="right"
|
||||
trigger={({ open }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm bulk-menu-btn"
|
||||
disabled={disabled}
|
||||
>
|
||||
Status
|
||||
<span className={`bulk-caret${open ? ' bulk-caret--open' : ''}`}>
|
||||
▾
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
{({ close }) =>
|
||||
STATUS_OPTIONS.map((opt) => (
|
||||
<DropdownItem
|
||||
key={opt.value}
|
||||
checked={sharedStatus === opt.value}
|
||||
onClick={() => {
|
||||
onBulkTriage(opt.value);
|
||||
close();
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</DropdownItem>
|
||||
))
|
||||
}
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown
|
||||
align="right"
|
||||
trigger={({ open }) => (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm bulk-menu-btn bulk-menu-btn--warning"
|
||||
disabled={disabled}
|
||||
>
|
||||
Suppress
|
||||
<span className={`bulk-caret${open ? ' bulk-caret--open' : ''}`}>
|
||||
▾
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<DropdownItem
|
||||
tone="warning"
|
||||
onClick={() => {
|
||||
onBulkTriage('suppressed');
|
||||
close();
|
||||
}}
|
||||
>
|
||||
Suppress this finding
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
tone="warning"
|
||||
hint="advanced"
|
||||
onClick={() => {
|
||||
onSuppressByPattern();
|
||||
close();
|
||||
}}
|
||||
>
|
||||
Suppress by pattern
|
||||
</DropdownItem>
|
||||
</>
|
||||
)}
|
||||
</Dropdown>
|
||||
|
||||
<div className="bulk-divider" aria-hidden />
|
||||
|
||||
<CopyMarkdownButton
|
||||
className="bulk-copy-btn"
|
||||
iconOnly
|
||||
label="Copy selected as markdown"
|
||||
title="Copy selected as markdown"
|
||||
getMarkdown={onBulkCopy}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Suppress Modal ──────────────────────────────────────────────────────────
|
||||
|
||||
interface SuppressModalProps {
|
||||
rules: string[];
|
||||
files: string[];
|
||||
onSuppress: (by: string, value: string, note: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function SuppressModal({
|
||||
rules,
|
||||
files,
|
||||
onSuppress,
|
||||
onClose,
|
||||
}: SuppressModalProps) {
|
||||
const [note, setNote] = useState('');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="suppress-modal-overlay"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div className="suppress-modal">
|
||||
<h3>Suppress by Pattern</h3>
|
||||
<div className="suppress-options">
|
||||
{rules.map((r) => (
|
||||
<button
|
||||
key={`rule-${r}`}
|
||||
className="btn btn-sm suppress-opt"
|
||||
onClick={() => onSuppress('rule', r, note)}
|
||||
>
|
||||
By rule: {r}
|
||||
</button>
|
||||
))}
|
||||
{files.map((f) => (
|
||||
<button
|
||||
key={`file-${f}`}
|
||||
className="btn btn-sm suppress-opt"
|
||||
onClick={() => onSuppress('file', f, note)}
|
||||
>
|
||||
By file: {truncPath(f, 40)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
placeholder="Note (optional)..."
|
||||
rows={2}
|
||||
style={{ width: '100%', marginTop: 'var(--space-3)' }}
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 'var(--space-2)',
|
||||
marginTop: 'var(--space-3)',
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Sortable Header ─────────────────────────────────────────────────────────
|
||||
|
||||
interface SortableThProps {
|
||||
column: string;
|
||||
label: string;
|
||||
currentSort: string;
|
||||
currentDir: string;
|
||||
onSort: (col: string, dir: string) => void;
|
||||
}
|
||||
|
||||
function SortableTh({
|
||||
column,
|
||||
label,
|
||||
currentSort,
|
||||
currentDir,
|
||||
onSort,
|
||||
}: SortableThProps) {
|
||||
const isActive = currentSort === column;
|
||||
const arrow = isActive ? (currentDir === 'desc' ? '\u2193' : '\u2191') : '';
|
||||
|
||||
const handleClick = () => {
|
||||
const newDir =
|
||||
currentSort === column && currentDir === 'asc' ? 'desc' : 'asc';
|
||||
onSort(column, newDir);
|
||||
};
|
||||
|
||||
return (
|
||||
<th
|
||||
className={`sortable${isActive ? ' active' : ''}`}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{label}
|
||||
{arrow && <span className="sort-arrow">{arrow}</span>}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Component ──────────────────────────────────────────────────────────
|
||||
|
||||
export function FindingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { state, updateState, resetFilters, hasActiveFilters } =
|
||||
useFindingsURLState();
|
||||
|
||||
// Local search input state (debounced before pushing to URL)
|
||||
const [searchInput, setSearchInput] = useState(state.search);
|
||||
const debouncedSearch = useDebounce(searchInput, 300);
|
||||
|
||||
// Sync debounced search to URL state
|
||||
useEffect(() => {
|
||||
if (debouncedSearch !== state.search) {
|
||||
updateState({ search: debouncedSearch });
|
||||
}
|
||||
}, [debouncedSearch]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Sync URL search back to local input when navigating
|
||||
useEffect(() => {
|
||||
setSearchInput(state.search);
|
||||
}, [state.search]);
|
||||
|
||||
// Build query params for the API
|
||||
const queryParams = useMemo(
|
||||
() => ({
|
||||
page: Number(state.page) || 1,
|
||||
per_page: Number(state.per_page) || 50,
|
||||
sort_by: state.sort_by || undefined,
|
||||
sort_dir: state.sort_dir !== 'asc' ? state.sort_dir : undefined,
|
||||
severity: state.severity || undefined,
|
||||
category: state.category || undefined,
|
||||
confidence: state.confidence || undefined,
|
||||
language: state.language || undefined,
|
||||
rule_id: state.rule_id || undefined,
|
||||
status: state.status || undefined,
|
||||
search: state.search || undefined,
|
||||
}),
|
||||
[state],
|
||||
);
|
||||
|
||||
const { data, isLoading, isError, error } = useFindings(queryParams);
|
||||
const { data: filters } = useFindingFilters();
|
||||
|
||||
// Selection state
|
||||
const [selected, setSelected] = useState<Set<number>>(new Set());
|
||||
|
||||
// Clear selection when data changes
|
||||
useEffect(() => {
|
||||
setSelected(new Set());
|
||||
}, [data]);
|
||||
|
||||
const bulkTriage = useBulkTriage();
|
||||
const addSuppression = useAddSuppression();
|
||||
|
||||
// Suppress modal
|
||||
const [suppressModalOpen, setSuppressModalOpen] = useState(false);
|
||||
|
||||
// ── Selection handlers ──
|
||||
|
||||
const toggleRow = useCallback((index: number) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(index)) next.delete(index);
|
||||
else next.add(index);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const toggleSelectAll = useCallback(
|
||||
(checked: boolean) => {
|
||||
if (!data) return;
|
||||
if (checked) {
|
||||
setSelected(new Set(data.findings.map((f) => f.index)));
|
||||
} else {
|
||||
setSelected(new Set());
|
||||
}
|
||||
},
|
||||
[data],
|
||||
);
|
||||
|
||||
const allSelected =
|
||||
data != null &&
|
||||
data.findings.length > 0 &&
|
||||
data.findings.every((f) => selected.has(f.index));
|
||||
|
||||
const sharedStatus = useMemo<string | null>(() => {
|
||||
if (!data || selected.size === 0) return null;
|
||||
const states = new Set(
|
||||
data.findings
|
||||
.filter((f) => selected.has(f.index))
|
||||
.map((f) => f.triage_state || f.status),
|
||||
);
|
||||
return states.size === 1 ? [...states][0] : null;
|
||||
}, [data, selected]);
|
||||
|
||||
// ── Bulk action handlers ──
|
||||
|
||||
const getSelectedFingerprints = useCallback((): string[] => {
|
||||
if (!data) return [];
|
||||
return data.findings
|
||||
.filter((f) => selected.has(f.index))
|
||||
.map((f) => f.fingerprint);
|
||||
}, [data, selected]);
|
||||
|
||||
const handleBulkTriage = useCallback(
|
||||
(triageState: string) => {
|
||||
const fingerprints = getSelectedFingerprints();
|
||||
if (fingerprints.length === 0) return;
|
||||
bulkTriage.mutate(
|
||||
{ fingerprints, state: triageState, note: '' },
|
||||
{ onSuccess: () => setSelected(new Set()) },
|
||||
);
|
||||
},
|
||||
[getSelectedFingerprints, bulkTriage],
|
||||
);
|
||||
|
||||
const handleSuppressByPattern = useCallback(() => {
|
||||
if (selected.size === 0 || !data) return;
|
||||
setSuppressModalOpen(true);
|
||||
}, [selected.size, data]);
|
||||
|
||||
const handleBulkCopy = useCallback(async (): Promise<string> => {
|
||||
const indices =
|
||||
data?.findings.filter((f) => selected.has(f.index)).map((f) => f.index) ??
|
||||
[];
|
||||
const results = await Promise.allSettled(
|
||||
indices.map((i) => fetchFindingDetail(queryClient, i)),
|
||||
);
|
||||
const views = results
|
||||
.filter(
|
||||
(r): r is PromiseFulfilledResult<FindingView> =>
|
||||
r.status === 'fulfilled',
|
||||
)
|
||||
.map((r) => r.value);
|
||||
return findingsToMarkdown(views);
|
||||
}, [data, selected, queryClient]);
|
||||
|
||||
const suppressPatternRules = useMemo(() => {
|
||||
if (!data) return [];
|
||||
const selectedFindings = data.findings.filter((f) => selected.has(f.index));
|
||||
return [...new Set(selectedFindings.map((f) => f.rule_id))];
|
||||
}, [data, selected]);
|
||||
|
||||
const suppressPatternFiles = useMemo(() => {
|
||||
if (!data) return [];
|
||||
const selectedFindings = data.findings.filter((f) => selected.has(f.index));
|
||||
return [...new Set(selectedFindings.map((f) => f.path))];
|
||||
}, [data, selected]);
|
||||
|
||||
const handleSuppress = useCallback(
|
||||
(by: string, value: string, note: string) => {
|
||||
addSuppression.mutate(
|
||||
{ by, value, note },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setSuppressModalOpen(false);
|
||||
setSelected(new Set());
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
[addSuppression],
|
||||
);
|
||||
|
||||
// ── Sort handler ──
|
||||
|
||||
const handleSort = useCallback(
|
||||
(col: string, dir: string) => {
|
||||
updateState({ sort_by: col, sort_dir: dir });
|
||||
},
|
||||
[updateState],
|
||||
);
|
||||
|
||||
// ── Filter handler ──
|
||||
|
||||
const handleFilterChange = useCallback(
|
||||
(key: string, value: string) => {
|
||||
updateState({ [key]: value });
|
||||
},
|
||||
[updateState],
|
||||
);
|
||||
|
||||
// ── Row click ──
|
||||
|
||||
const handleRowClick = useCallback(
|
||||
(e: React.MouseEvent, finding: FindingView) => {
|
||||
if ((e.target as HTMLElement).tagName === 'INPUT') return;
|
||||
navigate(`/findings/${finding.index}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
// ── Render ──
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="loading">Loading findings...</div>;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
const msg = error instanceof Error ? error.message : 'Unknown error';
|
||||
if (msg.includes('404')) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<h3>No scan results yet</h3>
|
||||
<p>Run a scan first to see findings.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="error-state">
|
||||
<h3>Error</h3>
|
||||
<p>{msg}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const page = data.page;
|
||||
const totalPages = Math.ceil(data.total / data.per_page) || 1;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<h2>Findings</h2>
|
||||
<span className="filter-count">
|
||||
{data.total} finding{data.total !== 1 ? 's' : ''}
|
||||
{hasActiveFilters ? ' (filtered)' : ''}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="filter-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search findings... (/)"
|
||||
className="search-input"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-severity"
|
||||
label="Severities"
|
||||
values={filters?.severities}
|
||||
current={state.severity}
|
||||
onChange={(v) => handleFilterChange('severity', v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-confidence"
|
||||
label="Confidences"
|
||||
values={filters?.confidences}
|
||||
current={state.confidence}
|
||||
onChange={(v) => handleFilterChange('confidence', v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-category"
|
||||
label="Categories"
|
||||
values={filters?.categories}
|
||||
current={state.category}
|
||||
onChange={(v) => handleFilterChange('category', v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-language"
|
||||
label="Languages"
|
||||
values={filters?.languages}
|
||||
current={state.language}
|
||||
onChange={(v) => handleFilterChange('language', v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-rule"
|
||||
label="Rules"
|
||||
values={filters?.rules}
|
||||
current={state.rule_id}
|
||||
onChange={(v) => handleFilterChange('rule_id', v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="filter-status"
|
||||
label="Statuses"
|
||||
values={filters?.statuses}
|
||||
current={state.status}
|
||||
onChange={(v) => handleFilterChange('status', v)}
|
||||
/>
|
||||
{hasActiveFilters && (
|
||||
<button className="btn btn-sm btn-clear" onClick={resetFilters}>
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bulk action bar */}
|
||||
<BulkActionBar
|
||||
selectedCount={selected.size}
|
||||
sharedStatus={sharedStatus}
|
||||
onBulkTriage={handleBulkTriage}
|
||||
onSuppressByPattern={handleSuppressByPattern}
|
||||
onBulkCopy={handleBulkCopy}
|
||||
/>
|
||||
|
||||
{/* Findings table */}
|
||||
{data.findings.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>No findings</h3>
|
||||
<p>Run a scan to see results, or adjust your filters.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={(e) => toggleSelectAll(e.target.checked)}
|
||||
/>
|
||||
</th>
|
||||
<SortableTh
|
||||
column="severity"
|
||||
label="Severity"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="confidence"
|
||||
label="Confidence"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="rule_id"
|
||||
label="Rule"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="category"
|
||||
label="Category"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="file"
|
||||
label="File"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="line"
|
||||
label="Line"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="language"
|
||||
label="Language"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
<SortableTh
|
||||
column="status"
|
||||
label="Status"
|
||||
currentSort={state.sort_by}
|
||||
currentDir={state.sort_dir}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.findings.map((f) => (
|
||||
<tr
|
||||
key={f.index}
|
||||
className={`clickable${selected.has(f.index) ? ' selected' : ''}`}
|
||||
onClick={(e) => handleRowClick(e, f)}
|
||||
>
|
||||
<td className="col-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(f.index)}
|
||||
onChange={() => toggleRow(f.index)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge badge-${f.severity.toLowerCase()}`}
|
||||
>
|
||||
{f.severity}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{f.confidence ? (
|
||||
<span
|
||||
className={`badge badge-conf-${f.confidence.toLowerCase()}`}
|
||||
>
|
||||
{f.confidence}
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</td>
|
||||
<td title={f.message || ''}>{f.rule_id}</td>
|
||||
<td>{f.category}</td>
|
||||
<td className="cell-path" title={f.path}>
|
||||
{truncPath(f.path)}
|
||||
</td>
|
||||
<td>{f.line}</td>
|
||||
<td>{f.language || '-'}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge badge-triage-${f.triage_state || f.status}`}
|
||||
>
|
||||
{formatTriageState(f.triage_state || f.status)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
perPage={data.per_page}
|
||||
total={data.total}
|
||||
onPageChange={(p) => updateState({ page: String(p) })}
|
||||
onPerPageChange={(pp) => updateState({ per_page: String(pp) })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Suppress by pattern modal */}
|
||||
{suppressModalOpen && (
|
||||
<SuppressModal
|
||||
rules={suppressPatternRules}
|
||||
files={suppressPatternFiles}
|
||||
onSuppress={handleSuppress}
|
||||
onClose={() => setSuppressModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
341
frontend/src/pages/OverviewPage.tsx
Normal file
341
frontend/src/pages/OverviewPage.tsx
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { useOverview, useOverviewTrends } from '../api/queries/overview';
|
||||
import { StatCard } from '../components/ui/StatCard';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import { HorizontalBarChart } from '../components/charts/HorizontalBarChart';
|
||||
import { LineChart } from '../components/charts/LineChart';
|
||||
import { OverviewIcon } from '../components/icons/Icons';
|
||||
import { truncPath } from '../utils/truncPath';
|
||||
import type { OverviewCount, ScanSummary, Insight } from '../api/types';
|
||||
|
||||
export function OverviewPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data: overview, isLoading, error } = useOverview();
|
||||
const { data: trends } = useOverviewTrends();
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading overview..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Error loading overview"
|
||||
message={(error as Error).message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!overview) {
|
||||
return <LoadingState message="Loading overview..." />;
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (overview.state === 'empty') {
|
||||
return (
|
||||
<div className="overview-empty">
|
||||
<OverviewIcon size={48} />
|
||||
<h2>Welcome to Nyx</h2>
|
||||
<p>Start your first scan to see security findings and analytics.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Data preparation
|
||||
const netDelta = overview.new_since_last - overview.fixed_since_last;
|
||||
|
||||
const sevItems = (['HIGH', 'MEDIUM', 'LOW'] as const).map((s) => ({
|
||||
label: s.charAt(0) + s.slice(1).toLowerCase(),
|
||||
value: overview.by_severity[s] || 0,
|
||||
color: s === 'HIGH' ? '#e74c3c' : s === 'MEDIUM' ? '#e67e22' : '#3498db',
|
||||
}));
|
||||
|
||||
const catItems = Object.entries(overview.by_category || {})
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
.map(([k, v]) => ({ label: k, value: v, color: '#5856d6' }));
|
||||
|
||||
const langItems = Object.entries(overview.by_language || {})
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
.map(([k, v]) => ({ label: k, value: v, color: '#5856d6' }));
|
||||
|
||||
const trendData = (trends || []).map((t) => ({
|
||||
label: t.timestamp,
|
||||
value: t.total,
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<h2>Overview</h2>
|
||||
</div>
|
||||
|
||||
{/* Fresh banner */}
|
||||
{overview.state === 'fresh' && (
|
||||
<div className="overview-fresh-banner">
|
||||
<strong>Scan completed</strong>
|
||||
<span>
|
||||
{overview.total_findings} finding
|
||||
{overview.total_findings === 1 ? '' : 's'} detected
|
||||
{overview.latest_scan_duration_secs != null
|
||||
? ` in ${overview.latest_scan_duration_secs.toFixed(1)}s`
|
||||
: ''}
|
||||
.
|
||||
</span>
|
||||
<a
|
||||
href="/findings"
|
||||
className="nav-link-internal"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate('/findings');
|
||||
}}
|
||||
>
|
||||
View all findings →
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stat cards */}
|
||||
<div className="overview-stat-grid">
|
||||
<StatCard
|
||||
label="Total Findings"
|
||||
value={overview.total_findings}
|
||||
delta={netDelta || null}
|
||||
/>
|
||||
<StatCard
|
||||
label="New"
|
||||
value={overview.new_since_last}
|
||||
color={overview.new_since_last > 0 ? 'var(--sev-high)' : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="Fixed"
|
||||
value={overview.fixed_since_last}
|
||||
color={overview.fixed_since_last > 0 ? 'var(--success)' : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="High Confidence"
|
||||
value={`${(overview.high_confidence_rate * 100).toFixed(0)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Triage Coverage"
|
||||
value={`${(overview.triage_coverage * 100).toFixed(0)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Scan Duration"
|
||||
value={
|
||||
overview.latest_scan_duration_secs != null
|
||||
? `${overview.latest_scan_duration_secs.toFixed(1)}s`
|
||||
: '-'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="overview-chart-grid">
|
||||
<div className="card">
|
||||
<div className="card-header">Findings Over Time</div>
|
||||
<LineChart points={trendData} />
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">By Severity</div>
|
||||
<HorizontalBarChart items={sevItems} />
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">By Category</div>
|
||||
<HorizontalBarChart items={catItems} />
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">By Language</div>
|
||||
<HorizontalBarChart items={langItems} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tables */}
|
||||
<div className="overview-table-grid">
|
||||
<div className="card">
|
||||
<div className="card-header">Top Affected Files</div>
|
||||
<CompactTable
|
||||
items={overview.top_files}
|
||||
nameLabel="File"
|
||||
countLabel="Findings"
|
||||
truncate
|
||||
onRowClick={(item) =>
|
||||
navigate(`/findings?search=${encodeURIComponent(item.name)}`)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">Top Directories</div>
|
||||
<CompactTable
|
||||
items={overview.top_directories}
|
||||
nameLabel="Directory"
|
||||
countLabel="Findings"
|
||||
truncate
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">Top Rules Triggered</div>
|
||||
<CompactTable
|
||||
items={overview.top_rules}
|
||||
nameLabel="Rule"
|
||||
countLabel="Findings"
|
||||
/>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">Recent Scans</div>
|
||||
<RecentScansTable
|
||||
scans={overview.recent_scans}
|
||||
onRowClick={(scan) => navigate(`/scans/${scan.id}`)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insights */}
|
||||
{overview.insights.length > 0 && (
|
||||
<div className="overview-insights">
|
||||
<div className="card">
|
||||
<div className="card-header">Insights</div>
|
||||
<div className="insight-list">
|
||||
{overview.insights.map((insight, i) => (
|
||||
<InsightCard key={i} insight={insight} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Sub-components ──────────────────────────────────────────────────────────
|
||||
|
||||
interface CompactTableProps {
|
||||
items: OverviewCount[];
|
||||
nameLabel: string;
|
||||
countLabel: string;
|
||||
truncate?: boolean;
|
||||
onRowClick?: (item: OverviewCount) => void;
|
||||
}
|
||||
|
||||
function CompactTable({
|
||||
items,
|
||||
nameLabel,
|
||||
countLabel,
|
||||
truncate,
|
||||
onRowClick,
|
||||
}: CompactTableProps) {
|
||||
if (!items || items.length === 0) {
|
||||
return (
|
||||
<div className="empty-state" style={{ padding: 16 }}>
|
||||
<p>No data</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{nameLabel}</th>
|
||||
<th>{countLabel}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => {
|
||||
const displayName = truncate ? truncPath(item.name, 45) : item.name;
|
||||
return (
|
||||
<tr
|
||||
key={item.name}
|
||||
className={onRowClick ? 'clickable' : undefined}
|
||||
onClick={onRowClick ? () => onRowClick(item) : undefined}
|
||||
title={item.name}
|
||||
>
|
||||
<td>{displayName}</td>
|
||||
<td>{item.count}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
interface RecentScansTableProps {
|
||||
scans: ScanSummary[];
|
||||
onRowClick: (scan: ScanSummary) => void;
|
||||
}
|
||||
|
||||
function RecentScansTable({ scans, onRowClick }: RecentScansTableProps) {
|
||||
if (!scans || scans.length === 0) {
|
||||
return (
|
||||
<div className="empty-state" style={{ padding: 16 }}>
|
||||
<p>No scans yet</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Duration</th>
|
||||
<th>Findings</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{scans.slice(0, 5).map((scan) => (
|
||||
<tr
|
||||
key={scan.id}
|
||||
className="clickable"
|
||||
onClick={() => onRowClick(scan)}
|
||||
>
|
||||
<td>
|
||||
<span className={`status-dot ${scan.status}`} /> {scan.status}
|
||||
</td>
|
||||
<td>
|
||||
{scan.duration_secs != null
|
||||
? `${scan.duration_secs.toFixed(1)}s`
|
||||
: '-'}
|
||||
</td>
|
||||
<td>{scan.finding_count ?? '-'}</td>
|
||||
<td>
|
||||
{scan.started_at
|
||||
? new Date(scan.started_at).toLocaleString()
|
||||
: '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
interface InsightCardProps {
|
||||
insight: Insight;
|
||||
}
|
||||
|
||||
function InsightCard({ insight }: InsightCardProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className={`insight-card insight-${insight.severity}`}>
|
||||
<span>{insight.message}</span>
|
||||
{insight.action_url && (
|
||||
<a
|
||||
href={insight.action_url}
|
||||
className="nav-link-internal"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(insight.action_url!);
|
||||
}}
|
||||
>
|
||||
View →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
360
frontend/src/pages/RulesPage.tsx
Normal file
360
frontend/src/pages/RulesPage.tsx
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useRules } from '../api/queries/rules';
|
||||
import { useToggleRule, useCloneRule } from '../api/mutations/rules';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import type { RuleListItem } from '../api/types';
|
||||
|
||||
function useDebounce(value: string, delay: number): string {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
|
||||
// ── Rule Detail Panel ────────────────────────────────────────────────────────
|
||||
|
||||
function RuleDetail({
|
||||
rule,
|
||||
onToggle,
|
||||
onClone,
|
||||
}: {
|
||||
rule: RuleListItem;
|
||||
onToggle: () => void;
|
||||
onClone: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="rule-detail-card">
|
||||
<h3>{rule.title}</h3>
|
||||
<div className="rule-detail-grid">
|
||||
<div className="rule-detail-label">ID</div>
|
||||
<div>
|
||||
<code style={{ fontSize: 'var(--text-xs)', wordBreak: 'break-all' }}>
|
||||
{rule.id}
|
||||
</code>
|
||||
</div>
|
||||
<div className="rule-detail-label">Language</div>
|
||||
<div>{rule.language}</div>
|
||||
<div className="rule-detail-label">Kind</div>
|
||||
<div>
|
||||
<span className={`badge badge-${rule.kind}`}>{rule.kind}</span>
|
||||
</div>
|
||||
<div className="rule-detail-label">Capability</div>
|
||||
<div>{rule.cap}</div>
|
||||
<div className="rule-detail-label">Case Sensitive</div>
|
||||
<div>{rule.case_sensitive ? 'Yes' : 'No'}</div>
|
||||
<div className="rule-detail-label">Status</div>
|
||||
<div>
|
||||
{rule.enabled ? (
|
||||
<span style={{ color: 'var(--success)' }}>Enabled</span>
|
||||
) : (
|
||||
<span style={{ color: 'var(--text-tertiary)' }}>Disabled</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="rule-detail-label">Findings</div>
|
||||
<div>
|
||||
{rule.finding_count}
|
||||
{rule.suppression_rate > 0
|
||||
? ` (${(rule.suppression_rate * 100).toFixed(0)}% suppressed)`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
{rule.is_custom && (
|
||||
<div style={{ marginTop: 'var(--space-3)' }}>
|
||||
<span className="badge-custom">Custom Rule</span>
|
||||
</div>
|
||||
)}
|
||||
{rule.is_gated && (
|
||||
<div style={{ marginTop: 'var(--space-3)' }}>
|
||||
<span className="badge-builtin">Gated Sink</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: 'var(--space-4)' }}>
|
||||
<div
|
||||
className="rule-detail-label"
|
||||
style={{ marginBottom: 'var(--space-2)' }}
|
||||
>
|
||||
Matchers
|
||||
</div>
|
||||
<div>
|
||||
{rule.matchers.map((m) => (
|
||||
<code key={m} className="matcher-tag">
|
||||
{m}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'var(--space-5)',
|
||||
display: 'flex',
|
||||
gap: 'var(--space-2)',
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm" onClick={onToggle}>
|
||||
{rule.enabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
{!rule.is_custom && (
|
||||
<button className="btn btn-primary btn-sm" onClick={onClone}>
|
||||
Clone to Custom
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Rules Table ──────────────────────────────────────────────────────────────
|
||||
|
||||
function RulesTable({
|
||||
rules,
|
||||
selectedId,
|
||||
onSelect,
|
||||
onToggle,
|
||||
}: {
|
||||
rules: RuleListItem[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onToggle: (id: string) => void;
|
||||
}) {
|
||||
if (rules.length === 0) {
|
||||
return (
|
||||
<div className="empty-state" style={{ padding: 20 }}>
|
||||
<p>No rules match filters</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="rules-table">
|
||||
<colgroup>
|
||||
<col className="col-toggle" />
|
||||
<col />
|
||||
<col className="col-lang" />
|
||||
<col className="col-kind" />
|
||||
<col className="col-cap" />
|
||||
<col className="col-finds" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>Lang</th>
|
||||
<th>Kind</th>
|
||||
<th>Cap</th>
|
||||
<th>Finds</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rules.map((r) => (
|
||||
<tr
|
||||
key={r.id}
|
||||
className={`rule-row${r.id === selectedId ? ' selected' : ''}${!r.enabled ? ' rule-disabled' : ''}`}
|
||||
onClick={() => onSelect(r.id)}
|
||||
>
|
||||
<td>
|
||||
<button
|
||||
className={`rule-toggle${r.enabled ? ' toggle-on' : ' toggle-off'}`}
|
||||
title={r.enabled ? 'Disable' : 'Enable'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle(r.id);
|
||||
}}
|
||||
>
|
||||
{r.enabled ? 'On' : 'Off'}
|
||||
</button>
|
||||
</td>
|
||||
<td className="col-title-cell">
|
||||
<span className="rule-title-text">
|
||||
{r.title}
|
||||
{r.is_custom && (
|
||||
<>
|
||||
{' '}
|
||||
<span className="badge-custom">custom</span>
|
||||
</>
|
||||
)}
|
||||
{r.is_gated && (
|
||||
<>
|
||||
{' '}
|
||||
<span className="badge-builtin">gated</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td>{r.language}</td>
|
||||
<td>
|
||||
<span className={`badge badge-${r.kind}`}>{r.kind}</span>
|
||||
</td>
|
||||
<td>{r.cap}</td>
|
||||
<td>{r.finding_count}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function RulesPage() {
|
||||
const params = useParams<{ id?: string }>();
|
||||
const { data: rules, isLoading, error } = useRules();
|
||||
const toggleRule = useToggleRule();
|
||||
const cloneRule = useCloneRule();
|
||||
|
||||
const [selectedId, setSelectedId] = useState<string | null>(
|
||||
params.id || null,
|
||||
);
|
||||
const [langFilter, setLangFilter] = useState('');
|
||||
const [kindFilter, setKindFilter] = useState('');
|
||||
const [customOnly, setCustomOnly] = useState(false);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const search = useDebounce(searchInput, 200);
|
||||
|
||||
const langs = useMemo(() => {
|
||||
if (!rules) return [];
|
||||
return [...new Set(rules.map((r) => r.language))].sort();
|
||||
}, [rules]);
|
||||
|
||||
const kinds = ['source', 'sanitizer', 'sink'];
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!rules) return [];
|
||||
return rules.filter((r) => {
|
||||
if (langFilter && r.language !== langFilter) return false;
|
||||
if (kindFilter && r.kind !== kindFilter) return false;
|
||||
if (customOnly && !r.is_custom) return false;
|
||||
if (
|
||||
search &&
|
||||
!r.matchers.some((m) =>
|
||||
m.toLowerCase().includes(search.toLowerCase()),
|
||||
) &&
|
||||
!r.title.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
return false;
|
||||
return true;
|
||||
});
|
||||
}, [rules, langFilter, kindFilter, customOnly, search]);
|
||||
|
||||
const selectedRule = useMemo(
|
||||
() => (selectedId && rules ? rules.find((r) => r.id === selectedId) : null),
|
||||
[selectedId, rules],
|
||||
);
|
||||
|
||||
const handleSelect = useCallback((id: string) => {
|
||||
setSelectedId(id);
|
||||
history.replaceState(
|
||||
null,
|
||||
'',
|
||||
id ? '/rules/' + encodeURIComponent(id) : '/rules',
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(id: string) => {
|
||||
toggleRule.mutate(id);
|
||||
},
|
||||
[toggleRule],
|
||||
);
|
||||
|
||||
const handleClone = useCallback(() => {
|
||||
if (!selectedId) return;
|
||||
cloneRule.mutate({ rule_id: selectedId });
|
||||
}, [selectedId, cloneRule]);
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading rules..." />;
|
||||
if (error) return <ErrorState message={error.message} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<h2>Rules</h2>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-secondary)',
|
||||
fontSize: 'var(--text-sm)',
|
||||
marginLeft: 'var(--space-3)',
|
||||
}}
|
||||
>
|
||||
{(rules || []).length} rules
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="rules-layout">
|
||||
<div className="rules-list-panel">
|
||||
<div className="rules-filters">
|
||||
<select
|
||||
value={langFilter}
|
||||
onChange={(e) => setLangFilter(e.target.value)}
|
||||
>
|
||||
<option value="">All Languages</option>
|
||||
{langs.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={kindFilter}
|
||||
onChange={(e) => setKindFilter(e.target.value)}
|
||||
>
|
||||
<option value="">All Kinds</option>
|
||||
{kinds.map((k) => (
|
||||
<option key={k} value={k}>
|
||||
{k}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
fontSize: 'var(--text-sm)',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={customOnly}
|
||||
onChange={(e) => setCustomOnly(e.target.checked)}
|
||||
/>{' '}
|
||||
Custom only
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search matchers..."
|
||||
style={{ flex: 1, minWidth: 100 }}
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div id="rules-table-wrap">
|
||||
<RulesTable
|
||||
rules={filtered}
|
||||
selectedId={selectedId}
|
||||
onSelect={handleSelect}
|
||||
onToggle={handleToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rules-detail-panel" id="rules-detail">
|
||||
{selectedRule ? (
|
||||
<RuleDetail
|
||||
rule={selectedRule}
|
||||
onToggle={() => handleToggle(selectedRule.id)}
|
||||
onClone={handleClone}
|
||||
/>
|
||||
) : (
|
||||
<div className="empty-state" style={{ padding: 40 }}>
|
||||
<p>Select a rule to view details</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
414
frontend/src/pages/ScanComparePage.tsx
Normal file
414
frontend/src/pages/ScanComparePage.tsx
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useScanCompare } from '../api/queries/scans';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import type {
|
||||
CompareResponse,
|
||||
ComparedFinding,
|
||||
ChangedFinding,
|
||||
} from '../api/types';
|
||||
|
||||
function truncPath(p?: string, max = 50): string {
|
||||
if (!p) return '';
|
||||
if (p.length <= max) return p;
|
||||
return '...' + p.slice(p.length - max + 3);
|
||||
}
|
||||
|
||||
function fmtDate(iso?: string): string {
|
||||
return iso ? new Date(iso).toLocaleString() : '-';
|
||||
}
|
||||
|
||||
function shortId(id: string): string {
|
||||
return id.length > 8 ? id.slice(0, 8) : id;
|
||||
}
|
||||
|
||||
// ── Finding Row ──────────────────────────────────────────────────────────────
|
||||
|
||||
function CompareRow({
|
||||
f,
|
||||
rowCls,
|
||||
showChanges,
|
||||
}: {
|
||||
f: ComparedFinding | ChangedFinding;
|
||||
rowCls: string;
|
||||
showChanges: boolean;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
// Both ComparedFinding and ChangedFinding extend FindingView directly
|
||||
const severity = f.severity || '';
|
||||
const ruleId = f.rule_id || '';
|
||||
const path = f.path || '';
|
||||
const line = f.line || '-';
|
||||
const confidence = f.confidence;
|
||||
const index = f.index;
|
||||
|
||||
const changes =
|
||||
showChanges && 'changes' in f ? (f as ChangedFinding).changes : [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`compare-finding-row ${rowCls}`}
|
||||
onClick={() => index != null && navigate(`/findings/${index}`)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<span className={`badge badge-${severity.toLowerCase()}`}>
|
||||
{severity}
|
||||
</span>
|
||||
<span style={{ fontSize: 'var(--text-xs)' }}>{ruleId}</span>
|
||||
<span className="finding-path" title={path}>
|
||||
{truncPath(path)}
|
||||
</span>
|
||||
<span
|
||||
style={{ fontSize: 'var(--text-xs)', color: 'var(--text-secondary)' }}
|
||||
>
|
||||
L{line}
|
||||
</span>
|
||||
{confidence && (
|
||||
<span className={`badge badge-conf-${confidence.toLowerCase()}`}>
|
||||
{confidence}
|
||||
</span>
|
||||
)}
|
||||
{changes &&
|
||||
changes.length > 0 &&
|
||||
changes.map((c, i) => (
|
||||
<span key={i} className="compare-delta-inline">
|
||||
{c.field}: {c.old_value} <span className="delta-arrow">→</span>{' '}
|
||||
{c.new_value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Collapsible Section ──────────────────────────────────────────────────────
|
||||
|
||||
function CollapsibleSection({
|
||||
sectionKey,
|
||||
headerContent,
|
||||
defaultCollapsed = false,
|
||||
children,
|
||||
}: {
|
||||
sectionKey: string;
|
||||
headerContent: React.ReactNode;
|
||||
defaultCollapsed?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(defaultCollapsed);
|
||||
|
||||
return (
|
||||
<div className="compare-section" data-section={sectionKey}>
|
||||
<div
|
||||
className="compare-section-header"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
>
|
||||
<span className={`section-toggle ${collapsed ? 'collapsed' : ''}`}>
|
||||
▼
|
||||
</span>
|
||||
{headerContent}
|
||||
</div>
|
||||
<div
|
||||
className="compare-section-body"
|
||||
style={{ display: collapsed ? 'none' : undefined }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── By Status Tab ────────────────────────────────────────────────────────────
|
||||
|
||||
function CompareByStatus({ data }: { data: CompareResponse }) {
|
||||
const sections = [
|
||||
{
|
||||
key: 'new',
|
||||
label: 'New Findings',
|
||||
badge: 'compare-badge--new',
|
||||
rowCls: 'compare-finding-row--new',
|
||||
items: data.new_findings,
|
||||
},
|
||||
{
|
||||
key: 'fixed',
|
||||
label: 'Fixed Findings',
|
||||
badge: 'compare-badge--fixed',
|
||||
rowCls: 'compare-finding-row--fixed',
|
||||
items: data.fixed_findings,
|
||||
},
|
||||
{
|
||||
key: 'changed',
|
||||
label: 'Changed Findings',
|
||||
badge: 'compare-badge--changed',
|
||||
rowCls: 'compare-finding-row--changed',
|
||||
items: data.changed_findings as (ComparedFinding | ChangedFinding)[],
|
||||
},
|
||||
{
|
||||
key: 'unchanged',
|
||||
label: 'Unchanged Findings',
|
||||
badge: 'compare-badge--unchanged',
|
||||
rowCls: 'compare-finding-row--unchanged',
|
||||
items: data.unchanged_findings,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{sections.map((sec) => {
|
||||
if (sec.items.length === 0) return null;
|
||||
return (
|
||||
<CollapsibleSection
|
||||
key={sec.key}
|
||||
sectionKey={sec.key}
|
||||
defaultCollapsed={sec.key === 'unchanged'}
|
||||
headerContent={
|
||||
<>
|
||||
<span className={sec.badge}>{sec.key.toUpperCase()}</span>
|
||||
<span>
|
||||
{sec.label} ({sec.items.length})
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{sec.items.map((f, i) => (
|
||||
<CompareRow
|
||||
key={i}
|
||||
f={f}
|
||||
rowCls={sec.rowCls}
|
||||
showChanges={sec.key === 'changed'}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleSection>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── By Group Tab ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface TaggedFinding extends ComparedFinding {
|
||||
_status: string;
|
||||
}
|
||||
|
||||
function CompareByGroup({
|
||||
data,
|
||||
groupField,
|
||||
}: {
|
||||
data: CompareResponse;
|
||||
groupField: 'rule_id' | 'path';
|
||||
}) {
|
||||
const groups = useMemo(() => {
|
||||
const all: TaggedFinding[] = [];
|
||||
data.new_findings.forEach((f) => all.push({ ...f, _status: 'new' }));
|
||||
data.fixed_findings.forEach((f) => all.push({ ...f, _status: 'fixed' }));
|
||||
data.changed_findings.forEach((f) =>
|
||||
all.push({ ...(f as unknown as ComparedFinding), _status: 'changed' }),
|
||||
);
|
||||
data.unchanged_findings.forEach((f) =>
|
||||
all.push({ ...f, _status: 'unchanged' }),
|
||||
);
|
||||
|
||||
const grouped: Record<string, TaggedFinding[]> = {};
|
||||
all.forEach((f) => {
|
||||
// ComparedFinding extends FindingView, so groupField is directly on f
|
||||
const key = f[groupField] || '(unknown)';
|
||||
if (!grouped[key]) grouped[key] = [];
|
||||
grouped[key].push(f);
|
||||
});
|
||||
|
||||
return Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b));
|
||||
}, [data, groupField]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{groups.map(([key, items]) => {
|
||||
const counts = { new: 0, fixed: 0, changed: 0, unchanged: 0 };
|
||||
items.forEach(
|
||||
(f) =>
|
||||
(counts[f._status as keyof typeof counts] =
|
||||
(counts[f._status as keyof typeof counts] || 0) + 1),
|
||||
);
|
||||
const summary =
|
||||
[
|
||||
counts.new > 0 ? `+${counts.new}` : '',
|
||||
counts.fixed > 0 ? `-${counts.fixed}` : '',
|
||||
counts.changed > 0 ? `~${counts.changed}` : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ') || `${counts.unchanged} unchanged`;
|
||||
|
||||
return (
|
||||
<CollapsibleSection
|
||||
key={key}
|
||||
sectionKey={key}
|
||||
headerContent={
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 'var(--text-xs)',
|
||||
}}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
<span className="compare-group-summary">{summary}</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{items.map((f, i) => (
|
||||
<CompareRow
|
||||
key={i}
|
||||
f={f}
|
||||
rowCls={`compare-finding-row--${f._status}`}
|
||||
showChanges={f._status === 'changed'}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleSection>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
type CompareTab = 'status' | 'rule' | 'file';
|
||||
|
||||
export function ScanComparePage() {
|
||||
const { left, right } = useParams<{ left: string; right: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { data, isLoading, error } = useScanCompare(left || '', right || '');
|
||||
const [activeTab, setActiveTab] = useState<CompareTab>('status');
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading comparison..." />;
|
||||
if (error)
|
||||
return <ErrorState title="Comparison failed" message={error.message} />;
|
||||
if (!data) return <ErrorState message="No comparison data" />;
|
||||
|
||||
const severities = ['HIGH', 'MEDIUM', 'LOW'];
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ marginBottom: 'var(--space-4)' }}
|
||||
onClick={() => navigate('/scans')}
|
||||
>
|
||||
Back to Scans
|
||||
</button>
|
||||
|
||||
<div className="page-header">
|
||||
<h2>Scan Comparison</h2>
|
||||
</div>
|
||||
|
||||
<div className="compare-header">
|
||||
<div className="compare-scan-pill">
|
||||
<span>Left</span>
|
||||
<span className="pill-id">{shortId(data.left_scan.id)}</span>
|
||||
<span className="pill-count">
|
||||
{data.left_scan.finding_count} findings
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-tertiary)',
|
||||
fontSize: 'var(--text-xs)',
|
||||
}}
|
||||
>
|
||||
{fmtDate(data.left_scan.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="compare-vs">vs</span>
|
||||
<div className="compare-scan-pill">
|
||||
<span>Right</span>
|
||||
<span className="pill-id">{shortId(data.right_scan.id)}</span>
|
||||
<span className="pill-count">
|
||||
{data.right_scan.finding_count} findings
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-tertiary)',
|
||||
fontSize: 'var(--text-xs)',
|
||||
}}
|
||||
>
|
||||
{fmtDate(data.right_scan.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="compare-summary-grid">
|
||||
<div className="compare-card compare-card--new">
|
||||
<div className="compare-card-label">New</div>
|
||||
<div className="compare-card-value">{data.summary.new_count}</div>
|
||||
</div>
|
||||
<div className="compare-card compare-card--fixed">
|
||||
<div className="compare-card-label">Fixed</div>
|
||||
<div className="compare-card-value">{data.summary.fixed_count}</div>
|
||||
</div>
|
||||
<div className="compare-card compare-card--changed">
|
||||
<div className="compare-card-label">Changed</div>
|
||||
<div className="compare-card-value">{data.summary.changed_count}</div>
|
||||
</div>
|
||||
<div className="compare-card compare-card--unchanged">
|
||||
<div className="compare-card-label">Unchanged</div>
|
||||
<div className="compare-card-value">
|
||||
{data.summary.unchanged_count}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="severity-delta">
|
||||
{severities.map((s) => {
|
||||
const d = data.summary.severity_delta[s] || 0;
|
||||
let cls = 'delta-zero';
|
||||
let prefix = '';
|
||||
if (d > 0) {
|
||||
cls = 'delta-positive';
|
||||
prefix = '+';
|
||||
} else if (d < 0) {
|
||||
cls = 'delta-negative';
|
||||
}
|
||||
return (
|
||||
<span key={s} className="severity-delta-item">
|
||||
<span className={`badge badge-${s.toLowerCase()}`}>{s}</span>
|
||||
<span className={cls}>
|
||||
{prefix}
|
||||
{d}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="scan-detail-tabs">
|
||||
<button
|
||||
className={`scan-detail-tab ${activeTab === 'status' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('status')}
|
||||
>
|
||||
By Status
|
||||
</button>
|
||||
<button
|
||||
className={`scan-detail-tab ${activeTab === 'rule' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('rule')}
|
||||
>
|
||||
By Rule
|
||||
</button>
|
||||
<button
|
||||
className={`scan-detail-tab ${activeTab === 'file' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('file')}
|
||||
>
|
||||
By File
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="compare-tab-content">
|
||||
{activeTab === 'status' && <CompareByStatus data={data} />}
|
||||
{activeTab === 'rule' && (
|
||||
<CompareByGroup data={data} groupField="rule_id" />
|
||||
)}
|
||||
{activeTab === 'file' && (
|
||||
<CompareByGroup data={data} groupField="path" />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
467
frontend/src/pages/ScanDetailPage.tsx
Normal file
467
frontend/src/pages/ScanDetailPage.tsx
Normal file
|
|
@ -0,0 +1,467 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
useScan,
|
||||
useScans,
|
||||
useScanFindings,
|
||||
useScanLogs,
|
||||
useScanMetrics,
|
||||
} from '../api/queries/scans';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import type { ScanView, ScanLogEntry, ScanMetricsSnapshot } from '../api/types';
|
||||
|
||||
function truncPath(p?: string, max = 50): string {
|
||||
if (!p) return '';
|
||||
if (p.length <= max) return p;
|
||||
return '...' + p.slice(p.length - max + 3);
|
||||
}
|
||||
|
||||
function fmtDate(iso?: string): string {
|
||||
return iso ? new Date(iso).toLocaleString() : '-';
|
||||
}
|
||||
|
||||
function fmtNum(n?: number | null): string {
|
||||
return n != null ? n.toLocaleString() : '-';
|
||||
}
|
||||
|
||||
// ── Summary Tab ──────────────────────────────────────────────────────────────
|
||||
|
||||
function SummaryTab({ scan }: { scan: ScanView }) {
|
||||
const duration =
|
||||
scan.duration_secs != null ? scan.duration_secs.toFixed(2) + 's' : '-';
|
||||
const langs = (scan.languages || []).join(', ') || '-';
|
||||
|
||||
const timing = scan.timing;
|
||||
let total = 0;
|
||||
if (timing) {
|
||||
total =
|
||||
timing.walk_ms +
|
||||
timing.pass1_ms +
|
||||
timing.call_graph_ms +
|
||||
timing.pass2_ms +
|
||||
timing.post_process_ms;
|
||||
}
|
||||
const pct = (ms: number) => ((ms / total) * 100).toFixed(1);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="scan-stat-grid">
|
||||
<div className="scan-stat-card">
|
||||
<div className="scan-stat-label">Files Scanned</div>
|
||||
<div className="scan-stat-value">{scan.files_scanned ?? '-'}</div>
|
||||
</div>
|
||||
<div className="scan-stat-card">
|
||||
<div className="scan-stat-label">Findings</div>
|
||||
<div className="scan-stat-value">{scan.finding_count ?? '-'}</div>
|
||||
</div>
|
||||
<div className="scan-stat-card">
|
||||
<div className="scan-stat-label">Duration</div>
|
||||
<div className="scan-stat-value">{duration}</div>
|
||||
</div>
|
||||
<div className="scan-stat-card">
|
||||
<div className="scan-stat-label">Languages</div>
|
||||
<div
|
||||
className="scan-stat-value"
|
||||
style={{ fontSize: 'var(--text-base)' }}
|
||||
>
|
||||
{langs}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-header">Details</div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)', width: 140 }}>
|
||||
Scan ID
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 'var(--text-xs)',
|
||||
}}
|
||||
>
|
||||
{scan.id}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>Root</td>
|
||||
<td
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 'var(--text-sm)',
|
||||
}}
|
||||
>
|
||||
{scan.scan_root}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>Engine</td>
|
||||
<td>{scan.engine_version || '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>Started</td>
|
||||
<td>{fmtDate(scan.started_at)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>Finished</td>
|
||||
<td>{fmtDate(scan.finished_at)}</td>
|
||||
</tr>
|
||||
{scan.error && (
|
||||
<tr>
|
||||
<td style={{ color: 'var(--text-secondary)' }}>Error</td>
|
||||
<td style={{ color: 'var(--sev-high)' }}>{scan.error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{timing && total > 0 && (
|
||||
<div className="card" style={{ marginTop: 'var(--space-4)' }}>
|
||||
<div className="card-header">Timing Breakdown</div>
|
||||
<div className="timing-bar">
|
||||
<div
|
||||
className="timing-bar-segment walk"
|
||||
style={{ width: `${pct(timing.walk_ms)}%` }}
|
||||
title={`Walk: ${timing.walk_ms}ms`}
|
||||
></div>
|
||||
<div
|
||||
className="timing-bar-segment pass1"
|
||||
style={{ width: `${pct(timing.pass1_ms)}%` }}
|
||||
title={`Pass 1: ${timing.pass1_ms}ms`}
|
||||
></div>
|
||||
<div
|
||||
className="timing-bar-segment callgraph"
|
||||
style={{ width: `${pct(timing.call_graph_ms)}%` }}
|
||||
title={`Call Graph: ${timing.call_graph_ms}ms`}
|
||||
></div>
|
||||
<div
|
||||
className="timing-bar-segment pass2"
|
||||
style={{ width: `${pct(timing.pass2_ms)}%` }}
|
||||
title={`Pass 2: ${timing.pass2_ms}ms`}
|
||||
></div>
|
||||
<div
|
||||
className="timing-bar-segment postprocess"
|
||||
style={{ width: `${pct(timing.post_process_ms)}%` }}
|
||||
title={`Post-process: ${timing.post_process_ms}ms`}
|
||||
></div>
|
||||
</div>
|
||||
<div className="timing-legend">
|
||||
<span className="timing-legend-item">
|
||||
<span
|
||||
className="timing-legend-dot"
|
||||
style={{ background: 'var(--sev-low)' }}
|
||||
></span>{' '}
|
||||
Walk {timing.walk_ms}ms
|
||||
</span>
|
||||
<span className="timing-legend-item">
|
||||
<span
|
||||
className="timing-legend-dot"
|
||||
style={{ background: 'var(--accent)' }}
|
||||
></span>{' '}
|
||||
Pass 1 {timing.pass1_ms}ms
|
||||
</span>
|
||||
<span className="timing-legend-item">
|
||||
<span
|
||||
className="timing-legend-dot"
|
||||
style={{ background: 'var(--sev-medium)' }}
|
||||
></span>{' '}
|
||||
Call Graph {timing.call_graph_ms}ms
|
||||
</span>
|
||||
<span className="timing-legend-item">
|
||||
<span
|
||||
className="timing-legend-dot"
|
||||
style={{ background: 'var(--success)' }}
|
||||
></span>{' '}
|
||||
Pass 2 {timing.pass2_ms}ms
|
||||
</span>
|
||||
<span className="timing-legend-item">
|
||||
<span
|
||||
className="timing-legend-dot"
|
||||
style={{ background: 'var(--text-tertiary)' }}
|
||||
></span>{' '}
|
||||
Post {timing.post_process_ms}ms
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Findings Tab ─────────────────────────────────────────────────────────────
|
||||
|
||||
function FindingsTab({ scanId }: { scanId: string }) {
|
||||
const navigate = useNavigate();
|
||||
const { data, isLoading, error } = useScanFindings(scanId);
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading findings..." />;
|
||||
if (error) return <ErrorState message={error.message} />;
|
||||
if (!data?.findings || data.findings.length === 0) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<h3>No findings</h3>
|
||||
<p>This scan produced no findings.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Severity</th>
|
||||
<th>Rule</th>
|
||||
<th>File</th>
|
||||
<th>Line</th>
|
||||
<th>Confidence</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.findings.map((f) => (
|
||||
<tr
|
||||
key={f.index}
|
||||
className="clickable"
|
||||
onClick={() => navigate(`/findings/${f.index}`)}
|
||||
>
|
||||
<td>
|
||||
<span className={`badge badge-${f.severity.toLowerCase()}`}>
|
||||
{f.severity}
|
||||
</span>
|
||||
</td>
|
||||
<td>{f.rule_id}</td>
|
||||
<td className="cell-path" title={f.path}>
|
||||
{truncPath(f.path)}
|
||||
</td>
|
||||
<td>{f.line}</td>
|
||||
<td>
|
||||
{f.confidence ? (
|
||||
<span
|
||||
className={`badge badge-conf-${f.confidence.toLowerCase()}`}
|
||||
>
|
||||
{f.confidence}
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'var(--space-2)',
|
||||
fontSize: 'var(--text-sm)',
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
>
|
||||
Showing {data.findings.length} of {data.total} findings
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Logs Tab ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function LogsTab({ scanId }: { scanId: string }) {
|
||||
const [levelFilter, setLevelFilter] = useState<string | undefined>(undefined);
|
||||
const { data: logs, isLoading, error } = useScanLogs(scanId, levelFilter);
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading logs..." />;
|
||||
if (error) return <ErrorState message={error.message} />;
|
||||
|
||||
const levels: Array<{ value: string | undefined; label: string }> = [
|
||||
{ value: undefined, label: 'All' },
|
||||
{ value: 'info', label: 'Info' },
|
||||
{ value: 'warn', label: 'Warn' },
|
||||
{ value: 'error', label: 'Error' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="log-filters">
|
||||
{levels.map((l) => (
|
||||
<button
|
||||
key={l.label}
|
||||
className={`log-filter-btn ${levelFilter === l.value ? 'active' : ''}`}
|
||||
onClick={() => setLevelFilter(l.value)}
|
||||
>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{!logs || logs.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No log entries</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="log-viewer">
|
||||
{logs.map((l: ScanLogEntry, i: number) => (
|
||||
<div key={i} className={`log-entry log-${l.level}`}>
|
||||
<span className={`log-level ${l.level}`}>{l.level}</span>
|
||||
<span className="log-time">
|
||||
{new Date(l.timestamp).toLocaleTimeString()}
|
||||
</span>
|
||||
<span className="log-message">
|
||||
{l.message}
|
||||
{l.file_path && (
|
||||
<span style={{ color: 'var(--text-tertiary)' }}>
|
||||
{' '}
|
||||
{l.file_path}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Metrics Tab ──────────────────────────────────────────────────────────────
|
||||
|
||||
function MetricsTab({ scanId, scan }: { scanId: string; scan: ScanView }) {
|
||||
const { data: fetchedMetrics } = useScanMetrics(scanId);
|
||||
const metrics: ScanMetricsSnapshot | undefined =
|
||||
scan.metrics || fetchedMetrics || undefined;
|
||||
|
||||
if (!metrics) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<p>No metrics available for this scan.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="metric-grid">
|
||||
<div className="metric-card">
|
||||
<div className="metric-card-label">CFG Nodes</div>
|
||||
<div className="metric-card-value">{fmtNum(metrics.cfg_nodes)}</div>
|
||||
</div>
|
||||
<div className="metric-card">
|
||||
<div className="metric-card-label">Call Edges</div>
|
||||
<div className="metric-card-value">{fmtNum(metrics.call_edges)}</div>
|
||||
</div>
|
||||
<div className="metric-card">
|
||||
<div className="metric-card-label">Functions Analyzed</div>
|
||||
<div className="metric-card-value">
|
||||
{fmtNum(metrics.functions_analyzed)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card">
|
||||
<div className="metric-card-label">Summaries Reused</div>
|
||||
<div className="metric-card-value">
|
||||
{fmtNum(metrics.summaries_reused)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric-card">
|
||||
<div className="metric-card-label">Unresolved Calls</div>
|
||||
<div className="metric-card-value">
|
||||
{fmtNum(metrics.unresolved_calls)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Scan Detail Page ─────────────────────────────────────────────────────────
|
||||
|
||||
type TabId = 'summary' | 'findings' | 'logs' | 'metrics';
|
||||
|
||||
export function ScanDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { data: scan, isLoading, error } = useScan(id || '');
|
||||
const { data: allScans } = useScans();
|
||||
const [activeTab, setActiveTab] = useState<TabId>('summary');
|
||||
|
||||
const prevScanId = useMemo(() => {
|
||||
if (!scan || scan.status !== 'completed' || !allScans) return null;
|
||||
const completed = allScans
|
||||
.filter((s) => s.status === 'completed' && s.started_at)
|
||||
.sort((a, b) => (a.started_at || '').localeCompare(b.started_at || ''));
|
||||
const myIdx = completed.findIndex((s) => s.id === id);
|
||||
if (myIdx > 0) return completed[myIdx - 1].id;
|
||||
return null;
|
||||
}, [scan, allScans, id]);
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading scan..." />;
|
||||
if (error || !scan) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Scan not found"
|
||||
message={error?.message || 'Not found'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs: { id: TabId; label: string }[] = [
|
||||
{ id: 'summary', label: 'Summary' },
|
||||
{ id: 'findings', label: 'Findings' },
|
||||
{ id: 'logs', label: 'Logs' },
|
||||
{ id: 'metrics', label: 'Metrics' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2)',
|
||||
marginBottom: 'var(--space-4)',
|
||||
}}
|
||||
>
|
||||
<button className="btn btn-sm" onClick={() => navigate('/scans')}>
|
||||
Back to Scans
|
||||
</button>
|
||||
{prevScanId && (
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ marginLeft: 'auto' }}
|
||||
onClick={() => navigate(`/scans/compare/${prevScanId}/${id}`)}
|
||||
>
|
||||
Compare with Previous
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="page-header">
|
||||
<h2>Scan Detail</h2>
|
||||
<span className={`status-badge ${scan.status}`}>
|
||||
<span className={`status-dot ${scan.status}`}></span>
|
||||
{scan.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="scan-detail-tabs">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
className={`scan-detail-tab ${activeTab === tab.id ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div id="scan-tab-content">
|
||||
{activeTab === 'summary' && <SummaryTab scan={scan} />}
|
||||
{activeTab === 'findings' && <FindingsTab scanId={id!} />}
|
||||
{activeTab === 'logs' && <LogsTab scanId={id!} />}
|
||||
{activeTab === 'metrics' && <MetricsTab scanId={id!} scan={scan} />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
297
frontend/src/pages/ScansPage.tsx
Normal file
297
frontend/src/pages/ScansPage.tsx
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useScans } from '../api/queries/scans';
|
||||
import { useDeleteScan } from '../api/mutations/scans';
|
||||
import { useSSE } from '../contexts/SSEContext';
|
||||
import { LoadingState } from '../components/ui/LoadingState';
|
||||
import { ErrorState } from '../components/ui/ErrorState';
|
||||
import type { ScanView } from '../api/types';
|
||||
|
||||
function relTime(iso?: string): string {
|
||||
if (!iso) return '-';
|
||||
const d = new Date(iso);
|
||||
const diff = Date.now() - d.getTime();
|
||||
if (diff < 60000) return 'just now';
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return d.toLocaleDateString();
|
||||
}
|
||||
|
||||
function truncPath(p?: string, max = 50): string {
|
||||
if (!p) return '';
|
||||
if (p.length <= max) return p;
|
||||
return '...' + p.slice(p.length - max + 3);
|
||||
}
|
||||
|
||||
function ScanProgress({
|
||||
data,
|
||||
}: {
|
||||
data: NonNullable<ReturnType<typeof useSSE>['scanProgress']>;
|
||||
}) {
|
||||
const stages = [
|
||||
'discovering',
|
||||
'indexing',
|
||||
'loading_summaries',
|
||||
'building_call_graph',
|
||||
'analyzing',
|
||||
'post_processing',
|
||||
'complete',
|
||||
] as const;
|
||||
const stageLabels: Record<string, string> = {
|
||||
discovering: 'Discovering',
|
||||
indexing: 'Indexing',
|
||||
loading_summaries: 'Loading Summaries',
|
||||
building_call_graph: 'Call Graph',
|
||||
analyzing: 'Analyzing',
|
||||
post_processing: 'Post-Process',
|
||||
complete: 'Complete',
|
||||
};
|
||||
const currentIdx = stages.indexOf(data.stage as (typeof stages)[number]);
|
||||
|
||||
const total = data.files_discovered || 1;
|
||||
const processed =
|
||||
data.stage === 'indexing'
|
||||
? data.files_parsed
|
||||
: data.stage === 'analyzing' || data.stage === 'post_processing'
|
||||
? data.files_analyzed
|
||||
: data.stage === 'complete'
|
||||
? total
|
||||
: 0;
|
||||
const pct = Math.min(100, (processed / total) * 100);
|
||||
const elapsed = data.elapsed_ms
|
||||
? (data.elapsed_ms / 1000).toFixed(1) + 's'
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<div className="scan-progress">
|
||||
<div className="scan-progress-header">
|
||||
<h3>Scan in Progress</h3>
|
||||
<span
|
||||
style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)' }}
|
||||
>
|
||||
{elapsed} elapsed
|
||||
</span>
|
||||
</div>
|
||||
<div className="stage-pipeline">
|
||||
{stages.map((s, i) => {
|
||||
const cls =
|
||||
i < currentIdx ? 'done' : i === currentIdx ? 'active' : '';
|
||||
return (
|
||||
<div key={s} className={`stage-step ${cls}`}>
|
||||
<div className="stage-dot"></div>
|
||||
<span className="stage-label">{stageLabels[s]}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="progress-bar">
|
||||
<div className="progress-bar-fill" style={{ width: `${pct}%` }}></div>
|
||||
</div>
|
||||
<div className="progress-stats">
|
||||
<span>
|
||||
{processed} / {data.files_discovered || 0} files
|
||||
</span>
|
||||
<span>{pct.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="progress-stats">
|
||||
<span>{data.files_parsed || 0} indexed</span>
|
||||
<span>{data.files_skipped || 0} reused</span>
|
||||
<span>{data.files_analyzed || 0} analyzed</span>
|
||||
</div>
|
||||
{data.batches_total > 0 && (
|
||||
<div className="progress-stats">
|
||||
<span>
|
||||
Batch {Math.min(data.batches_completed, data.batches_total)} /{' '}
|
||||
{data.batches_total}
|
||||
</span>
|
||||
<span>{stageLabels[data.stage] || data.stage}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="progress-stats">
|
||||
<span>Walk {data.timing.walk_ms}ms</span>
|
||||
<span>Index {data.timing.pass1_ms}ms</span>
|
||||
<span>Graph {data.timing.call_graph_ms}ms</span>
|
||||
<span>Analyze {data.timing.pass2_ms}ms</span>
|
||||
</div>
|
||||
{data.current_file && (
|
||||
<div className="progress-current-file">
|
||||
{truncPath(data.current_file, 80)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ScansPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data: scans, isLoading, error } = useScans();
|
||||
const deleteScan = useDeleteScan();
|
||||
const { scanProgress, isScanRunning } = useSSE();
|
||||
const [selectedScans, setSelectedScans] = useState<Set<string>>(new Set());
|
||||
|
||||
const completedScans = useMemo(
|
||||
() => (scans || []).filter((s) => s.status === 'completed'),
|
||||
[scans],
|
||||
);
|
||||
|
||||
const runningScans = useMemo(
|
||||
() => (scans || []).filter((s) => s.status === 'running'),
|
||||
[scans],
|
||||
);
|
||||
|
||||
const handleCheckbox = useCallback((e: React.MouseEvent, scanId: string) => {
|
||||
e.stopPropagation();
|
||||
setSelectedScans((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(scanId)) {
|
||||
next.delete(scanId);
|
||||
} else {
|
||||
if (next.size >= 2) return prev;
|
||||
next.add(scanId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleCompare = useCallback(() => {
|
||||
if (selectedScans.size !== 2) return;
|
||||
const ids = [...selectedScans];
|
||||
// Sort by started_at so left=older, right=newer
|
||||
const scanMap = new Map((scans || []).map((s) => [s.id, s]));
|
||||
ids.sort((a, b) =>
|
||||
(scanMap.get(a)?.started_at || '').localeCompare(
|
||||
scanMap.get(b)?.started_at || '',
|
||||
),
|
||||
);
|
||||
navigate(`/scans/compare/${ids[0]}/${ids[1]}`);
|
||||
}, [selectedScans, scans, navigate]);
|
||||
|
||||
if (isLoading) return <LoadingState message="Loading scans..." />;
|
||||
if (error) return <ErrorState message={error.message} />;
|
||||
|
||||
const showCheckboxes = completedScans.length >= 2;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<h2>Scans</h2>
|
||||
</div>
|
||||
|
||||
{(runningScans.length > 0 || isScanRunning) && scanProgress && (
|
||||
<ScanProgress data={scanProgress} />
|
||||
)}
|
||||
|
||||
{selectedScans.size > 0 && (
|
||||
<div className="compare-select-bar" style={{ display: 'flex' }}>
|
||||
<span>
|
||||
{selectedScans.size === 2
|
||||
? '2 scans selected'
|
||||
: `Select ${2 - selectedScans.size} more completed scan${selectedScans.size === 0 ? 's' : ''}`}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
disabled={selectedScans.size !== 2}
|
||||
onClick={handleCompare}
|
||||
>
|
||||
Compare Selected
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!scans || scans.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>No scans yet</h3>
|
||||
<p>
|
||||
Use the "Start Scan" button in the header to start your
|
||||
first scan.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{showCheckboxes && <th style={{ width: 32 }}></th>}
|
||||
<th>Status</th>
|
||||
<th>Root</th>
|
||||
<th>Duration</th>
|
||||
<th>Findings</th>
|
||||
<th>Languages</th>
|
||||
<th>Started</th>
|
||||
<th style={{ width: 60 }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{scans.map((s: ScanView) => (
|
||||
<tr
|
||||
key={s.id}
|
||||
className="clickable"
|
||||
onClick={() => navigate(`/scans/${s.id}`)}
|
||||
>
|
||||
{showCheckboxes && (
|
||||
<td>
|
||||
{s.status === 'completed' && (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="scan-compare-cb"
|
||||
checked={selectedScans.has(s.id)}
|
||||
onClick={(e) => handleCheckbox(e, s.id)}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<span className={`status-badge ${s.status}`}>
|
||||
<span className={`status-dot ${s.status}`}></span>
|
||||
{s.status}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: '0.82rem',
|
||||
}}
|
||||
>
|
||||
{truncPath(s.scan_root)}
|
||||
</td>
|
||||
<td>
|
||||
{s.duration_secs != null
|
||||
? s.duration_secs.toFixed(2) + 's'
|
||||
: '-'}
|
||||
</td>
|
||||
<td>{s.finding_count ?? '-'}</td>
|
||||
<td>
|
||||
{(s.languages || []).length > 0
|
||||
? (s.languages || []).map((l) => (
|
||||
<span key={l} className="lang-badge">
|
||||
{l}
|
||||
</span>
|
||||
))
|
||||
: '-'}
|
||||
</td>
|
||||
<td>{relTime(s.started_at)}</td>
|
||||
<td>
|
||||
{s.status !== 'running' && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (confirm('Delete this scan?')) {
|
||||
deleteScan.mutate(s.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
56
frontend/src/pages/StubPage.tsx
Normal file
56
frontend/src/pages/StubPage.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { useLocation } from 'react-router-dom';
|
||||
import { ICONS } from '../components/icons/Icons';
|
||||
|
||||
const STUB_DESCRIPTIONS: Record<string, string> = {
|
||||
'/explorer':
|
||||
'Browse the scanned codebase, view file trees, and inspect individual files with inline annotations.',
|
||||
'/debug':
|
||||
'Inspect internal analysis state — control flow graphs, SSA IR, call graphs, and taint propagation.',
|
||||
'/debug/cfg':
|
||||
'Visualize control flow graphs for individual functions with block-level detail.',
|
||||
'/debug/ssa':
|
||||
'Inspect SSA intermediate representation including phi nodes, value numbering, and taint state.',
|
||||
'/debug/call-graph':
|
||||
'Explore the inter-procedural call graph with SCC highlighting and topo-order visualization.',
|
||||
'/debug/taint':
|
||||
'Step through taint propagation with per-instruction state snapshots and path tracking.',
|
||||
'/settings': 'Application settings and preferences.',
|
||||
};
|
||||
|
||||
const ROUTE_LABELS: Record<string, string> = {
|
||||
'/explorer': 'Explorer',
|
||||
'/debug': 'Debug',
|
||||
'/debug/cfg': 'CFG Viewer',
|
||||
'/debug/ssa': 'SSA Viewer',
|
||||
'/debug/call-graph': 'Call Graph',
|
||||
'/debug/taint': 'Taint Debugger',
|
||||
'/settings': 'Settings',
|
||||
};
|
||||
|
||||
function sectionFromPath(pathname: string): string {
|
||||
if (pathname === '/') return 'overview';
|
||||
const first = pathname.split('/')[1];
|
||||
return first || 'overview';
|
||||
}
|
||||
|
||||
export function StubPage() {
|
||||
const { pathname } = useLocation();
|
||||
const label = ROUTE_LABELS[pathname] ?? sectionFromPath(pathname);
|
||||
const description =
|
||||
STUB_DESCRIPTIONS[pathname] ?? 'This page is under construction.';
|
||||
const section = sectionFromPath(pathname);
|
||||
const IconComponent = ICONS[section];
|
||||
|
||||
return (
|
||||
<div className="stub-page">
|
||||
{IconComponent && (
|
||||
<div className="stub-icon">
|
||||
<IconComponent size={48} />
|
||||
</div>
|
||||
)}
|
||||
<h2 className="stub-title">{label}</h2>
|
||||
<p className="stub-description">{description}</p>
|
||||
<span className="stub-badge">Coming Soon</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1305
frontend/src/pages/TriagePage.tsx
Normal file
1305
frontend/src/pages/TriagePage.tsx
Normal file
File diff suppressed because it is too large
Load diff
170
frontend/src/pages/debug/AbstractInterpPage.tsx
Normal file
170
frontend/src/pages/debug/AbstractInterpPage.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
import { useDebugAbstractInterp } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
import type {
|
||||
AbstractBlockView,
|
||||
AbstractValueView,
|
||||
TypeFactView,
|
||||
ConstValueViewEntry,
|
||||
} from '../../api/types';
|
||||
|
||||
interface AbstractInterpAnalysisPanelProps {
|
||||
file: string;
|
||||
functionName: string;
|
||||
}
|
||||
|
||||
export function AbstractInterpAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
}: AbstractInterpAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugAbstractInterp(file, functionName);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading abstract interpretation..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="Abstract interpretation data is not available for the selected function." />
|
||||
);
|
||||
}
|
||||
return <ErrorState message="Failed to load abstract interpretation." />;
|
||||
}
|
||||
if (
|
||||
!data ||
|
||||
(data.blocks.length === 0 &&
|
||||
data.type_facts.length === 0 &&
|
||||
data.const_values.length === 0)
|
||||
) {
|
||||
return (
|
||||
<EmptyState message="No abstract domain facts are tracked for this function." />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="abstract-interp-viewer">
|
||||
{data.blocks.length > 0 && (
|
||||
<>
|
||||
<h3>Abstract Domain Facts</h3>
|
||||
{data.blocks.map((block) => (
|
||||
<AbstractBlock key={block.block_id} block={block} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{data.type_facts.length > 0 && (
|
||||
<div className="abstract-block">
|
||||
<div className="abstract-block-header">
|
||||
<h3 style={{ margin: 0 }}>Type Facts</h3>
|
||||
<span className="text-secondary">
|
||||
{data.type_facts.length} typed values
|
||||
</span>
|
||||
</div>
|
||||
<table className="abstract-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Nullable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.type_facts.map((tf) => (
|
||||
<tr key={tf.ssa_value}>
|
||||
<td className="mono">v{tf.ssa_value}</td>
|
||||
<td className="mono">{tf.var_name ?? '-'}</td>
|
||||
<td className="mono">{tf.type_kind}</td>
|
||||
<td>{tf.nullable ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.const_values.length > 0 && (
|
||||
<div className="abstract-block">
|
||||
<div className="abstract-block-header">
|
||||
<h3 style={{ margin: 0 }}>Constant Values</h3>
|
||||
<span className="text-secondary">
|
||||
{data.const_values.length} constants
|
||||
</span>
|
||||
</div>
|
||||
<table className="abstract-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value</th>
|
||||
<th>Name</th>
|
||||
<th>Constant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.const_values.map((cv) => (
|
||||
<tr key={cv.ssa_value}>
|
||||
<td className="mono">v{cv.ssa_value}</td>
|
||||
<td className="mono">{cv.var_name ?? '-'}</td>
|
||||
<td className="mono">{cv.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AbstractBlock({ block }: { block: AbstractBlockView }) {
|
||||
return (
|
||||
<div className="abstract-block">
|
||||
<div className="abstract-block-header">
|
||||
<span className="ssa-block-id">B{block.block_id}</span>
|
||||
<span className="text-secondary">
|
||||
{block.values.length} tracked values
|
||||
</span>
|
||||
</div>
|
||||
<table className="abstract-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value</th>
|
||||
<th>Name</th>
|
||||
<th>Interval</th>
|
||||
<th>String Prefix</th>
|
||||
<th>String Suffix</th>
|
||||
<th>Bit Masks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{block.values.map((v) => (
|
||||
<AbstractValueRow key={v.ssa_value} value={v} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AbstractValueRow({ value }: { value: AbstractValueView }) {
|
||||
const lo = value.interval_lo != null ? `${value.interval_lo}` : '-inf';
|
||||
const hi = value.interval_hi != null ? `${value.interval_hi}` : '+inf';
|
||||
const interval = `[${lo}, ${hi}]`;
|
||||
const hasBits = value.known_zero !== 0 || value.known_one !== 0;
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td className="mono">v{value.ssa_value}</td>
|
||||
<td className="mono">{value.var_name ?? '-'}</td>
|
||||
<td className="mono">{interval}</td>
|
||||
<td className="mono">{value.string_prefix ?? '-'}</td>
|
||||
<td className="mono">{value.string_suffix ?? '-'}</td>
|
||||
<td className="mono">
|
||||
{hasBits
|
||||
? `zero=0x${value.known_zero.toString(16)} one=0x${value.known_one.toString(16)}`
|
||||
: '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
63
frontend/src/pages/debug/CallGraphPage.tsx
Normal file
63
frontend/src/pages/debug/CallGraphPage.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { useState } from 'react';
|
||||
import { useDebugCallGraph } from '../../api/queries/debug';
|
||||
import { CallGraphCanvas } from '../../graph/components/CallGraphCanvas';
|
||||
|
||||
export function CallGraphPage() {
|
||||
const [selectedNode, setSelectedNode] = useState<number | null>(null);
|
||||
const { data, isLoading, error } = useDebugCallGraph('project');
|
||||
|
||||
if (isLoading) return <div className="loading">Loading call graph...</div>;
|
||||
if (error)
|
||||
return (
|
||||
<div className="error-state">
|
||||
Failed to load call graph. Have you run a scan?
|
||||
</div>
|
||||
);
|
||||
if (!data) return null;
|
||||
|
||||
const selectedInfo = data.nodes.find((n) => n.id === selectedNode);
|
||||
|
||||
return (
|
||||
<div className="debug-split">
|
||||
<div className="debug-split-main">
|
||||
<div className="debug-toolbar">
|
||||
<span className="debug-toolbar-label">Project scope</span>
|
||||
<span className="text-secondary">
|
||||
{data.nodes.length} functions, {data.edges.length} edges
|
||||
{data.sccs.length > 0 && `, ${data.sccs.length} recursive SCCs`}
|
||||
{data.unresolved_count > 0 &&
|
||||
`, ${data.unresolved_count} unresolved`}
|
||||
</span>
|
||||
</div>
|
||||
<CallGraphCanvas
|
||||
data={data}
|
||||
selectedNodeId={selectedNode}
|
||||
onSelectNode={setSelectedNode}
|
||||
/>
|
||||
</div>
|
||||
{selectedInfo && (
|
||||
<div className="debug-split-sidebar">
|
||||
<h3>{selectedInfo.name}</h3>
|
||||
<div className="debug-node-detail">
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Language</span>
|
||||
<span className="debug-detail-value">{selectedInfo.lang}</span>
|
||||
</div>
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Namespace</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{selectedInfo.namespace}
|
||||
</span>
|
||||
</div>
|
||||
{selectedInfo.arity != null && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Arity</span>
|
||||
<span className="debug-detail-value">{selectedInfo.arity}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
frontend/src/pages/debug/CfgViewerPage.tsx
Normal file
37
frontend/src/pages/debug/CfgViewerPage.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { useDebugCfg } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
import { CfgGraphCanvas } from '../../graph/components/CfgGraphCanvas';
|
||||
|
||||
interface CfgAnalysisPanelProps {
|
||||
file: string;
|
||||
functionName: string;
|
||||
}
|
||||
|
||||
export function CfgAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
}: CfgAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugCfg(file, functionName);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading CFG..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="CFG data is not available for the selected function." />
|
||||
);
|
||||
}
|
||||
return <ErrorState message="Failed to load CFG." />;
|
||||
}
|
||||
if (!data || data.nodes.length === 0) {
|
||||
return (
|
||||
<EmptyState message="No CFG nodes are available for this function." />
|
||||
);
|
||||
}
|
||||
|
||||
return <CfgGraphCanvas data={data} />;
|
||||
}
|
||||
31
frontend/src/pages/debug/DebugLayout.tsx
Normal file
31
frontend/src/pages/debug/DebugLayout.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { NavLink, Outlet } from 'react-router-dom';
|
||||
|
||||
const TABS = [
|
||||
{ path: '/debug/call-graph', label: 'Call Graph' },
|
||||
{ path: '/debug/summaries', label: 'Summaries' },
|
||||
];
|
||||
|
||||
export function DebugLayout() {
|
||||
return (
|
||||
<div className="debug-layout debug-layout-global">
|
||||
<div className="debug-main">
|
||||
<nav className="debug-tabs">
|
||||
{TABS.map((tab) => (
|
||||
<NavLink
|
||||
key={tab.path}
|
||||
to={tab.path}
|
||||
className={({ isActive }) =>
|
||||
`debug-tab${isActive ? ' debug-tab-active' : ''}`
|
||||
}
|
||||
>
|
||||
{tab.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
<div className="debug-content">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
frontend/src/pages/debug/FunctionSelector.tsx
Normal file
56
frontend/src/pages/debug/FunctionSelector.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { useDebugFunctions } from '../../api/queries/debug';
|
||||
import type { FunctionInfo } from '../../api/types';
|
||||
|
||||
interface Props {
|
||||
file: string;
|
||||
selectedFunction: string | null;
|
||||
onFunctionChange: (fn_name: string | null) => void;
|
||||
showFilePath?: boolean;
|
||||
}
|
||||
|
||||
export function FunctionSelector({
|
||||
file,
|
||||
selectedFunction,
|
||||
onFunctionChange,
|
||||
showFilePath = true,
|
||||
}: Props) {
|
||||
const { data: functions, isLoading } = useDebugFunctions(file || null);
|
||||
|
||||
return (
|
||||
<div className="function-selector">
|
||||
{showFilePath && (
|
||||
<div className="function-selector-path">
|
||||
<span className="function-selector-path-label">File:</span>
|
||||
<code className="function-selector-path-value">
|
||||
{file || 'No file selected'}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
<div className="function-selector-field">
|
||||
<label>Function</label>
|
||||
<select
|
||||
value={selectedFunction ?? ''}
|
||||
onChange={(e) => onFunctionChange(e.target.value || null)}
|
||||
disabled={!functions || functions.length === 0}
|
||||
className="function-selector-select"
|
||||
>
|
||||
<option value="">
|
||||
{isLoading
|
||||
? 'Loading...'
|
||||
: !functions || functions.length === 0
|
||||
? 'No functions found'
|
||||
: 'Select function'}
|
||||
</option>
|
||||
{functions?.map((fn: FunctionInfo) => (
|
||||
<option key={fn.name} value={fn.name}>
|
||||
{fn.name}({fn.param_count} params) — L{fn.line}
|
||||
{fn.source_caps.length > 0 &&
|
||||
` [src: ${fn.source_caps.join(',')}]`}
|
||||
{fn.sink_caps.length > 0 && ` [sink: ${fn.sink_caps.join(',')}]`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
frontend/src/pages/debug/SsaViewerPage.tsx
Normal file
112
frontend/src/pages/debug/SsaViewerPage.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { useDebugSsa } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
import type { SsaBlockView, SsaInstView } from '../../api/types';
|
||||
|
||||
interface SsaAnalysisPanelProps {
|
||||
file: string;
|
||||
functionName: string;
|
||||
}
|
||||
|
||||
export function SsaAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
}: SsaAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugSsa(file, functionName);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading SSA..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="SSA data is not available for the selected function." />
|
||||
);
|
||||
}
|
||||
return <ErrorState message="Failed to load SSA." />;
|
||||
}
|
||||
if (!data) {
|
||||
return <EmptyState message="No SSA data is available for this function." />;
|
||||
}
|
||||
|
||||
// Render entry block first, then the rest in order
|
||||
const entryBlock = data.blocks.find((b) => b.id === data.entry);
|
||||
const otherBlocks = data.blocks.filter((b) => b.id !== data.entry);
|
||||
const ordered = entryBlock ? [entryBlock, ...otherBlocks] : data.blocks;
|
||||
|
||||
return (
|
||||
<div className="ssa-viewer">
|
||||
<div className="ssa-header">
|
||||
<span className="text-secondary">
|
||||
{data.num_values} SSA values, {data.blocks.length} blocks
|
||||
</span>
|
||||
</div>
|
||||
{ordered.map((block) => (
|
||||
<SsaBlock
|
||||
key={block.id}
|
||||
block={block}
|
||||
isEntry={block.id === data.entry}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SsaBlock({
|
||||
block,
|
||||
isEntry,
|
||||
}: {
|
||||
block: SsaBlockView;
|
||||
isEntry: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={`ssa-block${isEntry ? ' ssa-block-entry' : ''}`}>
|
||||
<div className="ssa-block-header">
|
||||
<span className="ssa-block-id">B{block.id}</span>
|
||||
{isEntry && <span className="badge-info">entry</span>}
|
||||
{block.preds.length > 0 && (
|
||||
<span className="text-secondary ssa-block-preds">
|
||||
preds: {block.preds.map((p) => `B${p}`).join(', ')}
|
||||
</span>
|
||||
)}
|
||||
{block.succs.length > 0 && (
|
||||
<span className="text-secondary ssa-block-succs">
|
||||
succs: {block.succs.map((s) => `B${s}`).join(', ')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{block.phis.length > 0 && (
|
||||
<div className="ssa-phi-section">
|
||||
{block.phis.map((inst) => (
|
||||
<SsaInstLine key={inst.value} inst={inst} isPhi />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="ssa-body-section">
|
||||
{block.body.map((inst) => (
|
||||
<SsaInstLine key={inst.value} inst={inst} />
|
||||
))}
|
||||
</div>
|
||||
<div className="ssa-terminator">{block.terminator}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SsaInstLine({ inst, isPhi }: { inst: SsaInstView; isPhi?: boolean }) {
|
||||
const operands =
|
||||
inst.operands.length > 0 ? `(${inst.operands.join(', ')})` : '';
|
||||
return (
|
||||
<div className={`ssa-inst${isPhi ? ' ssa-inst-phi' : ''}`}>
|
||||
<span className="ssa-value">v{inst.value}</span>
|
||||
<span className="ssa-eq"> = </span>
|
||||
<span className="ssa-op">{inst.op}</span>
|
||||
<span className="ssa-operands">{operands}</span>
|
||||
{inst.var_name && (
|
||||
<span className="ssa-var-name"> # {inst.var_name}</span>
|
||||
)}
|
||||
<span className="ssa-line-ref"> L{inst.line}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
230
frontend/src/pages/debug/SummaryExplorerPage.tsx
Normal file
230
frontend/src/pages/debug/SummaryExplorerPage.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
import { useState } from 'react';
|
||||
import { useDebugSummaries } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
import type { FuncSummaryView } from '../../api/types';
|
||||
|
||||
interface SummaryAnalysisPanelProps {
|
||||
file?: string | null;
|
||||
functionName?: string | null;
|
||||
scope?: 'file' | 'global';
|
||||
}
|
||||
|
||||
export function SummaryAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
scope = 'file',
|
||||
}: SummaryAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugSummaries(
|
||||
scope === 'global' ? null : (file ?? null),
|
||||
scope === 'global' ? null : (functionName ?? null),
|
||||
);
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading summaries..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="Summaries are not available for the selected scope." />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ErrorState message="Failed to load summaries. Have you run a scan?" />
|
||||
);
|
||||
}
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
message={
|
||||
scope === 'global'
|
||||
? 'No global summaries found. Run a scan first.'
|
||||
: 'No summaries found for this file.'
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="summary-explorer">
|
||||
<div className="summary-header">
|
||||
<span className="text-secondary">
|
||||
{data.length}{' '}
|
||||
{scope === 'global'
|
||||
? 'functions across the project'
|
||||
: 'functions in this file'}
|
||||
</span>
|
||||
</div>
|
||||
<table className="summary-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Function</th>
|
||||
<th>Lang</th>
|
||||
<th>Params</th>
|
||||
<th>Sources</th>
|
||||
<th>Sanitizers</th>
|
||||
<th>Sinks</th>
|
||||
<th>Propagates</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((s) => (
|
||||
<SummaryRow
|
||||
key={`${s.namespace}::${s.name}`}
|
||||
summary={s}
|
||||
isExpanded={expanded === `${s.namespace}::${s.name}`}
|
||||
onToggle={() =>
|
||||
setExpanded(
|
||||
expanded === `${s.namespace}::${s.name}`
|
||||
? null
|
||||
: `${s.namespace}::${s.name}`,
|
||||
)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SummaryExplorerPage() {
|
||||
return <SummaryAnalysisPanel scope="global" />;
|
||||
}
|
||||
|
||||
function SummaryRow({
|
||||
summary,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
summary: FuncSummaryView;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<tr onClick={onToggle} style={{ cursor: 'pointer' }}>
|
||||
<td className="mono">{summary.name}</td>
|
||||
<td>{summary.lang}</td>
|
||||
<td>{summary.param_count}</td>
|
||||
<td>
|
||||
{summary.source_caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-source">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{summary.sanitizer_caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-sanitizer">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td>
|
||||
{summary.sink_caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-sink">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td>{summary.propagates_taint ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
{isExpanded && (
|
||||
<tr>
|
||||
<td colSpan={7}>
|
||||
<div className="summary-detail">
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">File</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{summary.file_path}
|
||||
</span>
|
||||
</div>
|
||||
{summary.propagating_params.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Propagating params</span>
|
||||
<span className="debug-detail-value">
|
||||
{summary.propagating_params.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.tainted_sink_params.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Sink params</span>
|
||||
<span className="debug-detail-value">
|
||||
{summary.tainted_sink_params.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.callees.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Callees</span>
|
||||
<span className="debug-detail-value mono">
|
||||
{summary.callees.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.ssa_summary && (
|
||||
<div className="summary-ssa-detail">
|
||||
<h4>SSA Summary</h4>
|
||||
{summary.ssa_summary.source_caps.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Source caps</span>
|
||||
<span>
|
||||
{summary.ssa_summary.source_caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-source">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.ssa_summary.param_to_return.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">
|
||||
Param-to-return
|
||||
</span>
|
||||
<span>
|
||||
{summary.ssa_summary.param_to_return.map((p, i) => (
|
||||
<span key={i} className="mono">
|
||||
p{p.param_index} → {p.transform}
|
||||
{i < summary.ssa_summary!.param_to_return.length - 1
|
||||
? ', '
|
||||
: ''}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.ssa_summary.param_to_sink.length > 0 && (
|
||||
<div className="debug-detail-row">
|
||||
<span className="debug-detail-label">Param-to-sink</span>
|
||||
<span>
|
||||
{summary.ssa_summary.param_to_sink.map((p, i) => (
|
||||
<span key={i}>
|
||||
p{p.param_index} →{' '}
|
||||
{p.sink_caps.map((c, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="cap-badge cap-badge-sink"
|
||||
>
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
90
frontend/src/pages/debug/SymexPage.tsx
Normal file
90
frontend/src/pages/debug/SymexPage.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { useDebugSymex } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
|
||||
interface SymexAnalysisPanelProps {
|
||||
file: string;
|
||||
functionName: string;
|
||||
}
|
||||
|
||||
export function SymexAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
}: SymexAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugSymex(file, functionName);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading symbolic execution..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="Symbolic execution data is not available for the selected function." />
|
||||
);
|
||||
}
|
||||
return <ErrorState message="Failed to load symbolic execution." />;
|
||||
}
|
||||
if (!data) {
|
||||
return (
|
||||
<EmptyState message="No symbolic execution data is available for this function." />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="symex-viewer">
|
||||
{data.tainted_roots.length > 0 && (
|
||||
<div className="symex-section">
|
||||
<h3>Tainted Roots</h3>
|
||||
<div className="symex-roots">
|
||||
{data.tainted_roots.map((r) => (
|
||||
<span key={r} className="cap-badge cap-badge-source">
|
||||
v{r}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.path_constraints.length > 0 && (
|
||||
<div className="symex-section">
|
||||
<h3>Path Constraints</h3>
|
||||
{data.path_constraints.map((pc, i) => (
|
||||
<div key={i} className="symex-constraint">
|
||||
<span className="text-secondary">B{pc.block}</span>
|
||||
<span
|
||||
className={`symex-polarity ${pc.polarity ? 'symex-true' : 'symex-false'}`}
|
||||
>
|
||||
{pc.polarity ? 'TRUE' : 'FALSE'}
|
||||
</span>
|
||||
<span className="mono">{pc.condition}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="symex-section">
|
||||
<h3>Symbolic Values ({data.values.length})</h3>
|
||||
<table className="symex-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value</th>
|
||||
<th>Name</th>
|
||||
<th>Expression</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.values.map((v) => (
|
||||
<tr key={v.ssa_value}>
|
||||
<td className="mono">v{v.ssa_value}</td>
|
||||
<td className="mono">{v.var_name ?? '-'}</td>
|
||||
<td className="mono">{v.expression}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
126
frontend/src/pages/debug/TaintViewerPage.tsx
Normal file
126
frontend/src/pages/debug/TaintViewerPage.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { useDebugTaint } from '../../api/queries/debug';
|
||||
import { ApiError } from '../../api/client';
|
||||
import { EmptyState } from '../../components/ui/EmptyState';
|
||||
import { ErrorState } from '../../components/ui/ErrorState';
|
||||
import { LoadingState } from '../../components/ui/LoadingState';
|
||||
import type {
|
||||
TaintBlockStateView,
|
||||
TaintEventView,
|
||||
TaintValueView,
|
||||
} from '../../api/types';
|
||||
|
||||
interface TaintAnalysisPanelProps {
|
||||
file: string;
|
||||
functionName: string;
|
||||
}
|
||||
|
||||
export function TaintAnalysisPanel({
|
||||
file,
|
||||
functionName,
|
||||
}: TaintAnalysisPanelProps) {
|
||||
const { data, isLoading, error } = useDebugTaint(file, functionName);
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingState message="Loading taint analysis..." />;
|
||||
}
|
||||
if (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return (
|
||||
<EmptyState message="Taint analysis is not available for the selected function." />
|
||||
);
|
||||
}
|
||||
return <ErrorState message="Failed to load taint analysis." />;
|
||||
}
|
||||
if (!data) {
|
||||
return (
|
||||
<EmptyState message="No taint analysis data is available for this function." />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="taint-viewer">
|
||||
{data.events.length > 0 && (
|
||||
<div className="taint-events-section">
|
||||
<h3>Sink Events ({data.events.length})</h3>
|
||||
{data.events.map((e, i) => (
|
||||
<TaintEvent key={i} event={e} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="taint-blocks-section">
|
||||
<h3>Per-Block Taint State</h3>
|
||||
{data.block_states.map((bs) => (
|
||||
<TaintBlockState key={bs.block_id} state={bs} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaintEvent({ event }: { event: TaintEventView }) {
|
||||
return (
|
||||
<div
|
||||
className={`taint-event${event.all_validated ? ' taint-event-validated' : ''}`}
|
||||
>
|
||||
<div className="taint-event-header">
|
||||
<span>Sink node #{event.sink_node}</span>
|
||||
{event.all_validated && (
|
||||
<span className="badge-success">validated</span>
|
||||
)}
|
||||
{event.uses_summary && <span className="badge-info">via summary</span>}
|
||||
</div>
|
||||
<div className="taint-event-caps">
|
||||
Sink caps:{' '}
|
||||
{event.sink_caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-sink">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="taint-event-values">
|
||||
{event.tainted_values.map((v, i) => (
|
||||
<TaintValue key={i} value={v} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaintBlockState({ state }: { state: TaintBlockStateView }) {
|
||||
if (state.values.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="taint-block-state">
|
||||
<div className="taint-block-state-header">
|
||||
<span className="ssa-block-id">B{state.block_id}</span>
|
||||
<span className="text-secondary">
|
||||
{state.values.length} tainted values
|
||||
</span>
|
||||
</div>
|
||||
<div className="taint-block-state-values">
|
||||
{state.values.map((v, i) => (
|
||||
<TaintValue key={i} value={v} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaintValue({ value }: { value: TaintValueView }) {
|
||||
return (
|
||||
<div className="taint-value">
|
||||
<span className="taint-value-id">v{value.ssa_value}</span>
|
||||
{value.var_name && (
|
||||
<span className="taint-value-name">{value.var_name}</span>
|
||||
)}
|
||||
<span className="taint-value-caps">
|
||||
{value.caps.map((c, i) => (
|
||||
<span key={i} className="cap-badge cap-badge-source">
|
||||
{c}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
{value.uses_summary && <span className="badge-info">summary</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue