/* Product UI tab - BSIO-first AI SOC, SIEM, and cybersecurity interface examples */ const ProductUITab = () => { const severityStyles = { Critical: { bg: "#FEF2F2", fg: BRAND.semantic.danger, border: "#FECACA" }, High: { bg: "#FFF7ED", fg: "#C2410C", border: "#FED7AA" }, Medium: { bg: "#FFFBEB", fg: "#B45309", border: "#FDE68A" }, Low: { bg: BRAND.secondary[50], fg: BRAND.secondary[800], border: BRAND.secondary[200] }, Info: { bg: BRAND.primary[50], fg: BRAND.primary[700], border: BRAND.primary[200] }, }; const statusStyles = { Open: { bg: "#FEF2F2", fg: BRAND.semantic.danger, border: "#FECACA" }, Triage: { bg: BRAND.primary[50], fg: BRAND.primary[700], border: BRAND.primary[200] }, Contained: { bg: BRAND.secondary[50], fg: BRAND.secondary[800], border: BRAND.secondary[200] }, Suppressed: { bg: "#F3F4F6", fg: BRAND.ink.muted, border: BRAND.surface.border }, }; const languageRules = [ { label: "Evidence before explanation", body: "AI summaries must cite the event, entity, rule, or field that supports the claim. Never show a model conclusion without the observable telemetry beside it.", }, { label: "Analyst decision first", body: "Every surface should make the next decision obvious: investigate, contain, suppress, escalate, or close. Keep generic dashboard copy out of analyst workflows.", }, { label: "Security fields are product UI", body: "Treat host.name, user.name, source.ip, process.name, rule.name, and threat.technique.id as first-class visual objects, not backend implementation details.", }, { label: "Threat mapping is visible", body: "Show ATT&CK technique, tactic, detection source, confidence, and false-positive notes close to the alert so the analyst can evaluate coverage quickly.", }, ]; const socMetrics = [ { label: "Open incidents", value: "18", detail: "4 critical", color: BRAND.semantic.danger }, { label: "AI triaged", value: "73%", detail: "last 24h", color: BRAND.primary[500] }, { label: "MTTA", value: "7m", detail: "median", color: BRAND.secondary[600] }, { label: "Noisy rules", value: "6", detail: "needs tuning", color: BRAND.semantic.warning }, ]; const alertRows = [ { id: "INC-4027", title: "Suspicious encoded PowerShell from finance workstation", severity: "High", status: "Triage", source: "EDR + PowerShell", entity: "FIN-LAP-042", user: "mira.chen", technique: "T1059 / T1027", risk: "91", signal: "winword.exe spawned powershell.exe with EncodedCommand and outbound HTTPS to 203.0.113.44", action: "Isolate host, collect memory, review document attachment", }, { id: "INC-4019", title: "Impossible travel with MFA fatigue on privileged account", severity: "Critical", status: "Open", source: "IdP + VPN", entity: "okta:admin.jpatel", user: "jpatel-admin", technique: "T1078", risk: "96", signal: "Successful login from 198.51.100.23 seven minutes after Denver login; 11 MFA prompts before success", action: "Revoke sessions, reset factors, verify admin role changes", }, { id: "INC-4008", title: "Cloud backup object encryption spike", severity: "Critical", status: "Contained", source: "Cloud audit + storage", entity: "prod-backup-us-east-1", user: "svc-backup-prod", technique: "T1486", risk: "94", signal: "1,284 objects encrypted with customer-provided key in 9 minutes from unusual API path", action: "Disable key path, preserve logs, validate restore point", }, { id: "INC-3996", title: "Beacon-like DNS from build runner", severity: "Medium", status: "Triage", source: "DNS + NetFlow", entity: "CI-RUNNER-17", user: "gitlab-runner", technique: "T1071", risk: "72", signal: "Periodic TXT lookups every 60 seconds to update-cdn.example with low byte count", action: "Compare to build job timeline, block domain if unrelated", }, ]; const fieldRows = [ ["@timestamp", "2026-05-12T13:42:18Z", "Sort, timeline, retention, SLA timers"], ["event.kind", "alert", "Separates alerts from raw events and metrics"], ["event.category", "process", "Powers filters, chart grouping, rule scope"], ["host.name", "FIN-LAP-042", "Primary endpoint entity"], ["user.name", "mira.chen", "Primary human or service principal"], ["source.ip", "10.42.18.55", "Sender of network exchange when available"], ["destination.ip", "203.0.113.44", "Remote peer for enrichment and blocking"], ["process.name", "powershell.exe", "Process-level pivot field"], ["process.parent.name", "winword.exe", "Parent/child relationship for execution context"], ["threat.technique.id", "T1059, T1027", "ATT&CK mapping for coverage and reporting"], ["rule.name", "Encoded PowerShell From Office", "Detection ownership and tuning"], ["risk_score", "91", "Prioritization and queue ordering"], ]; const aiEvidence = [ { label: "Primary reason", value: "Office spawned PowerShell with encoded command line.", evidence: "process.parent.name=winword.exe, process.name=powershell.exe, process.command_line contains EncodedCommand", }, { label: "Correlated signal", value: "Outbound connection followed within 14 seconds.", evidence: "destination.ip=203.0.113.44, destination.port=443, network.bytes=18472", }, { label: "False-positive check", value: "No matching admin script allowlist or signed automation package.", evidence: "rule.allowlist=false, code_signature.trusted=false, asset.tier=Finance", }, ]; const responseSteps = [ ["01", "Contain", "Isolate FIN-LAP-042 from network; keep EDR live response channel open."], ["02", "Preserve", "Collect process tree, memory snapshot, document hash, and PowerShell transcript."], ["03", "Scope", "Search for same command hash, parent process, destination IP, and user across 24h."], ["04", "Decide", "Escalate to incident if same pattern appears on two or more hosts or privileged accounts."], ]; const sigmaRule = `title: Encoded PowerShell Spawned From Office id: 7f9b1f50-9b5c-4c84-9e18-2a1f7f5b4027 status: test description: Detects Office spawning PowerShell with encoded command content. logsource: product: windows category: process_creation detection: selection_parent: ParentImage|endswith: - "\\\\WINWORD.EXE" - "\\\\EXCEL.EXE" - "\\\\POWERPNT.EXE" selection_child: Image|endswith: "\\\\powershell.exe" CommandLine|contains: - "-EncodedCommand" - "FromBase64String" condition: selection_parent and selection_child fields: - UtcTime - Computer - User - ParentImage - Image - CommandLine falsepositives: - Approved macro administration scripts level: high tags: - attack.execution - attack.defense_evasion - attack.t1059 - attack.t1027`; const rawEvent = `{ "@timestamp": "2026-05-12T13:42:18Z", "event.kind": "alert", "event.category": "process", "event.action": "start", "host.name": "FIN-LAP-042", "user.name": "mira.chen", "process.parent.name": "winword.exe", "process.name": "powershell.exe", "process.command_line": "powershell.exe -NoP -EncodedCommand JAB3AGM...", "source.ip": "10.42.18.55", "destination.ip": "203.0.113.44", "destination.port": 443, "rule.name": "Encoded PowerShell From Office", "risk_score": 91, "threat.technique.id": ["T1059", "T1027"] }`; const huntQuery = `event.category:process AND process.name:powershell.exe AND process.command_line:(*EncodedCommand* OR *FromBase64String*) AND process.parent.name:(winword.exe OR excel.exe OR powerpnt.exe) AND @timestamp >= now-24h`; const labelStyle = { display: "block", fontSize: 12, fontWeight: 700, color: BRAND.ink.body, marginBottom: 7, }; const controlStyle = { width: "100%", minHeight: 42, borderRadius: 8, border: `1px solid ${BRAND.surface.border}`, background: BRAND.surface.card, color: BRAND.ink.body, padding: "9px 11px", fontSize: 14, outline: "none", boxShadow: "0 1px 0 rgba(15,23,42,0.02)", }; const helperStyle = { fontSize: 12, color: BRAND.ink.subtle, lineHeight: 1.5, marginTop: 6, }; const Badge = ({ label, map = severityStyles }) => { const s = map[label] || severityStyles.Info; return ( {label} ); }; const FieldPill = ({ children }) => ( {children} ); return (
AI SIEM / THREAT OPERATIONS

Show the analyst the incident, the evidence, and the next move.

BSIO product surfaces should feel like a precise AI SOC console: compact, evidence-linked, mapped to threat behavior, and useful before anyone reads a paragraph.

{socMetrics.map((m) => (
{m.label}
{m.value}
{m.detail}
))}
AI incident summary RISK 91
Encoded PowerShell launched from Office on FIN-LAP-042

The model links an Office child process, encoded command content, and outbound HTTPS to a rare destination within 14 seconds.

{["T1059", "T1027", "EDR", "Finance"].map((tag) => ( {tag} ))}
{[ ["Host", "FIN-LAP-042"], ["User", "mira.chen"], ["Dest IP", "203.0.113.44"], ["Next", "Isolate host"], ].map((item) => (
{item[0]}
{item[1]}
))}
{languageRules.map((rule, i) => (
{String(i + 1).padStart(2, "0")}
{rule.label}

{rule.body}

 ))}
Threat triage queue
Actual alert rows should include entity, telemetry source, ATT&CK, signal, risk, and action.
{["Severity: Critical + High", "Source: EDR, IdP, Cloud", "Tactic: Execution, Impact", "Status: Open/Triage"].map((item) => ( ))}
{["ID", "Alert", "Severity", "Status", "Entity", "ATT&CK", "Risk"].map((h) => (
{h}
))} {alertRows.map((row, i) => (
{row.id}
{row.title}
{row.signal}
{row.action}
{row.entity}
{row.user}
{row.technique}
90 ? BRAND.semantic.danger : BRAND.primary[500], fontWeight: 700, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{row.risk}
 ))}
Threat hunt setup

Forms should use real analyst vocabulary and security enums, not generic labels like type, category, or item.

Use product and telemetry names analysts recognize.
Technique names should appear with IDs.
Entity inputs accept host, user, service principal, IP, or cloud resource.
Default depends on data cost and investigation urgency.
Focused query examples teach the intended data model.
Dropdown content standard
{[ ["Severity", "Critical, High, Medium, Low, Info"], ["Disposition", "True positive, benign admin, duplicate, expected automation"], ["Confidence", "High, Medium, Low with model and analyst source separated"], ["Entity type", "Host, user, service account, IP, domain, cloud resource"], ["Response", "Contain, collect, block, revoke, escalate, suppress"], ].map((row) => (
{row[0]}

{row[1]}

))}
AI rationale panel

AI content is useful when it gives the analyst a cited reason, a guardrail, and a next action.

{aiEvidence.map((item) => (
{item.label} {item.evidence.split(",")[0]}
{item.value}

{item.evidence}

))}
Response playbook specimen
{responseSteps.map((step) => (
{step[0]}
{step[1]}

{step[2]}

))}
Useful AI output. Show confidence, evidence, uncertainty, and an action that can be accepted or rejected.
Field dictionary example
Use this level of specificity when designing filters, tables, details panels, and exports.
{["Field", "Example value", "Why it matters"].map((h) => (
{h}
))} {fieldRows.map((row, i) => (
{row[0]}
{row[1]}
{row[2]}
 ))}
Detection rule card

Rule surfaces should show what the detection watches, which data source it needs, what it maps to, and how to tune false positives.

{[ ["Rule", "Encoded PowerShell From Office"], ["Log source", "windows / process_creation"], ["Required fields", "ParentImage, Image, CommandLine, User, Computer"], ["ATT&CK", "T1059, T1027"], ["Level", "High"], ["False positives", "Approved macro administration scripts"], ].map((item) => (
{item[0]}
{item[1]}
))}
); }; window.ProductUITab = ProductUITab;