{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "security-incident-timeline",
  "title": "Security Incident Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/security-incident-timeline/SecurityIncidentTimeline.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  FileCheck,\n  FileDown,\n  GitPullRequest,\n  KeyRound,\n  Lock,\n  Plus,\n  Radio,\n  Server,\n  Shield,\n  ShieldAlert,\n  ShieldCheck,\n  Terminal,\n  Users,\n  Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface SecurityIncidentTimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  incidentId?: string\n  incidentTitle?: string\n  severity?: string\n  status?: string\n  commanderName?: string\n  commanderRole?: string\n}\n\nconst logSnippets: Record<string, string> = {\n  detection: `[2026-08-21T14:12:08.104Z] GUARDDUTY_ALERT: UnauthorizedAccess:IAMUser/InstanceCredentialExfiltration.OutsideAWS\nPrincipalId: AROA4491X0921:github-worker-ephemeral-tok_88f9x\nRequestedRole: arn:aws:iam::102938475612:role/SuperAdminPolicy\nSourceIP: 198.51.100.42 (Tor Exit Node AS13335) | UserAgent: aws-cli/2.15.30 Python/3.11.8\nRiskScore: 98/100 | FindingId: gd-find-8891-c0a1-992a | Action: STS:AssumeRoleWithWebIdentity`,\n\n  triage: `[2026-08-21T14:15:30.412Z] INCIDENT_WAR_ROOM_ESTABLISHED: bridge_id=bridge_sec_0842\nIncidentCommander: elena.rostova@acme.corp | Responders: [m.vance, d.okoye, j.chen]\nVectorAnalysis: Ephemeral token tok_88f9x generated in GH Actions workflow run #1049281.\nScopeAssessment: Ingress proxy read cache queried; zero write or database mutation detected.\nEscalationLevel: SEV-1 (Paging IAM + Platform on-call)`,\n\n  containment: `[2026-08-21T14:22:15.890Z] CLOUDFLARE_WAF_ENFORCED: rule_id=sec_block_tor_asn_13335 action=BLOCK\nGatewaysSynced: [apigw-iad-prod-01, apigw-iad-prod-02, apigw-iad-prod-03] (3/3 nodes OK)\nActiveConnectionsDropped: 14 concurrent TCP streams | RateLimit: 0 req/sec allowed from source\nEgressQuarantine: ALL external routes from adversary subnet blackholed.`,\n\n  revocation: `[2026-08-21T14:30:53.002Z] VAULT_REVOCATION_BROADCAST: lease_prefix=auth/token/tok_88f9x leases_revoked=38\nKMS_KEY_ROTATED: arn:aws:kms:us-east-1:102938475612:key/cmk-gateway-signing-02 -> key_version_v3\nRedisClusterBroadcast: AUTH_CACHE_PURGE_SUCCESS (12/12 shards synchronized in 84ms)\nTokenVerificationState: REVOCATION_COMPLETE (0 surviving tokens)`,\n\n  postmortem: `[2026-08-21T14:48:00.651Z] SOC_AUDIT_SWEEP: duration=15m00s | unauthorized_calls=0 | perimeter_status=NOMINAL\nIncidentStatusTransition: SEV-1_ACTIVE -> MITIGATED_POST_MORTEM\nForensicsArchive: s3://sec-incident-vault-us-east-1/incidents/2026-0842/evidence_bundle.tar.gz.enc\nEvidenceSignOff: [m.vance, e.rostova] | Hash: sha256:7f83b1657ff1fc53b92dc18148a1d65`,\n}\n\nexport function SecurityIncidentTimeline({\n  incidentId = '#SEC-INC-2026-0842',\n  incidentTitle = 'Unauthorized API Token Elevation Attempt',\n  severity = 'SEV-1 Critical',\n  status = 'Mitigated / In Post-Mortem',\n  commanderName = 'Marcus Vance',\n  commanderRole = 'Principal SecOps · Incident Commander',\n  className,\n  ...props\n}: SecurityIncidentTimelineProps) {\n  const [isResolved, setIsResolved] = React.useState(false)\n  const [exportNotification, setExportNotification] = React.useState(false)\n  const [updateAddedNotification, setUpdateAddedNotification] = React.useState(false)\n  const [copiedSnippetId, setCopiedSnippetId] = React.useState<string | null>(null)\n\n  const [actionItem1, setActionItem1] = React.useState(true)\n  const [actionItem2, setActionItem2] = React.useState(true)\n  const [actionItem3, setActionItem3] = React.useState(false)\n\n  const copySnippet = (id: string) => {\n    const text = logSnippets[id]\n    if (!text) return\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(text)\n      setCopiedSnippetId(id)\n      setTimeout(() => {\n        setCopiedSnippetId((prev) => (prev === id ? null : prev))\n      }, 2000)\n    }\n  }\n\n  const handleExportPdf = () => {\n    setExportNotification(true)\n    setTimeout(() => {\n      setExportNotification(false)\n    }, 2500)\n  }\n\n  const handleAddUpdate = () => {\n    setUpdateAddedNotification(true)\n    setTimeout(() => {\n      setUpdateAddedNotification(false)\n    }, 2500)\n  }\n\n  const handleResolve = () => {\n    setIsResolved((prev) => !prev)\n  }\n\n  return (\n    <div data-slot=\"security-incident-timeline\" className={cn('w-full space-y-6', className)} {...props}>\n      {/* 1. Incident Header Card */}\n      <Card className=\"border-border shadow-xs\">\n        <CardHeader className=\"space-y-4\">\n          <div className=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n            <div className=\"space-y-2\">\n              {/* Badge Metadata Bar */}\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Badge variant=\"outline\" className=\"font-mono text-xs font-semibold tracking-wider\">\n                  {incidentId}\n                </Badge>\n\n                {/* Severity Badge with Pulsing Red Dot */}\n                <Badge variant=\"destructive\" className=\"gap-1.5 font-mono text-xs font-semibold uppercase\">\n                  <span className=\"relative flex size-2 shrink-0\">\n                    <span className=\"bg-destructive absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                    <span className=\"relative inline-flex size-2 rounded-full bg-white\" />\n                  </span>\n                  {severity}\n                </Badge>\n\n                {/* Status Badge */}\n                {!isResolved ? (\n                  <Badge variant=\"warning\" className=\"gap-1.5 font-mono text-xs font-semibold\">\n                    <span className=\"bg-warning size-2 rounded-full\" />\n                    {status}\n                  </Badge>\n                ) : (\n                  <Badge variant=\"success\" className=\"gap-1.5 font-mono text-xs font-semibold\">\n                    <span className=\"bg-success size-2 rounded-full\" />\n                    Resolved · Closed\n                  </Badge>\n                )}\n\n                <span className=\"text-muted-foreground text-xs font-medium\">\n                  Region: <span className=\"text-foreground font-mono\">us-east-1 (N. Virginia)</span>\n                </span>\n              </div>\n\n              {/* Title & Description */}\n              <div className=\"space-y-1\">\n                <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">{incidentTitle}</h1>\n                <p className=\"text-muted-foreground text-sm\">\n                  Adversarial AWS STS role assumption anomaly flagged across external ingress gateways. Compromised\n                  ephemeral CI/CD workflow token quarantined and revoked in 18 minutes.\n                </p>\n              </div>\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Button\n                aria-label=\"Dismiss notification\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-9 gap-1.5 text-xs\"\n                onClick={handleExportPdf}\n              >\n                {exportNotification ? (\n                  <Check className=\"text-success size-3.5\" aria-hidden=\"true\" />\n                ) : (\n                  <FileDown className=\"size-3.5\" aria-hidden=\"true\" />\n                )}\n                <span>{exportNotification ? 'Exporting PDF...' : 'Export Incident Report PDF'}</span>\n              </Button>\n\n              <Button variant=\"outline\" size=\"sm\" className=\"h-9 gap-1.5 text-xs\" onClick={handleAddUpdate}>\n                {updateAddedNotification ? (\n                  <Check className=\"text-success size-3.5\" aria-hidden=\"true\" />\n                ) : (\n                  <Plus className=\"size-3.5\" aria-hidden=\"true\" />\n                )}\n                <span>{updateAddedNotification ? 'Draft Created' : 'Add Timeline Update'}</span>\n              </Button>\n\n              <Button\n                variant={isResolved ? 'outline' : 'default'}\n                size=\"sm\"\n                className=\"h-9 gap-1.5 text-xs font-medium\"\n                onClick={handleResolve}\n              >\n                <ShieldCheck className=\"size-3.5\" aria-hidden=\"true\" />\n                <span>{isResolved ? 'Re-open Incident' : 'Resolve Incident'}</span>\n              </Button>\n            </div>\n          </div>\n\n          <Separator />\n\n          {/* Commander & Forensics Meta Strip */}\n          <div className=\"grid grid-cols-1 gap-4 text-xs sm:grid-cols-2 lg:grid-cols-4\">\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-9 border\">\n                <AvatarImage src=\"https://i.pravatar.cc/72?img=60\" alt=\"Marcus Vance\" />\n                <AvatarFallback className=\"bg-primary/10 text-primary font-semibold\">MV</AvatarFallback>\n              </Avatar>\n              <div className=\"min-w-0\">\n                <p className=\"text-muted-foreground text-xs font-medium\">Incident Commander</p>\n                <p className=\"text-foreground truncate text-sm font-semibold\">{commanderName}</p>\n                <p className=\"text-muted-foreground truncate text-xs\">{commanderRole}</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-1\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Detection Trigger</p>\n              <p className=\"text-foreground font-mono text-xs font-semibold\">GuardDuty · IAM.Anomaly.STS</p>\n              <p className=\"text-muted-foreground text-xs\">2026-08-21 14:12:08 UTC</p>\n            </div>\n\n            <div className=\"space-y-1\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Threat Vector & Origin</p>\n              <p className=\"text-foreground font-mono text-xs font-semibold\">198.51.100.42 (Tor Exit Node)</p>\n              <p className=\"text-muted-foreground text-xs\">AS13335 · Ephemeral OIDC Leak</p>\n            </div>\n\n            <div className=\"space-y-1\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Incident War Room</p>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"relative flex size-2 shrink-0\">\n                  <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                <p className=\"text-foreground font-mono text-xs font-semibold\">#bridge-sec-0842</p>\n                <Badge variant=\"outline\" className=\"text-xs\">\n                  4 Responders\n                </Badge>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">Bridge active · PagerDuty Sync</p>\n            </div>\n          </div>\n        </CardHeader>\n      </Card>\n\n      {/* 2. 4 Incident KPI Telemetry Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* Card 1: Time to Detect */}\n        <Card className=\"border-border shadow-xs\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Time to Detect (TTD)</p>\n              <div className=\"border-warning/20 bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg border\">\n                <Clock className=\"size-4\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight\">4m 12s</div>\n              <p className=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n                <CheckCircle2 className=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>Automated GuardDuty alert fired</span>\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 2: Time to Mitigate */}\n        <Card className=\"border-border shadow-xs\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Time to Mitigate (TTM)</p>\n              <div className=\"border-destructive/20 bg-destructive/10 text-destructive flex size-8 items-center justify-center rounded-lg border\">\n                <Zap className=\"size-4\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight\">18m 45s</div>\n              <p className=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n                <CheckCircle2 className=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>Full perimeter isolation & rotation</span>\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 3: Affected Resources */}\n        <Card className=\"border-border shadow-xs\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Affected Resources</p>\n              <div className=\"border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-lg border\">\n                <Server className=\"size-4\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight\">3 Gateways</div>\n              <p className=\"text-muted-foreground mt-1 flex items-center gap-1 font-mono text-xs\">\n                <span>apigw-iad-prod-[01..03]</span>\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 4: Impacted User Accounts */}\n        <Card className=\"border-border shadow-xs\">\n          <CardContent className=\"p-4\">\n            <div className=\"flex items-center justify-between\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Impacted User Accounts</p>\n              <div className=\"border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-lg border\">\n                <Users className=\"size-4\" aria-hidden=\"true\" />\n              </div>\n            </div>\n            <div className=\"mt-2\">\n              <div className=\"text-success font-mono text-2xl font-bold tracking-tight\">0 Compromised</div>\n              <p className=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n                <ShieldCheck className=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>0 compromise confirmed · Token revoked</span>\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* 3. Incident Timeline (Vertical Connected Stream) */}\n      <Card className=\"border-border shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle className=\"text-lg font-bold\">Incident Response Timeline</CardTitle>\n              <CardDescription className=\"text-xs\">\n                Chronological audit trail of SOC telemetry, containment actions, and mitigation milestones.\n              </CardDescription>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                5 Timeline Events · UTC Synchronized\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"pt-2\">\n          <div className=\"before:bg-border relative space-y-8 pl-6 before:absolute before:top-3 before:bottom-3 before:left-3 before:w-px sm:pl-8 sm:before:left-4\">\n            {/* Timeline Entry 1: Detection */}\n            <div className=\"relative space-y-3\">\n              {/* Node Marker */}\n              <div className=\"bg-card ring-background border-destructive/40 absolute -left-6 flex size-7 items-center justify-center rounded-full border shadow-xs ring-4 sm:-left-8 sm:size-8\">\n                <ShieldAlert className=\"text-destructive size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\n              {/* Header Row */}\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:12:08Z</span>\n                  <Badge variant=\"destructive\" className=\"font-mono text-xs uppercase\">\n                    1. Detection\n                  </Badge>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    T+00:00\n                  </Badge>\n                  <h3 className=\"text-foreground text-sm font-semibold\">Automated Detection & Anomaly Ingestion</h3>\n                </div>\n\n                {/* Investigator Avatar & Name */}\n                <div className=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <Avatar className=\"size-5\">\n                    <AvatarImage src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                    <AvatarFallback className=\"text-xs\">MV</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Marcus Vance</span>\n                  <span className=\"text-muted-foreground text-xs\">(SecOps Lead)</span>\n                </div>\n              </div>\n\n              {/* Action Taken Narrative */}\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-foreground font-medium\">Action Taken:</p>\n                <p className=\"text-muted-foreground leading-relaxed\">\n                  AWS GuardDuty anomaly engine flagged an unauthorized STS AssumeRole policy elevation request targeting\n                  <code className=\"text-foreground bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">\n                    role/SuperAdminPolicy\n                  </code>\n                  from an unapproved Tor exit node. Ingestion webhook routed alert to PagerDuty SecOps on-call.\n                </p>\n              </div>\n\n              {/* System Log Output Snippet Box */}\n              <div className=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                <div className=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Terminal className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground text-xs\">guardduty_alert_stream.log</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    className=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                    onClick={() => copySnippet('detection')}\n                  >\n                    {copiedSnippetId === 'detection' ? (\n                      <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedSnippetId === 'detection' ? 'Copied' : 'Copy Snippet'}</span>\n                  </Button>\n                </div>\n                <pre className=\"text-destructive/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\">\n                  <code>{logSnippets.detection}</code>\n                </pre>\n              </div>\n\n              {/* Mitigation Notes Callout */}\n              <div className=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n                <span className=\"text-foreground font-semibold\">Mitigation Notes: </span>\n                <span className=\"text-muted-foreground\">\n                  Perimeter rate-limiting threshold exceeded (52 req/s). SIEM correlated 4 duplicate elevation\n                  signatures across edge ingress gateways.\n                </span>\n              </div>\n            </div>\n\n            {/* Timeline Entry 2: Triage */}\n            <div className=\"relative space-y-3\">\n              {/* Node Marker */}\n              <div className=\"bg-card ring-background border-warning/40 absolute -left-6 flex size-7 items-center justify-center rounded-full border shadow-xs ring-4 sm:-left-8 sm:size-8\">\n                <Radio className=\"text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\n              {/* Header Row */}\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:15:30Z</span>\n                  <Badge variant=\"warning\" className=\"font-mono text-xs uppercase\">\n                    2. Triage\n                  </Badge>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    T+03:22\n                  </Badge>\n                  <h3 className=\"text-foreground text-sm font-semibold\">SOC Triage & Incident War Room Assembly</h3>\n                </div>\n\n                {/* Investigator Avatar & Name */}\n                <div className=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <Avatar className=\"size-5\">\n                    <AvatarImage src=\"https://i.pravatar.cc/60?img=47\" alt=\"Elena Rostova\" />\n                    <AvatarFallback className=\"text-xs\">ER</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Elena Rostova</span>\n                  <span className=\"text-muted-foreground text-xs\">(Incident Commander)</span>\n                </div>\n              </div>\n\n              {/* Action Taken Narrative */}\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-foreground font-medium\">Action Taken:</p>\n                <p className=\"text-muted-foreground leading-relaxed\">\n                  PagerDuty SEV-1 broadcast dispatched. Assembled SecOps, IAM, and Core Infrastructure leads in primary\n                  war room. Traced origin token{' '}\n                  <code className=\"text-foreground bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">tok_88f9x</code> to\n                  an ephemeral CI/CD GitHub Actions runner.\n                </p>\n              </div>\n\n              {/* System Log Output Snippet Box */}\n              <div className=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                <div className=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Terminal className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground text-xs\">war_room_triage_audit.log</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    className=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                    onClick={() => copySnippet('triage')}\n                  >\n                    {copiedSnippetId === 'triage' ? (\n                      <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedSnippetId === 'triage' ? 'Copied' : 'Copy Snippet'}</span>\n                  </Button>\n                </div>\n                <pre className=\"text-warning/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\">\n                  <code>{logSnippets.triage}</code>\n                </pre>\n              </div>\n\n              {/* Mitigation Notes Callout */}\n              <div className=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n                <span className=\"text-foreground font-semibold\">Mitigation Notes: </span>\n                <span className=\"text-muted-foreground\">\n                  Confirmed unauthorized token attempt was using leaked CI/CD ephemeral workflow credential tok_88f9x.\n                  Scope bounded strictly to read-only API gateway routing.\n                </span>\n              </div>\n            </div>\n\n            {/* Timeline Entry 3: Containment */}\n            <div className=\"relative space-y-3\">\n              {/* Node Marker */}\n              <div className=\"bg-card ring-background border-warning/40 absolute -left-6 flex size-7 items-center justify-center rounded-full border shadow-xs ring-4 sm:-left-8 sm:size-8\">\n                <Lock className=\"text-warning text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\n              {/* Header Row */}\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:22:15Z</span>\n                  <Badge variant=\"warning\" className=\"font-mono text-xs uppercase\">\n                    3. Containment\n                  </Badge>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    T+10:07\n                  </Badge>\n                  <h3 className=\"text-foreground text-sm font-semibold\">Perimeter Quarantine & Traffic Blackholing</h3>\n                </div>\n\n                {/* Investigator Avatar & Name */}\n                <div className=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <Avatar className=\"size-5\">\n                    <AvatarImage src=\"https://i.pravatar.cc/60?img=33\" alt=\"David Okoye\" />\n                    <AvatarFallback className=\"text-xs\">DO</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">David Okoye</span>\n                  <span className=\"text-muted-foreground text-xs\">(Network Security)</span>\n                </div>\n              </div>\n\n              {/* Action Taken Narrative */}\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-foreground font-medium\">Action Taken:</p>\n                <p className=\"text-muted-foreground leading-relaxed\">\n                  Cloudflare WAF dynamic block rule enforced for egress IP ASN block (AS13335). Automated session kill\n                  command dispatched across all 3 production ingress proxy gateway clusters.\n                </p>\n              </div>\n\n              {/* System Log Output Snippet Box */}\n              <div className=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                <div className=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Terminal className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground text-xs\">perimeter_waf_quarantine.log</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    className=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                    onClick={() => copySnippet('containment')}\n                  >\n                    {copiedSnippetId === 'containment' ? (\n                      <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedSnippetId === 'containment' ? 'Copied' : 'Copy Snippet'}</span>\n                  </Button>\n                </div>\n                <pre className=\"text-warning/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\">\n                  <code>{logSnippets.containment}</code>\n                </pre>\n              </div>\n\n              {/* Mitigation Notes Callout */}\n              <div className=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n                <span className=\"text-foreground font-semibold\">Mitigation Notes: </span>\n                <span className=\"text-muted-foreground\">\n                  Ingress gateways returned HTTP 403 Forbidden. External traffic from adversarial IP ranges suppressed\n                  with 0 packet leak into VPC internal mesh.\n                </span>\n              </div>\n            </div>\n\n            {/* Timeline Entry 4: Token Revocation */}\n            <div className=\"relative space-y-3\">\n              {/* Node Marker */}\n              <div className=\"bg-card ring-background border-info/40 absolute -left-6 flex size-7 items-center justify-center rounded-full border shadow-xs ring-4 sm:-left-8 sm:size-8\">\n                <KeyRound className=\"text-info size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\n              {/* Header Row */}\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:30:53Z</span>\n                  <Badge variant=\"info\" className=\"font-mono text-xs uppercase\">\n                    4. Token Revocation\n                  </Badge>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    T+18:45\n                  </Badge>\n                  <h3 className=\"text-foreground text-sm font-semibold\">\n                    Cryptographic Credential Invalidation & Key Rotation\n                  </h3>\n                </div>\n\n                {/* Investigator Avatar & Name */}\n                <div className=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <Avatar className=\"size-5\">\n                    <AvatarImage src=\"https://i.pravatar.cc/60?img=32\" alt=\"Jessica Chen\" />\n                    <AvatarFallback className=\"text-xs\">JC</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Jessica Chen</span>\n                  <span className=\"text-muted-foreground text-xs\">(IAM Engineering)</span>\n                </div>\n              </div>\n\n              {/* Action Taken Narrative */}\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-foreground font-medium\">Action Taken:</p>\n                <p className=\"text-muted-foreground leading-relaxed\">\n                  Revoked compromised GitHub Actions OIDC token series in AWS IAM & HashiCorp Vault. Rotated parent\n                  cluster KMS gateway signing keys and flushed authentication verification caches across Redis mesh.\n                </p>\n              </div>\n\n              {/* System Log Output Snippet Box */}\n              <div className=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                <div className=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Terminal className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground text-xs\">vault_revocation_kms_rotation.log</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    className=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                    onClick={() => copySnippet('revocation')}\n                  >\n                    {copiedSnippetId === 'revocation' ? (\n                      <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedSnippetId === 'revocation' ? 'Copied' : 'Copy Snippet'}</span>\n                  </Button>\n                </div>\n                <pre className=\"text-info/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\">\n                  <code>{logSnippets.revocation}</code>\n                </pre>\n              </div>\n\n              {/* Mitigation Notes Callout */}\n              <div className=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n                <span className=\"text-foreground font-semibold\">Mitigation Notes: </span>\n                <span className=\"text-muted-foreground\">\n                  All downstream JWT verification caches invalidated via Redis Pub/Sub broadcast in 84ms. Zero active\n                  token survivability confirmed.\n                </span>\n              </div>\n            </div>\n\n            {/* Timeline Entry 5: Post-Mortem Action Items */}\n            <div className=\"relative space-y-3\">\n              {/* Node Marker */}\n              <div className=\"bg-card ring-background border-success/40 absolute -left-6 flex size-7 items-center justify-center rounded-full border shadow-xs ring-4 sm:-left-8 sm:size-8\">\n                <ShieldCheck className=\"text-success size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\n              {/* Header Row */}\n              <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:48:00Z</span>\n                  <Badge variant=\"success\" className=\"font-mono text-xs uppercase\">\n                    5. Post-Mortem Action Items\n                  </Badge>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    T+35:52\n                  </Badge>\n                  <h3 className=\"text-foreground text-sm font-semibold\">\n                    Threat Vector Neutralized & Post-Mortem Transition\n                  </h3>\n                </div>\n\n                {/* Investigator Avatar & Name */}\n                <div className=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <Avatar className=\"size-5\">\n                    <AvatarImage src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                    <AvatarFallback className=\"text-xs\">MV</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Marcus Vance</span>\n                  <span className=\"text-muted-foreground text-xs\">(SecOps Lead)</span>\n                </div>\n              </div>\n\n              {/* Action Taken Narrative */}\n              <div className=\"space-y-1 text-xs\">\n                <p className=\"text-foreground font-medium\">Action Taken:</p>\n                <p className=\"text-muted-foreground leading-relaxed\">\n                  Completed 15-minute clean traffic audit sweep with 0 anomalous requests. Incident commander officially\n                  downgraded active SEV-1 to Mitigated status and initiated formal post-mortem action items.\n                </p>\n              </div>\n\n              {/* System Log Output Snippet Box */}\n              <div className=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                <div className=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Terminal className=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground text-xs\">post_incident_audit_sweep.log</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    className=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                    onClick={() => copySnippet('postmortem')}\n                  >\n                    {copiedSnippetId === 'postmortem' ? (\n                      <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedSnippetId === 'postmortem' ? 'Copied' : 'Copy Snippet'}</span>\n                  </Button>\n                </div>\n                <pre className=\"text-success/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\">\n                  <code>{logSnippets.postmortem}</code>\n                </pre>\n              </div>\n\n              {/* Mitigation Notes Callout */}\n              <div className=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n                <span className=\"text-foreground font-semibold\">Mitigation Notes: </span>\n                <span className=\"text-muted-foreground\">\n                  Post-incident evidence bundle archived to secure S3 vault bucket{' '}\n                  <code className=\"text-foreground bg-muted rounded px-1 font-mono text-xs\">\n                    s3://sec-incidents-2026/0842-audit.tar.gz.enc\n                  </code>\n                  . Remediation tasks assigned.\n                </span>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* 4. Root Cause & Corrective Action Items Card */}\n      <Card className=\"border-border shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center gap-2\">\n                <FileCheck className=\"text-primary size-5\" aria-hidden=\"true\" />\n                <CardTitle className=\"text-lg font-bold\">Root Cause Analysis & Corrective Action Items</CardTitle>\n              </div>\n              <CardDescription className=\"text-xs\">\n                3 actionable remediation tasks tracked across Jira and GitHub to prevent recurring authorization bypass\n                vectors.\n              </CardDescription>\n            </div>\n            <Badge variant=\"outline\" className=\"w-fit font-mono text-xs\">\n              3 Post-Mortem Tasks\n            </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"space-y-4\">\n          {/* Root Cause Summary Box */}\n          <div className=\"bg-muted/30 border-border space-y-1.5 rounded-lg border p-3.5 text-xs\">\n            <div className=\"text-foreground flex items-center gap-2 font-semibold\">\n              <Shield className=\"text-warning size-4\" aria-hidden=\"true\" />\n              <span>Root Cause Summary</span>\n            </div>\n            <p className=\"text-muted-foreground leading-relaxed\">\n              A third-party fork pull request executed via a workflow using{' '}\n              <code className=\"text-foreground bg-muted rounded px-1 py-0.5 font-mono\">pull_request_target</code>{' '}\n              allowed unauthorized extraction of the short-lived CI OIDC token. AWS STS role trust policy lacked strict{' '}\n              <code className=\"text-foreground bg-muted rounded px-1 py-0.5 font-mono\">repository_owner</code> and{' '}\n              <code className=\"text-foreground bg-muted rounded px-1 py-0.5 font-mono\">ref</code> claim constraints.\n            </p>\n          </div>\n\n          {/* Task List Items */}\n          <div className=\"border-border divide-border divide-y rounded-lg border\">\n            {/* Task 1 */}\n            <div className=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"pt-0.5\">\n                  <Checkbox\n                    id=\"task-react-sec-4412\"\n                    checked={actionItem1}\n                    onCheckedChange={(checked) => setActionItem1(checked === true)}\n                  />\n                </div>\n                <div className=\"space-y-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <label\n                      htmlFor=\"task-react-sec-4412\"\n                      className={cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem1 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )}\n                    >\n                      SEC-4412\n                    </label>\n                    <Badge variant=\"destructive\" className=\"font-mono text-xs\">\n                      P0 Blocker\n                    </Badge>\n                    <Badge variant=\"warning\" className=\"font-mono text-xs\">\n                      In Review\n                    </Badge>\n                  </div>\n                  <p\n                    className={cn(\n                      'text-xs font-medium',\n                      actionItem1 ? 'text-muted-foreground line-through' : 'text-foreground',\n                    )}\n                  >\n                    Enforce strict OIDC branch-to-role binding with repository claim validation on CI runner STS\n                    policies\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Require <code className=\"font-mono text-xs\">repository_owner=uipkge</code> and{' '}\n                    <code className=\"font-mono text-xs\">ref=refs/heads/main</code> on all assumed cloud roles.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n                <div className=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                  <Avatar className=\"size-4\">\n                    <AvatarImage src=\"https://i.pravatar.cc/50?img=32\" alt=\"Jessica Chen\" />\n                    <AvatarFallback className=\"text-xs\">JC</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Jessica Chen</span>\n                </div>\n                <Badge variant=\"outline\" className=\"gap-1 font-mono text-xs\">\n                  <GitPullRequest className=\"size-3\" aria-hidden=\"true\" />\n                  PR #882\n                </Badge>\n              </div>\n            </div>\n\n            {/* Task 2 */}\n            <div className=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"pt-0.5\">\n                  <Checkbox\n                    id=\"task-react-sec-4413\"\n                    checked={actionItem2}\n                    onCheckedChange={(checked) => setActionItem2(checked === true)}\n                  />\n                </div>\n                <div className=\"space-y-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <label\n                      htmlFor=\"task-react-sec-4413\"\n                      className={cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem2 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )}\n                    >\n                      SEC-4413\n                    </label>\n                    <Badge variant=\"warning\" className=\"font-mono text-xs\">\n                      P1 High\n                    </Badge>\n                    <Badge variant=\"success\" className=\"font-mono text-xs\">\n                      Completed\n                    </Badge>\n                  </div>\n                  <p\n                    className={cn(\n                      'text-xs font-medium',\n                      actionItem2 ? 'text-muted-foreground line-through' : 'text-foreground',\n                    )}\n                  >\n                    Reduce default ephemeral CI token TTL from 3600s to 900s across all GitHub Actions deployment\n                    workflows\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Update HashiCorp Vault AWS secrets engine configuration and OIDC provider default duration.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n                <div className=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                  <Avatar className=\"size-4\">\n                    <AvatarImage src=\"https://i.pravatar.cc/50?img=33\" alt=\"David Okoye\" />\n                    <AvatarFallback className=\"text-xs\">DO</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">David Okoye</span>\n                </div>\n                <Badge variant=\"outline\" className=\"gap-1 font-mono text-xs\">\n                  Deployed v4.18.2\n                </Badge>\n              </div>\n            </div>\n\n            {/* Task 3 */}\n            <div className=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"pt-0.5\">\n                  <Checkbox\n                    id=\"task-react-sec-4414\"\n                    checked={actionItem3}\n                    onCheckedChange={(checked) => setActionItem3(checked === true)}\n                  />\n                </div>\n                <div className=\"space-y-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <label\n                      htmlFor=\"task-react-sec-4414\"\n                      className={cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem3 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )}\n                    >\n                      SEC-4414\n                    </label>\n                    <Badge variant=\"warning\" className=\"font-mono text-xs\">\n                      P1 High\n                    </Badge>\n                    <Badge variant=\"info\" className=\"font-mono text-xs\">\n                      In Progress\n                    </Badge>\n                  </div>\n                  <p\n                    className={cn(\n                      'text-xs font-medium',\n                      actionItem3 ? 'text-muted-foreground line-through' : 'text-foreground',\n                    )}\n                  >\n                    Implement automated SIEM quarantine webhook to auto-revoke Vault tokens upon GuardDuty high-severity\n                    finding\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Deploy AWS EventBridge rule to pipe GuardDuty high-severity IAM alerts directly to Lambda quarantine\n                    webhook.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n                <div className=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                  <Avatar className=\"size-4\">\n                    <AvatarImage src=\"https://i.pravatar.cc/50?img=60\" alt=\"Marcus Vance\" />\n                    <AvatarFallback className=\"text-xs\">MV</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-foreground font-medium\">Marcus Vance</span>\n                </div>\n                <Badge variant=\"outline\" className=\"gap-1 font-mono text-xs\">\n                  Sprint 34 · Aug 28\n                </Badge>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/SecurityIncidentTimeline.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/checkbox.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Security Operations Center (SOC) incident response timeline and post-mortem tracker with telemetry KPIs, chronological audit trail, log snippets, and corrective action items.",
  "categories": [
    "security",
    "app",
    "devops"
  ]
}