CyberOrigen UI Workflow Logic
Complete workflow documentation for the CyberOrigen security platform UI. Version: 2.4.0
Table of Contents
- Application Overview
- Navigation Structure
- Core Workflows
- Page-by-Page Logic
- Cross-Page Actions
- State Machines
- User Journey Maps
Application Overview
CyberOrigen is a security scanning and vulnerability management platform with AI-powered assistance. The UI follows a tab-based navigation pattern with a persistent sidebar and top header.
Tech Stack
- React 18.2 + TypeScript (Vite)
- Tailwind CSS + Lucide Icons
- Recharts for visualizations
- WebSocket for real-time updates
Global Components (Always Visible)
| Component | Location | Purpose |
|---|---|---|
| Sidebar | Left | Primary navigation between pages |
| Header | Top | Scan controls, search, user menu |
| QuotaWarningBanner | Top (conditional) | Usage limit alerts |
Navigation Structure
┌─────────────────────────────────────────────────────────────┐
│ HEADER: [Target Input] [Bulk Upload] [Start Scan] [Search] │
├──────────┬──────────────────────────────────────────────────┤
│ │ │
│ SIDEBAR │ MAIN CONTENT AREA │
│ │ (Tab-based page rendering) │
│ Dashboard│ │
│ Agent │ │
│ Scans │ │
│ Findings │ │
│ Remediate│ │
│ Tickets │ │
│ Reports │ │
│ Audit │ │
│ Settings │ │
│ Org │ │
│ Billing │ │
│ Admin │ │
│ │ │
└──────────┴──────────────────────────────────────────────────┘Page Routes (Tab IDs)
| Tab ID | Page Name | Access Level | Description |
|---|---|---|---|
dashboard | Dashboard | All users | Security overview & metrics |
agent | AI Agent | All users | Full-screen AI chat interface |
scans | Active Scans | All users | Scan management & history |
findings | Findings | All users | Vulnerability registry |
remediation | Remediation | All users | Fix tracking & audit |
tickets | Tickets | All users | Issue tracking integration |
reports | Reports | All users | Compliance & trending |
audit | Audit Logs | Admin/Owner | Security audit trail |
settings | Settings | All users | User preferences |
organization | Organization | Admin/Owner | Team management |
billing | Billing | Owner | Subscription management |
admin | Admin Portal | Platform Admin | System administration |
Core Workflows
1. Scan Workflow
The most critical workflow - initiating and monitoring security scans.
Scan Entry Points (Multiple Locations)
┌─────────────────────────────────────────────────────────────────┐
│ SCAN INITIATION OPTIONS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ OPTION A: Header Bar (Available on ALL pages) │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ [Target: domain/IP input] [Bulk Upload] [Start Scan] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ OPTION B: Active Scans Page (tab: 'scans') │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Dedicated scan form with: │ │
│ │ - Target input │ │
│ │ - Scan type selection │ │
│ │ - Schedule options │ │
│ │ - Advanced configuration │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ OPTION C: Bulk Upload Modal (From Header) │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Upload CSV/TXT with multiple targets │ │
│ │ - File upload │ │
│ │ - Preview targets │ │
│ │ - Batch scan initiation │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘Scan Authorization Flow
User Action: Click "Start Scan"
│
▼
┌─────────────────────┐
│ useScanAuthorization│
│ hook triggers │
└─────────┬───────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ ScanAuthorizationModal │
│ ┌───────────────────────────────────────────┐ │
│ │ "You are about to scan: [target]" │ │
│ │ │ │
│ │ ☐ I confirm I have authorization to scan │ │
│ │ this target │ │
│ │ │ │
│ │ [Cancel] [Confirm & Scan] │ │
│ └───────────────────────────────────────────┘ │
└─────────────────────┬───────────────────────────┘
│
┌───────────┴───────────┐
│ │
▼ ▼
User Cancels User Confirms
│ │
▼ ▼
Return to UI Collect Attestation
│
┌─────────────┴─────────────┐
│ ScanAttestation Object │
│ - auth_confirmed: true │
│ - auth_confirmed_at: ISO │
│ - auth_user_agent: string │
└─────────────┬─────────────┘
│
▼
┌─────────────────────────────┐
│ useScan.startScan() called │
│ with attestation data │
└─────────────┬───────────────┘
│
▼
┌─────────────────────────────┐
│ API Request / WebSocket │
│ connection established │
└─────────────┬───────────────┘
│
▼
Scan Execution
(See phases below)Scan Phases (State Machine)
┌──────────────────────────────────────────────────────────────────────┐
│ SCAN PHASE PROGRESSION │
└──────────────────────────────────────────────────────────────────────┘
IDLE ──────► DISCOVERY ──────► ENUMERATION ──────► VULN_SCAN
│ │ │ │
│ Enumerate Identify Scan for
│ targets services vulns
│ │
│ ▼
│ THREAT_INTEL
│ │
│ Gather threat
│ intelligence
│ │
│ ▼
│ EXPLOIT_CHECK
│ │
│ Check active
│ exploits
│ │
│ ▼
│ PRIORITIZATION
│ │
│ Rank by risk
│ │
│ ▼
│ REMEDIATION
│ │
│ Generate fix
│ guidance
│ │
│ ▼
│ REPORTING
│ │
│ Generate
│ reports
│ │
▼ ▼
FAILED ◄─────────────────────────────────────────► COMPLETED
│ (on error) │
│ │
└─────────────────────► IDLE ◄────────────────────────┘
(reset)Scan Operations by Page
| Page | Available Scan Operations |
|---|---|
| Dashboard | View active scan progress, see real-time findings |
| Active Scans | Start/Stop/Pause/Resume/Cancel, View queue, Schedule recurring, View history |
| Header (All pages) | Quick start scan, Bulk upload |
2. Vulnerability Management Workflow
Finding Discovery to Resolution
┌─────────────────────────────────────────────────────────────────────┐
│ VULNERABILITY LIFECYCLE │
└─────────────────────────────────────────────────────────────────────┘
Scan Completes
│
▼
┌───────────────────┐
│ Vulnerability │
│ Discovered │
│ Status: OPEN │
└─────────┬─────────┘
│
├──────────────────────────────────────┐
│ │
▼ ▼
┌───────────────────┐ ┌───────────────────┐
│ View on Dashboard │ │ View in Findings │
│ (Quick overview) │ │ (Full details) │
└─────────┬─────────┘ └─────────┬─────────┘
│ │
└─────────────┬─────────────────────┘
│
▼
┌─────────────────────────────┐
│ VulnerabilityDetailModal │
│ - CVE details │
│ - Affected assets │
│ - CVSS score │
│ - Remediation steps │
│ - AI recommendations │
└─────────────┬───────────────┘
│
┌─────────────┼─────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Dismiss │ │ Create │ │ Mark as │
│ (Accept │ │ Ticket │ │ Fixed │
│ Risk) │ │ │ │ │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
▼ ▼ ▼
Status: Ticket Status:
DISMISSED Created FIXED
│ │ │
│ │ ▼
│ │ ┌──────────────────┐
│ │ │ Verification │
│ │ │ Scan (optional) │
│ │ └────────┬─────────┘
│ │ │
└─────────────┼─────────────┘
│
▼
┌─────────────────────────────┐
│ Logged in Remediation Audit │
│ - User who actioned │
│ - Timestamp │
│ - Before/After state │
│ - Compliance impact │
└─────────────────────────────┘Vulnerability Access Points
| Page | What You Can Do | Details |
|---|---|---|
| Dashboard | View top findings, Quick remediate | Shows prioritized list, limited to top items |
| Findings | Full CRUD, Filter, Search, Export | Complete vulnerability management |
| Remediation | View audit trail, Verify fixes | Track what was fixed and by whom |
| Reports | See framework mappings | Vulnerabilities mapped to compliance controls |
| Agent | Ask AI about vulns | Context-aware vulnerability analysis |
3. Compliance Workflow
┌─────────────────────────────────────────────────────────────────────┐
│ COMPLIANCE WORKFLOW │
└─────────────────────────────────────────────────────────────────────┘
Scan Results
│
▼
┌───────────────────┐ Automatic
│ Vulnerabilities │─────mapping─────►┌───────────────────────────┐
│ Collected │ │ Compliance Framework │
└───────────────────┘ │ Mappings │
│ - SOC2 │
│ - PCI-DSS │
│ - ISO27001 │
│ - HIPAA │
│ - GDPR │
│ - DORA │
└─────────────┬─────────────┘
│
▼
┌───────────────────────────┐
│ Compliance Scoring │
│ Per Framework │
│ (Radar charts) │
└─────────────┬─────────────┘
│
┌───────────────────────────┼───────────────┐
│ │ │
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ Executive Report │ │ CISO Report │ │ Team Report │
│ (High-level) │ │ (Technical) │ │ (Operational)│
└────────┬─────────┘ └────────┬─────────┘ └──────┬───────┘
│ │ │
└─────────────────────────┼───────────────────┘
│
▼
┌───────────────────────────┐
│ PDF Export │
│ - AI-generated summaries │
│ - Trend analysis │
│ - Remediation guidance │
└───────────────────────────┘4. AI Agent Workflow
┌─────────────────────────────────────────────────────────────────────┐
│ AI AGENT INTERACTION │
└─────────────────────────────────────────────────────────────────────┘
User has question about security
│
├─────────────────────────────────┐
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ Dashboard │ │ Agent Page │
│ (Mini chat in │ │ (Full-screen │
│ right sidebar) │ │ chat interface)│
└────────┬────────┘ └────────┬────────┘
│ │
│ Same Chat State │
│◄───────────────────────────────┤
│ (Messages persist across │
│ tab switches) │
│ │
└────────────┬───────────────────┘
│
▼
┌─────────────────────────────┐
│ User types message │
└─────────────┬───────────────┘
│
▼
┌─────────────────────────────┐
│ Context injection: │
│ - Current vulnerabilities │
│ - Active scan state │
│ - User organization │
└─────────────┬───────────────┘
│
▼
┌─────────────────────────────┐
│ AI Provider processes │
│ (Gemini / Claude / OpenAI) │
└─────────────┬───────────────┘
│
▼
┌─────────────────────────────┐
│ Response rendered │
│ - Recommendations │
│ - Risk analysis │
│ - Remediation steps │
└─────────────────────────────┘Page-by-Page Logic
Dashboard (tab: dashboard)
Purpose: Central security overview and quick actions
Components:
┌─────────────────────────────────────────────────────────────────────┐
│ DASHBOARD LAYOUT │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Security │ │ Assets │ │ Critical │ │ Remediated │ │
│ │ Score: A │ │ Count: 42 │ │ Vulns: 3 │ │ Count: 89% │ │
│ │ ▲ Trending │ │ │ │ High: 12 │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ ┌────────────────────────────────────────────┐ ┌────────────────┐ │
│ │ Active Scan Progress │ │ AI Agent Chat │ │
│ │ ┌────────────────────────────────────────┐ │ │ ┌────────────┐ │ │
│ │ │ [Phase Carousel / Pipeline] │ │ │ │ Messages │ │ │
│ │ │ DISCOVERY → ENUM → VULN → ... │ │ │ │ ... │ │ │
│ │ └────────────────────────────────────────┘ │ │ │ │ │ │
│ │ Current Task: Scanning ports... │ │ │ [Input] │ │ │
│ │ Found: 3 vulnerabilities │ │ └────────────┘ │ │
│ └────────────────────────────────────────────┘ └────────────────┘ │
│ │
│ ┌────────────────────────────────────────────┐ ┌────────────────┐ │
│ │ AI Summary │ │ Vuln Classes │ │
│ │ "Your infrastructure shows strong..." │ │ [Pie/Bar Chart]│ │
│ │ [Export PDF] │ │ │ │
│ └────────────────────────────────────────────┘ └────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Prioritized Findings Table │ │
│ │ ┌──────┬────────────────────┬──────────┬─────────┬─────────┐ │ │
│ │ │ Sev │ Title │ Asset │ Status │ Actions │ │ │
│ │ ├──────┼────────────────────┼──────────┼─────────┼─────────┤ │ │
│ │ │ CRIT │ SQL Injection │ api.com │ OPEN │ [Fix] │ │ │
│ │ │ HIGH │ XSS in login │ web.com │ OPEN │ [Fix] │ │ │
│ │ └──────┴────────────────────┴──────────┴─────────┴─────────┘ │ │
│ │ [View All Findings →] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Actions Available:
| Action | Trigger | Result |
|---|---|---|
| View scan progress | Automatic | Real-time phase updates |
| Mark vuln as fixed | Click "Fix" button | Status → FIXED |
| View vuln details | Click row | Opens VulnerabilityDetailModal |
| Chat with AI | Type in sidebar | AI response with context |
| Export summary | Click "Export PDF" | Downloads AI summary |
| Go to Findings | Click "View All" | Navigates to Findings tab |
Active Scans (tab: scans)
Purpose: Full scan management, scheduling, and history
Components:
┌─────────────────────────────────────────────────────────────────────┐
│ ACTIVE SCANS LAYOUT │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ NEW SCAN │ │
│ │ ┌────────────────────────────┐ ┌──────────┐ ┌──────────────┐ │ │
│ │ │ Target: [input] │ │ Type: ▼ │ │ [Start Scan] │ │ │
│ │ └────────────────────────────┘ │ Full │ └──────────────┘ │ │
│ │ │ Quick │ │ │
│ │ │ Stealth │ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────┐ ┌─────────────────────────┐│
│ │ CURRENT SCAN │ │ SCAN QUEUE ││
│ │ Target: example.com │ │ 1. pending.com (queued) ││
│ │ Status: VULN_SCAN (Phase 3/8) │ │ 2. next.io (queued) ││
│ │ Elapsed: 00:04:23 │ │ 3. later.net (scheduled)││
│ │ Progress: ████████░░ 78% │ │ ││
│ │ │ │ ││
│ │ [Pause] [Cancel] │ │ ││
│ └────────────────────────────────────┘ └─────────────────────────┘│
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ SCAN HISTORY [Filter ▼] │ │
│ │ ┌────────────┬────────────┬──────────┬─────────┬───────────┐ │ │
│ │ │ Target │ Date │ Duration │ Vulns │ Status │ │ │
│ │ ├────────────┼────────────┼──────────┼─────────┼───────────┤ │ │
│ │ │ api.com │ Dec 7, 24 │ 12:34 │ 15 │ Completed │ │ │
│ │ │ web.org │ Dec 6, 24 │ 08:21 │ 3 │ Completed │ │ │
│ │ │ test.io │ Dec 5, 24 │ -- │ -- │ Failed │ │ │
│ │ └────────────┴────────────┴──────────┴─────────┴───────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────┐ ┌─────────────────────────────────┐│
│ │ RECURRING SCHEDULES │ │ SYSTEM HEALTH ││
│ │ ┌───────────┬────────────┐ │ │ AI Usage: 1,234 / 10,000 tokens ││
│ │ │ Target │ Schedule │ │ │ API Latency: 142ms avg ││
│ │ ├───────────┼────────────┤ │ │ Error Rate: 0.2% ││
│ │ │ prod.com │ Daily 2AM │ │ │ ││
│ │ │ stage.com │ Weekly Mon │ │ │ ││
│ │ └───────────┴────────────┘ │ │ ││
│ │ [+ Add Schedule] │ │ ││
│ └────────────────────────────┘ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────────┘Actions Available:
| Action | Trigger | Result |
|---|---|---|
| Start new scan | Fill form + click Start | Authorization modal → Scan begins |
| Pause scan | Click "Pause" | Scan paused, can resume |
| Resume scan | Click "Resume" | Scan continues from pause point |
| Cancel scan | Click "Cancel" | Scan aborted, partial results saved |
| View history | Scroll table | See past scan results |
| Add schedule | Click "+ Add Schedule" | Create recurring scan |
| Filter history | Use dropdown | Filter by status/date |
Findings (tab: findings)
Purpose: Complete vulnerability registry with filtering and export
Components:
┌─────────────────────────────────────────────────────────────────────┐
│ FINDINGS LAYOUT │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Total │ │ Critical+ │ │ Open │ │ Remediated │ │
│ │ Findings │ │ High │ │ Issues │ │ │ │
│ │ 156 │ │ 23 │ │ 45 │ │ 111 (71%) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ FILTERS │ │
│ │ Severity: [ALL▼] [CRIT] [HIGH] [MED] [LOW] [INFO] │ │
│ │ Status: [ALL] [OPEN] [FIXED] │ │
│ │ Search: [________________________________] 🔍 │ │
│ │ [Export CSV] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ VULNERABILITY TABLE │ │
│ │ ┌────┬─────────────────────────┬────────┬────────┬──────────┐│ │
│ │ │Sev │ Title / CVE │ Asset │ Status │ Actions ││ │
│ │ ├────┼─────────────────────────┼────────┼────────┼──────────┤│ │
│ │ │🔴 │ CVE-2024-1234 │ api │ OPEN │ [Details]││ │
│ │ │ │ SQL Injection in login │ │ │ [Fix] ││ │
│ │ ├────┼─────────────────────────┼────────┼────────┼──────────┤│ │
│ │ │🟠 │ CVE-2024-5678 │ web │ OPEN │ [Details]││ │
│ │ │ │ XSS vulnerability │ │ │ [Fix] ││ │
│ │ ├────┼─────────────────────────┼────────┼────────┼──────────┤│ │
│ │ │🟡 │ Outdated SSL cert │ mail │ FIXED │ [Details]││ │
│ │ └────┴─────────────────────────┴────────┴────────┴──────────┘│ │
│ │ [1] [2] [3] ... [12] [Next →] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Actions Available:
| Action | Trigger | Result |
|---|---|---|
| Filter by severity | Click severity chip | Table filters |
| Filter by status | Click status option | Table filters |
| Search | Type in search box | Real-time filter |
| Export CSV | Click "Export CSV" | Downloads CSV file |
| View details | Click "Details" | Opens VulnerabilityDetailModal |
| Mark as fixed | Click "Fix" | Status → FIXED, logged |
| Sort columns | Click column header | Ascending/Descending sort |
Remediation Audit (tab: remediation)
Purpose: Track all remediation actions and verify fixes
Layout similar to Findings but focused on:
- Audit log of all remediation actions
- Who performed each action
- Before/After compliance state
- Verification scan status
- Auto-fix vs manual tracking
Reports (tab: reports)
Purpose: Compliance reporting and trend analysis
Key Features:
- Framework radar charts (SOC2, PCI-DSS, ISO27001, HIPAA, GDPR, DORA)
- Compliance scoring per framework
- Trend line charts over time
- Three report types:
- Executive Summary (high-level)
- CISO Report (technical)
- Security Team Report (operational)
- PDF export with AI-generated summaries
Settings (tab: settings)
Purpose: User preferences and configuration
Sections:
- AI Provider - Select Gemini/Claude/OpenAI, configure API keys
- Autonomy Level - Monitor / Assist / Autonomous
- Language - EN/ES/FR/DE
- Notifications - Email, Slack, Webhook configuration
- Event Types - Toggle notifications for scan complete, new finding, auto-fix, etc.
- Severity Threshold - Minimum severity for alerts
Cross-Page Actions
Actions Available from Multiple Locations
┌─────────────────────────────────────────────────────────────────────┐
│ CROSS-PAGE ACTION MATRIX │
├──────────────────────┬──────┬───────┬─────────┬──────────┬─────────┤
│ Action │ Dash │ Scans │ Findings│ Remediate│ Reports │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ Start Scan │ ✓* │ ✓ │ ✓* │ ✓* │ ✓* │
│ (via Header) │ │ │ │ │ │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ View Vulnerabilities │ ✓ │ - │ ✓ │ ✓ │ ✓ │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ Mark as Fixed │ ✓ │ - │ ✓ │ - │ - │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ View Vuln Details │ ✓ │ - │ ✓ │ ✓ │ ✓ │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ Export Data │ ✓ │ - │ ✓ │ ✓ │ ✓ │
│ │(PDF) │ │ (CSV) │ (CSV) │ (PDF) │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ AI Chat │ ✓ │ - │ - │ - │ - │
│ (Embedded) │ │ │ │ │ │
├──────────────────────┼──────┼───────┼─────────┼──────────┼─────────┤
│ AI Chat (Full) │ ✓** │ ✓** │ ✓** │ ✓** │ ✓** │
│ (Via Agent Tab) │ │ │ │ │ │
└──────────────────────┴──────┴───────┴─────────┴──────────┴─────────┘
* Via persistent Header bar (always visible)
** Chat messages persist when switching tabsScan Initiation Comparison
| Location | Method | Features | Best For |
|---|---|---|---|
| Header Bar | Quick input + button | Fast, always available | Ad-hoc single scans |
| Header Bulk | Upload modal | CSV/TXT upload | Multiple targets |
| Active Scans | Dedicated form | Type selection, scheduling | Planned scans |
State Machines
Scan State
┌─────────────┐
│ IDLE │◄──────────────────────┐
└──────┬──────┘ │
│ startScan() │
▼ │
┌─────────────┐ │
│ DISCOVERY │ │
└──────┬──────┘ │
│ │
▼ │
┌─────────────┐ │
│ ENUMERATION │ │
└──────┬──────┘ │
│ │
▼ │
┌─────────────┐ │
│ VULN_SCAN │ │
└──────┬──────┘ │
│ │
▼ │
┌─────────────┐ │
│ THREAT_INTEL│ │
└──────┬──────┘ │
│ │
▼ │ reset()
┌──────────────┐ │
│EXPLOIT_CHECK │ │
└──────┬───────┘ │
│ │
▼ │
┌──────────────┐ │
│PRIORITIZATION│ │
└──────┬───────┘ │
│ │
▼ │
┌─────────────┐ │
│ REMEDIATION │ │
└──────┬──────┘ │
│ │
▼ │
┌─────────────┐ │
│ REPORTING │ │
└──────┬──────┘ │
│ │
┌───────────────┼───────────────┐ │
│ │ │ │
▼ ▼ ▼ │
┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ COMPLETED│────│ FAILED │────│ CANCELLED│─────────┘
└──────────┘ └──────────┘ └──────────┘Vulnerability State
┌──────────┐
│ OPEN │◄─────────────────┐
└────┬─────┘ │
│ │
├──────────┬─────────────┤
│ │ │
▼ ▼ │
┌──────────┐ ┌─────────┐ │
│ FIXED │ │DISMISSED│ │
└────┬─────┘ └─────────┘ │
│ │
▼ │
┌──────────┐ │
│ VERIFIED │───────────────────┘
└──────────┘ (if fix failed)Authentication State
┌────────────────┐
│ LOGGED_OUT │
└───────┬────────┘
│ login()
▼
┌────────────────┐ MFA Required?
│ LOGIN_VIEW │──────────────────►┌─────────────────┐
└───────┬────────┘ Yes │ MFA_VERIFY │
│ No └────────┬────────┘
│ │
▼ │
┌────────────────┐ │
│ MFA_SETUP │◄───── MFA not set up ──────┘
│ (if enforced) │
└───────┬────────┘
│
▼
┌────────────────┐
│ ONBOARDING │◄───── New signup
│ (if new user) │
└───────┬────────┘
│
▼
┌────────────────┐
│ LOGGED_IN │
│ (Main App) │
└────────────────┘User Journey Maps
New User Journey
1. SIGNUP
└─► Enter email, password
└─► Create account
2. ONBOARDING WIZARD
└─► Set organization name
└─► Configure first scan target
└─► (Optional) Invite team members
└─► (Optional) Connect integrations
3. FIRST SCAN
└─► Authorization modal
└─► Confirm ownership/permission
└─► Scan begins
└─► Watch real-time progress
4. REVIEW RESULTS
└─► Dashboard overview
└─► View findings
└─► Click into details
5. REMEDIATION
└─► Follow AI recommendations
└─► Mark as fixed
└─► (Optional) Verify with re-scanDaily Security Analyst Journey
1. LOGIN
└─► Dashboard (default)
└─► Check security score
└─► Review new findings since last login
2. TRIAGE
└─► Findings page
└─► Filter by CRITICAL + HIGH
└─► Prioritize by CVSS score
└─► Assign to team / Create tickets
3. REMEDIATE
└─► Work through prioritized list
└─► Mark completed items as FIXED
└─► Run verification scans
4. REPORT
└─► Reports page
└─► Generate compliance report
└─► Export PDF for stakeholders
5. SCHEDULE
└─► Active Scans
└─► Set up recurring scans
└─► Configure notification thresholdsEmergency Response Journey
1. ALERT RECEIVED
└─► Notification (email/Slack)
└─► Click link to Dashboard
2. ASSESS
└─► View critical finding
└─► Open VulnerabilityDetailModal
└─► Review AI analysis
3. RESPOND
└─► Chat with AI Agent
└─► Get remediation steps
└─► Apply fix
4. VERIFY
└─► Start targeted scan
└─► Confirm vulnerability resolved
└─► Mark as FIXED
5. DOCUMENT
└─► Remediation Audit
└─► Review action log
└─► Export for incident reportData Flow Summary
┌─────────────────────────────────────────────────────────────────────┐
│ DATA FLOW OVERVIEW │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────┐
│ USER ACTIONS │
└───────────┬─────────────┘
│
▼
┌─────────────────────────────────────┐
│ REACT STATE │
│ ┌─────────────────────────────┐ │
│ │ • activeTab │ │
│ │ • scanTarget │ │
│ │ • chatMessages │ │
│ │ • searchQuery │ │
│ └─────────────────────────────┘ │
└───────────────┬───────────────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ useScan() │ │Organization │ │ Language │
│ hook │ │ Context │ │ Context │
└──────┬──────┘ └──────┬──────┘ └─────────────┘
│ │
│ │
▼ ▼
┌─────────────────────────────────────┐
│ BACKEND API │
│ • /api/v1/scans │
│ • /api/v1/vulnerabilities │
│ • /api/v1/organizations │
│ • /api/v1/reports │
└─────────────────────────────────────┘
│
│ WebSocket (real-time)
│ OR REST (polling)
▼
┌─────────────────────────────────────┐
│ UI COMPONENTS │
│ Dashboard, Findings, Reports, etc. │
└─────────────────────────────────────┘Appendix: Component Reference
| Component | File | Used In |
|---|---|---|
VulnerabilityTable | components/VulnerabilityTable.tsx | Dashboard, Findings |
ScanPipeline | components/ScanPipeline.tsx | Dashboard |
ScanPhaseCarousel | components/ScanPhaseCarousel.tsx | Dashboard |
MetricCard | components/MetricCard.tsx | Dashboard, Findings |
ChatInterface | components/ChatInterface.tsx | Dashboard (mini), Agent (full) |
VulnerabilityDetailModal | components/VulnerabilityDetailModal.tsx | Global (modal) |
ScanAuthorizationModal | components/ScanAuthorizationModal.tsx | Global (modal) |
BulkUploadModal | components/BulkUploadModal.tsx | Global (modal) |
Sidebar | components/Sidebar.tsx | App (always visible) |
Header | components/Header.tsx | App (always visible) |
Document generated for CyberOrigen UI v2.4.0