{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "security-incident-timeline",
  "title": "Security Incident Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/security-incident-timeline/SecurityIncidentTimeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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\ninterface Props {\n  incidentId?: string\n  incidentTitle?: string\n  severity?: string\n  status?: string\n  commanderName?: string\n  commanderRole?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\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})\n\nconst isResolved = ref(false)\nconst exportNotification = ref(false)\nconst copiedSnippetId = ref<string | null>(null)\nconst updateAddedNotification = ref(false)\n\nconst actionItem1 = ref(true)\nconst actionItem2 = ref(true)\nconst actionItem3 = ref(false)\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\nfunction 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    copiedSnippetId.value = id\n    setTimeout(() => {\n      if (copiedSnippetId.value === id) {\n        copiedSnippetId.value = null\n      }\n    }, 2000)\n  }\n}\n\nfunction handleExportPdf() {\n  exportNotification.value = true\n  setTimeout(() => {\n    exportNotification.value = false\n  }, 2500)\n}\n\nfunction handleAddUpdate() {\n  updateAddedNotification.value = true\n  setTimeout(() => {\n    updateAddedNotification.value = false\n  }, 2500)\n}\n\nfunction handleResolve() {\n  isResolved.value = !isResolved.value\n}\n</script>\n\n<template>\n  <div data-slot=\"security-incident-timeline\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- 1. Incident Header Card -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"space-y-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n          <div class=\"space-y-2\">\n            <!-- Badge Metadata Bar -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"font-mono text-xs font-semibold tracking-wider\">\n                {{ props.incidentId }}\n              </Badge>\n\n              <!-- Severity Badge with Pulsing Red Dot -->\n              <Badge variant=\"destructive\" class=\"gap-1.5 font-mono text-xs font-semibold uppercase\">\n                <span class=\"relative flex size-2 shrink-0\">\n                  <span class=\"bg-destructive absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"relative inline-flex size-2 rounded-full bg-white\" />\n                </span>\n                {{ props.severity }}\n              </Badge>\n\n              <!-- Status Badge -->\n              <Badge v-if=\"!isResolved\" variant=\"warning\" class=\"gap-1.5 font-mono text-xs font-semibold\">\n                <span class=\"bg-warning size-2 rounded-full\" />\n                {{ props.status }}\n              </Badge>\n              <Badge v-else variant=\"success\" class=\"gap-1.5 font-mono text-xs font-semibold\">\n                <span class=\"bg-success size-2 rounded-full\" />\n                Resolved · Closed\n              </Badge>\n\n              <span class=\"text-muted-foreground text-xs font-medium\">\n                Region: <span class=\"text-foreground font-mono\">us-east-1 (N. Virginia)</span>\n              </span>\n            </div>\n\n            <!-- Title & Description -->\n            <div class=\"space-y-1\">\n              <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n                {{ props.incidentTitle }}\n              </h1>\n              <p class=\"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 class=\"flex flex-wrap items-center gap-2\">\n            <Button\n              aria-label=\"Dismiss notification\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-9 gap-1.5 text-xs\"\n              @click=\"handleExportPdf\"\n            >\n              <Check v-if=\"exportNotification\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              <FileDown v-else class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>{{ exportNotification ? 'Exporting PDF...' : 'Export Incident Report PDF' }}</span>\n            </Button>\n\n            <Button variant=\"outline\" size=\"sm\" class=\"h-9 gap-1.5 text-xs\" @click=\"handleAddUpdate\">\n              <Check v-if=\"updateAddedNotification\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              <Plus v-else class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>{{ updateAddedNotification ? 'Draft Created' : 'Add Timeline Update' }}</span>\n            </Button>\n\n            <Button\n              :variant=\"isResolved ? 'outline' : 'default'\"\n              size=\"sm\"\n              class=\"h-9 gap-1.5 text-xs font-medium\"\n              @click=\"handleResolve\"\n            >\n              <ShieldCheck class=\"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 class=\"grid grid-cols-1 gap-4 text-xs sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"flex items-center gap-3\">\n            <Avatar class=\"size-9 border\">\n              <AvatarImage src=\"https://i.pravatar.cc/72?img=60\" alt=\"Marcus Vance\" />\n              <AvatarFallback class=\"bg-primary/10 text-primary font-semibold\">MV</AvatarFallback>\n            </Avatar>\n            <div class=\"min-w-0\">\n              <p class=\"text-muted-foreground text-xs font-medium\">Incident Commander</p>\n              <p class=\"text-foreground truncate text-sm font-semibold\">{{ props.commanderName }}</p>\n              <p class=\"text-muted-foreground truncate text-xs\">{{ props.commanderRole }}</p>\n            </div>\n          </div>\n\n          <div class=\"space-y-1\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Detection Trigger</p>\n            <p class=\"text-foreground font-mono text-xs font-semibold\">GuardDuty · IAM.Anomaly.STS</p>\n            <p class=\"text-muted-foreground text-xs\">2026-08-21 14:12:08 UTC</p>\n          </div>\n\n          <div class=\"space-y-1\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Threat Vector & Origin</p>\n            <p class=\"text-foreground font-mono text-xs font-semibold\">198.51.100.42 (Tor Exit Node)</p>\n            <p class=\"text-muted-foreground text-xs\">AS13335 · Ephemeral OIDC Leak</p>\n          </div>\n\n          <div class=\"space-y-1\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Incident War Room</p>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"relative flex size-2 shrink-0\">\n                <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n              </span>\n              <p class=\"text-foreground font-mono text-xs font-semibold\">#bridge-sec-0842</p>\n              <Badge variant=\"outline\" class=\"text-xs\">4 Responders</Badge>\n            </div>\n            <p class=\"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 class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Time to Detect -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Time to Detect (TTD)</p>\n            <div\n              class=\"border-warning/20 bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <Clock class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">4m 12s</div>\n            <p class=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n              <CheckCircle2 class=\"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 class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Time to Mitigate (TTM)</p>\n            <div\n              class=\"border-destructive/20 bg-destructive/10 text-destructive flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <Zap class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">18m 45s</div>\n            <p class=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n              <CheckCircle2 class=\"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 class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Affected Resources</p>\n            <div class=\"border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-lg border\">\n              <Server class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">3 Gateways</div>\n            <p class=\"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 class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Impacted User Accounts</p>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <Users class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <div class=\"text-success font-mono text-2xl font-bold tracking-tight\">0 Compromised</div>\n            <p class=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n              <ShieldCheck class=\"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 class=\"border-border shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-lg font-bold\">Incident Response Timeline</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Chronological audit trail of SOC telemetry, containment actions, and mitigation milestones.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" class=\"font-mono text-xs\"> 5 Timeline Events · UTC Synchronized </Badge>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"pt-2\">\n        <div\n          class=\"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        >\n          <!-- Timeline Entry 1: Detection -->\n          <div class=\"relative space-y-3\">\n            <!-- Node Marker -->\n            <div\n              class=\"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            >\n              <ShieldAlert class=\"text-destructive size-3.5 sm:size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <!-- Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:12:08Z</span>\n                <Badge variant=\"destructive\" class=\"font-mono text-xs uppercase\"> 1. Detection </Badge>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\"> T+00:00 </Badge>\n                <h3 class=\"text-foreground text-sm font-semibold\">Automated Detection & Anomaly Ingestion</h3>\n              </div>\n\n              <!-- Investigator Avatar & Name -->\n              <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                <Avatar class=\"size-5\">\n                  <AvatarImage src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                  <AvatarFallback class=\"text-xs\">MV</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Marcus Vance</span>\n                <span class=\"text-muted-foreground text-xs\">(SecOps Lead)</span>\n              </div>\n            </div>\n\n            <!-- Action Taken Narrative -->\n            <div class=\"space-y-1 text-xs\">\n              <p class=\"text-foreground font-medium\">Action Taken:</p>\n              <p class=\"text-muted-foreground leading-relaxed\">\n                AWS GuardDuty anomaly engine flagged an unauthorized STS AssumeRole policy elevation request targeting\n                <code class=\"text-foreground bg-muted rounded px-1.5 py-0.5 font-mono text-xs\"\n                  >role/SuperAdminPolicy</code\n                >\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 class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                <div class=\"flex items-center gap-2\">\n                  <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground text-xs\">guardduty_alert_stream.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copySnippet('detection')\"\n                >\n                  <Check v-if=\"copiedSnippetId === 'detection'\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ copiedSnippetId === 'detection' ? 'Copied' : 'Copy Snippet' }}</span>\n                </Button>\n              </div>\n              <pre\n                class=\"text-destructive/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\"\n              ><code>{{ logSnippets.detection }}</code></pre>\n            </div>\n\n            <!-- Mitigation Notes Callout -->\n            <div class=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n              <span class=\"text-foreground font-semibold\">Mitigation Notes: </span>\n              <span class=\"text-muted-foreground\">\n                Perimeter rate-limiting threshold exceeded (52 req/s). SIEM correlated 4 duplicate elevation signatures\n                across edge ingress gateways.\n              </span>\n            </div>\n          </div>\n\n          <!-- Timeline Entry 2: Triage -->\n          <div class=\"relative space-y-3\">\n            <!-- Node Marker -->\n            <div\n              class=\"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            >\n              <Radio class=\"text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <!-- Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:15:30Z</span>\n                <Badge variant=\"warning\" class=\"font-mono text-xs uppercase\"> 2. Triage </Badge>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\"> T+03:22 </Badge>\n                <h3 class=\"text-foreground text-sm font-semibold\">SOC Triage & Incident War Room Assembly</h3>\n              </div>\n\n              <!-- Investigator Avatar & Name -->\n              <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                <Avatar class=\"size-5\">\n                  <AvatarImage src=\"https://i.pravatar.cc/60?img=47\" alt=\"Elena Rostova\" />\n                  <AvatarFallback class=\"text-xs\">ER</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Elena Rostova</span>\n                <span class=\"text-muted-foreground text-xs\">(Incident Commander)</span>\n              </div>\n            </div>\n\n            <!-- Action Taken Narrative -->\n            <div class=\"space-y-1 text-xs\">\n              <p class=\"text-foreground font-medium\">Action Taken:</p>\n              <p class=\"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 class=\"text-foreground bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">tok_88f9x</code> to an\n                ephemeral CI/CD GitHub Actions runner.\n              </p>\n            </div>\n\n            <!-- System Log Output Snippet Box -->\n            <div class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                <div class=\"flex items-center gap-2\">\n                  <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground text-xs\">war_room_triage_audit.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copySnippet('triage')\"\n                >\n                  <Check v-if=\"copiedSnippetId === 'triage'\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ copiedSnippetId === 'triage' ? 'Copied' : 'Copy Snippet' }}</span>\n                </Button>\n              </div>\n              <pre\n                class=\"text-warning/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\"\n              ><code>{{ logSnippets.triage }}</code></pre>\n            </div>\n\n            <!-- Mitigation Notes Callout -->\n            <div class=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n              <span class=\"text-foreground font-semibold\">Mitigation Notes: </span>\n              <span class=\"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 class=\"relative space-y-3\">\n            <!-- Node Marker -->\n            <div\n              class=\"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            >\n              <Lock class=\"text-warning text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <!-- Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:22:15Z</span>\n                <Badge variant=\"warning\" class=\"font-mono text-xs uppercase\"> 3. Containment </Badge>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\"> T+10:07 </Badge>\n                <h3 class=\"text-foreground text-sm font-semibold\">Perimeter Quarantine & Traffic Blackholing</h3>\n              </div>\n\n              <!-- Investigator Avatar & Name -->\n              <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                <Avatar class=\"size-5\">\n                  <AvatarImage src=\"https://i.pravatar.cc/60?img=33\" alt=\"David Okoye\" />\n                  <AvatarFallback class=\"text-xs\">DO</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">David Okoye</span>\n                <span class=\"text-muted-foreground text-xs\">(Network Security)</span>\n              </div>\n            </div>\n\n            <!-- Action Taken Narrative -->\n            <div class=\"space-y-1 text-xs\">\n              <p class=\"text-foreground font-medium\">Action Taken:</p>\n              <p class=\"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 class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                <div class=\"flex items-center gap-2\">\n                  <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground text-xs\">perimeter_waf_quarantine.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copySnippet('containment')\"\n                >\n                  <Check v-if=\"copiedSnippetId === 'containment'\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ copiedSnippetId === 'containment' ? 'Copied' : 'Copy Snippet' }}</span>\n                </Button>\n              </div>\n              <pre\n                class=\"text-warning/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\"\n              ><code>{{ logSnippets.containment }}</code></pre>\n            </div>\n\n            <!-- Mitigation Notes Callout -->\n            <div class=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n              <span class=\"text-foreground font-semibold\">Mitigation Notes: </span>\n              <span class=\"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 class=\"relative space-y-3\">\n            <!-- Node Marker -->\n            <div\n              class=\"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            >\n              <KeyRound class=\"text-info size-3.5 sm:size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <!-- Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:30:53Z</span>\n                <Badge variant=\"info\" class=\"font-mono text-xs uppercase\"> 4. Token Revocation </Badge>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\"> T+18:45 </Badge>\n                <h3 class=\"text-foreground text-sm font-semibold\">\n                  Cryptographic Credential Invalidation & Key Rotation\n                </h3>\n              </div>\n\n              <!-- Investigator Avatar & Name -->\n              <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                <Avatar class=\"size-5\">\n                  <AvatarImage src=\"https://i.pravatar.cc/60?img=32\" alt=\"Jessica Chen\" />\n                  <AvatarFallback class=\"text-xs\">JC</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Jessica Chen</span>\n                <span class=\"text-muted-foreground text-xs\">(IAM Engineering)</span>\n              </div>\n            </div>\n\n            <!-- Action Taken Narrative -->\n            <div class=\"space-y-1 text-xs\">\n              <p class=\"text-foreground font-medium\">Action Taken:</p>\n              <p class=\"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 class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                <div class=\"flex items-center gap-2\">\n                  <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground text-xs\">vault_revocation_kms_rotation.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copySnippet('revocation')\"\n                >\n                  <Check v-if=\"copiedSnippetId === 'revocation'\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ copiedSnippetId === 'revocation' ? 'Copied' : 'Copy Snippet' }}</span>\n                </Button>\n              </div>\n              <pre\n                class=\"text-info/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\"\n              ><code>{{ logSnippets.revocation }}</code></pre>\n            </div>\n\n            <!-- Mitigation Notes Callout -->\n            <div class=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n              <span class=\"text-foreground font-semibold\">Mitigation Notes: </span>\n              <span class=\"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 class=\"relative space-y-3\">\n            <!-- Node Marker -->\n            <div\n              class=\"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            >\n              <ShieldCheck class=\"text-success size-3.5 sm:size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <!-- Header Row -->\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-bold\">2026-08-21T14:48:00Z</span>\n                <Badge variant=\"success\" class=\"font-mono text-xs uppercase\"> 5. Post-Mortem Action Items </Badge>\n                <Badge variant=\"outline\" class=\"font-mono text-xs\"> T+35:52 </Badge>\n                <h3 class=\"text-foreground text-sm font-semibold\">\n                  Threat Vector Neutralized & Post-Mortem Transition\n                </h3>\n              </div>\n\n              <!-- Investigator Avatar & Name -->\n              <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                <Avatar class=\"size-5\">\n                  <AvatarImage src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                  <AvatarFallback class=\"text-xs\">MV</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Marcus Vance</span>\n                <span class=\"text-muted-foreground text-xs\">(SecOps Lead)</span>\n              </div>\n            </div>\n\n            <!-- Action Taken Narrative -->\n            <div class=\"space-y-1 text-xs\">\n              <p class=\"text-foreground font-medium\">Action Taken:</p>\n              <p class=\"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 class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                <div class=\"flex items-center gap-2\">\n                  <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground text-xs\">post_incident_audit_sweep.log</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                  @click=\"copySnippet('postmortem')\"\n                >\n                  <Check v-if=\"copiedSnippetId === 'postmortem'\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                  <span>{{ copiedSnippetId === 'postmortem' ? 'Copied' : 'Copy Snippet' }}</span>\n                </Button>\n              </div>\n              <pre\n                class=\"text-success/90 overflow-x-auto p-3 text-xs leading-relaxed select-text\"\n              ><code>{{ logSnippets.postmortem }}</code></pre>\n            </div>\n\n            <!-- Mitigation Notes Callout -->\n            <div class=\"bg-muted/40 rounded-lg border p-3 text-xs\">\n              <span class=\"text-foreground font-semibold\">Mitigation Notes: </span>\n              <span class=\"text-muted-foreground\">\n                Post-incident evidence bundle archived to secure S3 vault bucket\n                <code class=\"text-foreground bg-muted rounded px-1 font-mono text-xs\"\n                  >s3://sec-incidents-2026/0842-audit.tar.gz.enc</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 class=\"border-border shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <FileCheck class=\"text-primary size-5\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-lg font-bold\">Root Cause Analysis & Corrective Action Items</CardTitle>\n            </div>\n            <CardDescription class=\"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\" class=\"w-fit font-mono text-xs\"> 3 Post-Mortem Tasks </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <!-- Root Cause Summary Box -->\n        <div class=\"bg-muted/30 border-border space-y-1.5 rounded-lg border p-3.5 text-xs\">\n          <div class=\"text-foreground flex items-center gap-2 font-semibold\">\n            <Shield class=\"text-warning size-4\" aria-hidden=\"true\" />\n            <span>Root Cause Summary</span>\n          </div>\n          <p class=\"text-muted-foreground leading-relaxed\">\n            A third-party fork pull request executed via a workflow using\n            <code class=\"text-foreground bg-muted rounded px-1 py-0.5 font-mono\">pull_request_target</code> allowed\n            unauthorized extraction of the short-lived CI OIDC token. AWS STS role trust policy lacked strict\n            <code class=\"text-foreground bg-muted rounded px-1 py-0.5 font-mono\">repository_owner</code> and\n            <code class=\"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 class=\"border-border divide-border divide-y rounded-lg border\">\n          <!-- Task 1 -->\n          <div\n            class=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-start gap-3\">\n              <div class=\"pt-0.5\">\n                <Checkbox v-model=\"actionItem1\" id=\"task-sec-4412\" />\n              </div>\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <label\n                    for=\"task-sec-4412\"\n                    :class=\"\n                      cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem1 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )\n                    \"\n                  >\n                    SEC-4412\n                  </label>\n                  <Badge variant=\"destructive\" class=\"font-mono text-xs\">P0 Blocker</Badge>\n                  <Badge variant=\"warning\" class=\"font-mono text-xs\">In Review</Badge>\n                </div>\n                <p\n                  :class=\"\n                    cn('text-xs font-medium', 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 policies\n                </p>\n                <p class=\"text-muted-foreground text-xs\">\n                  Require <code class=\"font-mono text-xs\">repository_owner=uipkge</code> and\n                  <code class=\"font-mono text-xs\">ref=refs/heads/main</code> on all assumed cloud roles.\n                </p>\n              </div>\n            </div>\n\n            <div class=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n              <div class=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                <Avatar class=\"size-4\">\n                  <AvatarImage src=\"https://i.pravatar.cc/50?img=32\" alt=\"Jessica Chen\" />\n                  <AvatarFallback class=\"text-xs\">JC</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Jessica Chen</span>\n              </div>\n              <Badge variant=\"outline\" class=\"gap-1 font-mono text-xs\">\n                <GitPullRequest class=\"size-3\" aria-hidden=\"true\" />\n                PR #882\n              </Badge>\n            </div>\n          </div>\n\n          <!-- Task 2 -->\n          <div\n            class=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-start gap-3\">\n              <div class=\"pt-0.5\">\n                <Checkbox v-model=\"actionItem2\" id=\"task-sec-4413\" />\n              </div>\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <label\n                    for=\"task-sec-4413\"\n                    :class=\"\n                      cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem2 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )\n                    \"\n                  >\n                    SEC-4413\n                  </label>\n                  <Badge variant=\"warning\" class=\"font-mono text-xs\">P1 High</Badge>\n                  <Badge variant=\"success\" class=\"font-mono text-xs\">Completed</Badge>\n                </div>\n                <p\n                  :class=\"\n                    cn('text-xs font-medium', 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 class=\"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 class=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n              <div class=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                <Avatar class=\"size-4\">\n                  <AvatarImage src=\"https://i.pravatar.cc/50?img=33\" alt=\"David Okoye\" />\n                  <AvatarFallback class=\"text-xs\">DO</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">David Okoye</span>\n              </div>\n              <Badge variant=\"outline\" class=\"gap-1 font-mono text-xs\"> Deployed v4.18.2 </Badge>\n            </div>\n          </div>\n\n          <!-- Task 3 -->\n          <div\n            class=\"hover:bg-muted/20 flex flex-col gap-3 p-3.5 transition-colors sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-start gap-3\">\n              <div class=\"pt-0.5\">\n                <Checkbox v-model=\"actionItem3\" id=\"task-sec-4414\" />\n              </div>\n              <div class=\"space-y-1\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <label\n                    for=\"task-sec-4414\"\n                    :class=\"\n                      cn(\n                        'cursor-pointer font-mono text-xs font-bold',\n                        actionItem3 ? 'text-muted-foreground line-through' : 'text-foreground',\n                      )\n                    \"\n                  >\n                    SEC-4414\n                  </label>\n                  <Badge variant=\"warning\" class=\"font-mono text-xs\">P1 High</Badge>\n                  <Badge variant=\"info\" class=\"font-mono text-xs\">In Progress</Badge>\n                </div>\n                <p\n                  :class=\"\n                    cn('text-xs font-medium', 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 class=\"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 class=\"flex shrink-0 flex-wrap items-center gap-3 pl-7 sm:justify-end sm:pl-0\">\n              <div class=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs\">\n                <Avatar class=\"size-4\">\n                  <AvatarImage src=\"https://i.pravatar.cc/50?img=60\" alt=\"Marcus Vance\" />\n                  <AvatarFallback class=\"text-xs\">MV</AvatarFallback>\n                </Avatar>\n                <span class=\"text-foreground font-medium\">Marcus Vance</span>\n              </div>\n              <Badge variant=\"outline\" class=\"gap-1 font-mono text-xs\"> Sprint 34 · Aug 28 </Badge>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SecurityIncidentTimeline.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/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"
  ]
}