{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "security-incident-timeline",
  "title": "Security Incident Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/security-incident-timeline/security-incident-timeline.component.ts",
      "content": "// Security Operations Center (SOC) incident response timeline and post-mortem\n// tracker: telemetry KPIs, chronological audit trail with log snippets, and\n// corrective action items. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  FileCheck,\n  FileDown,\n  GitPullRequest,\n  KeyRound,\n  Lock,\n  LucideAngularModule,\n  Plus,\n  Radio,\n  Server,\n  Shield,\n  ShieldAlert,\n  ShieldCheck,\n  Terminal,\n  Users,\n  Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-security-incident-timeline, [ui-security-incident-timeline]',\n  standalone: true,\n  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiAvatarImageComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiCheckboxComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <div data-slot=\"security-incident-timeline\" [class]=\"rootClass\">\n      <!-- 1. Incident Header Card -->\n      <div ui-card class=\"border-border shadow-xs\">\n        <div ui-card-header 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                <span ui-badge variant=\"outline\" class=\"font-mono text-xs font-semibold tracking-wider\">\n                  {{ incidentId }}\n                </span>\n\n                <!-- Severity Badge with Pulsing Red Dot -->\n                <span ui-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\"></span>\n                    <span class=\"relative inline-flex size-2 rounded-full bg-white\"></span>\n                  </span>\n                  {{ severity }}\n                </span>\n\n                <!-- Status Badge -->\n                @if (!isResolved()) {\n                  <span ui-badge variant=\"warning\" class=\"gap-1.5 font-mono text-xs font-semibold\">\n                    <span class=\"bg-warning size-2 rounded-full\"></span>\n                    {{ status }}\n                  </span>\n                } @else {\n                  <span ui-badge variant=\"success\" class=\"gap-1.5 font-mono text-xs font-semibold\">\n                    <span class=\"bg-success size-2 rounded-full\"></span>\n                    Resolved · Closed\n                  </span>\n                }\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                  {{ 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                ui-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                @if (exportNotification()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                } @else {\n                  <lucide-icon [img]=\"FileDown\" class=\"size-3.5\" aria-hidden=\"true\" />\n                }\n                <span>{{ exportNotification() ? 'Exporting PDF...' : 'Export Incident Report PDF' }}</span>\n              </button>\n\n              <button ui-button variant=\"outline\" size=\"sm\" class=\"h-9 gap-1.5 text-xs\" (click)=\"handleAddUpdate()\">\n                @if (updateAddedNotification()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                } @else {\n                  <lucide-icon [img]=\"Plus\" class=\"size-3.5\" aria-hidden=\"true\" />\n                }\n                <span>{{ updateAddedNotification() ? 'Draft Created' : 'Add Timeline Update' }}</span>\n              </button>\n\n              <button\n                ui-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                <lucide-icon [img]=\"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          <ui-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              <ui-avatar class=\"size-9 border\">\n                <ui-avatar-image src=\"https://i.pravatar.cc/72?img=60\" alt=\"Marcus Vance\" />\n                <ui-avatar-fallback class=\"bg-primary/10 text-primary font-semibold\">MV</ui-avatar-fallback>\n              </ui-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\">{{ commanderName }}</p>\n                <p class=\"text-muted-foreground truncate text-xs\">{{ 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\"></span>\n                  <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n                </span>\n                <p class=\"text-foreground font-mono text-xs font-semibold\">#bridge-sec-0842</p>\n                <span ui-badge variant=\"outline\" class=\"text-xs\">4 Responders</span>\n              </div>\n              <p class=\"text-muted-foreground text-xs\">Bridge active · PagerDuty Sync</p>\n            </div>\n          </div>\n        </div>\n      </div>\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        <div ui-card class=\"border-border shadow-xs\">\n          <div ui-card-content 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                <lucide-icon [img]=\"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                <lucide-icon [img]=\"CheckCircle2\" class=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>Automated GuardDuty alert fired</span>\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Card 2: Time to Mitigate -->\n        <div ui-card class=\"border-border shadow-xs\">\n          <div ui-card-content 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                <lucide-icon [img]=\"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                <lucide-icon [img]=\"CheckCircle2\" class=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>Full perimeter isolation & rotation</span>\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Card 3: Affected Resources -->\n        <div ui-card class=\"border-border shadow-xs\">\n          <div ui-card-content 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\n                class=\"border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-lg border\"\n              >\n                <lucide-icon [img]=\"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          </div>\n        </div>\n\n        <!-- Card 4: Impacted User Accounts -->\n        <div ui-card class=\"border-border shadow-xs\">\n          <div ui-card-content 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                <lucide-icon [img]=\"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                <lucide-icon [img]=\"ShieldCheck\" class=\"text-success size-3 shrink-0\" aria-hidden=\"true\" />\n                <span>0 compromise confirmed · Token revoked</span>\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- 3. Incident Timeline (Vertical Connected Stream) -->\n      <div ui-card class=\"border-border shadow-xs\">\n        <div ui-card-header>\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <div ui-card-title class=\"text-lg font-bold\">Incident Response Timeline</div>\n              <div ui-card-description class=\"text-xs\">\n                Chronological audit trail of SOC telemetry, containment actions, and mitigation milestones.\n              </div>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> 5 Timeline Events · UTC Synchronized </span>\n            </div>\n          </div>\n        </div>\n\n        <div ui-card-content 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              <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                <lucide-icon [img]=\"ShieldAlert\" class=\"text-destructive size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\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                  <span ui-badge variant=\"destructive\" class=\"font-mono text-xs uppercase\"> 1. Detection </span>\n                  <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> T+00:00 </span>\n                  <h3 class=\"text-foreground text-sm font-semibold\">Automated Detection & Anomaly Ingestion</h3>\n                </div>\n\n                <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <ui-avatar class=\"size-5\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                    <ui-avatar-fallback class=\"text-xs\">MV</ui-avatar-fallback>\n                  </ui-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              <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              <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                    <lucide-icon [img]=\"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                    ui-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                    @if (copiedSnippetId() === 'detection') {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\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              <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\n                  signatures across edge ingress gateways.\n                </span>\n              </div>\n            </div>\n\n            <!-- Timeline Entry 2: Triage -->\n            <div class=\"relative space-y-3\">\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                <lucide-icon [img]=\"Radio\" class=\"text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\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                  <span ui-badge variant=\"warning\" class=\"font-mono text-xs uppercase\"> 2. Triage </span>\n                  <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> T+03:22 </span>\n                  <h3 class=\"text-foreground text-sm font-semibold\">SOC Triage & Incident War Room Assembly</h3>\n                </div>\n\n                <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <ui-avatar class=\"size-5\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/60?img=47\" alt=\"Elena Rostova\" />\n                    <ui-avatar-fallback class=\"text-xs\">ER</ui-avatar-fallback>\n                  </ui-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              <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              <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                    <lucide-icon [img]=\"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                    ui-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                    @if (copiedSnippetId() === 'triage') {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\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              <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              <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                <lucide-icon [img]=\"Lock\" class=\"text-warning size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\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                  <span ui-badge variant=\"warning\" class=\"font-mono text-xs uppercase\"> 3. Containment </span>\n                  <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> T+10:07 </span>\n                  <h3 class=\"text-foreground text-sm font-semibold\">Perimeter Quarantine & Traffic Blackholing</h3>\n                </div>\n\n                <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <ui-avatar class=\"size-5\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/60?img=33\" alt=\"David Okoye\" />\n                    <ui-avatar-fallback class=\"text-xs\">DO</ui-avatar-fallback>\n                  </ui-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              <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              <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                    <lucide-icon [img]=\"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                    ui-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                    @if (copiedSnippetId() === 'containment') {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\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              <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              <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                <lucide-icon [img]=\"KeyRound\" class=\"text-info size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\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                  <span ui-badge variant=\"info\" class=\"font-mono text-xs uppercase\"> 4. Token Revocation </span>\n                  <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> T+18:45 </span>\n                  <h3 class=\"text-foreground text-sm font-semibold\">\n                    Cryptographic Credential Invalidation & Key Rotation\n                  </h3>\n                </div>\n\n                <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <ui-avatar class=\"size-5\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/60?img=32\" alt=\"Jessica Chen\" />\n                    <ui-avatar-fallback class=\"text-xs\">JC</ui-avatar-fallback>\n                  </ui-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              <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              <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                    <lucide-icon [img]=\"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                    ui-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                    @if (copiedSnippetId() === 'revocation') {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\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              <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              <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                <lucide-icon [img]=\"ShieldCheck\" class=\"text-success size-3.5 sm:size-4\" aria-hidden=\"true\" />\n              </div>\n\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                  <span ui-badge variant=\"success\" class=\"font-mono text-xs uppercase\">\n                    5. Post-Mortem Action Items\n                  </span>\n                  <span ui-badge variant=\"outline\" class=\"font-mono text-xs\"> T+35:52 </span>\n                  <h3 class=\"text-foreground text-sm font-semibold\">\n                    Threat Vector Neutralized & Post-Mortem Transition\n                  </h3>\n                </div>\n\n                <div class=\"bg-muted/60 flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs\">\n                  <ui-avatar class=\"size-5\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/60?img=60\" alt=\"Marcus Vance\" />\n                    <ui-avatar-fallback class=\"text-xs\">MV</ui-avatar-fallback>\n                  </ui-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              <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              <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                    <lucide-icon [img]=\"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                    ui-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                    @if (copiedSnippetId() === 'postmortem') {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    } @else {\n                      <lucide-icon [img]=\"Copy\" class=\"size-3\" aria-hidden=\"true\" />\n                    }\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              <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        </div>\n      </div>\n\n      <!-- 4. Root Cause & Corrective Action Items Card -->\n      <div ui-card class=\"border-border shadow-xs\">\n        <div ui-card-header>\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                <lucide-icon [img]=\"FileCheck\" class=\"text-primary size-5\" aria-hidden=\"true\" />\n                <div ui-card-title class=\"text-lg font-bold\">Root Cause Analysis & Corrective Action Items</div>\n              </div>\n              <div ui-card-description class=\"text-xs\">\n                3 actionable remediation tasks tracked across Jira and GitHub to prevent recurring authorization bypass\n                vectors.\n              </div>\n            </div>\n            <span ui-badge variant=\"outline\" class=\"w-fit font-mono text-xs\"> 3 Post-Mortem Tasks </span>\n          </div>\n        </div>\n\n        <div ui-card-content 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              <lucide-icon [img]=\"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                  <ui-checkbox\n                    id=\"task-sec-4412\"\n                    [checked]=\"actionItem1()\"\n                    (checkedChange)=\"actionItem1.set(!!$event)\"\n                  />\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <label for=\"task-sec-4412\" [class]=\"taskLabelClass(actionItem1())\"> SEC-4412 </label>\n                    <span ui-badge variant=\"destructive\" class=\"font-mono text-xs\">P0 Blocker</span>\n                    <span ui-badge variant=\"warning\" class=\"font-mono text-xs\">In Review</span>\n                  </div>\n                  <p [class]=\"taskDescClass(actionItem1())\">\n                    Enforce strict OIDC branch-to-role binding with repository claim validation on CI runner STS\n                    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                  <ui-avatar class=\"size-4\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/50?img=32\" alt=\"Jessica Chen\" />\n                    <ui-avatar-fallback class=\"text-xs\">JC</ui-avatar-fallback>\n                  </ui-avatar>\n                  <span class=\"text-foreground font-medium\">Jessica Chen</span>\n                </div>\n                <span ui-badge variant=\"outline\" class=\"gap-1 font-mono text-xs\">\n                  <lucide-icon [img]=\"GitPullRequest\" class=\"size-3\" aria-hidden=\"true\" />\n                  PR #882\n                </span>\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                  <ui-checkbox\n                    id=\"task-sec-4413\"\n                    [checked]=\"actionItem2()\"\n                    (checkedChange)=\"actionItem2.set(!!$event)\"\n                  />\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <label for=\"task-sec-4413\" [class]=\"taskLabelClass(actionItem2())\"> SEC-4413 </label>\n                    <span ui-badge variant=\"warning\" class=\"font-mono text-xs\">P1 High</span>\n                    <span ui-badge variant=\"success\" class=\"font-mono text-xs\">Completed</span>\n                  </div>\n                  <p [class]=\"taskDescClass(actionItem2())\">\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                  <ui-avatar class=\"size-4\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/50?img=33\" alt=\"David Okoye\" />\n                    <ui-avatar-fallback class=\"text-xs\">DO</ui-avatar-fallback>\n                  </ui-avatar>\n                  <span class=\"text-foreground font-medium\">David Okoye</span>\n                </div>\n                <span ui-badge variant=\"outline\" class=\"gap-1 font-mono text-xs\"> Deployed v4.18.2 </span>\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                  <ui-checkbox\n                    id=\"task-sec-4414\"\n                    [checked]=\"actionItem3()\"\n                    (checkedChange)=\"actionItem3.set(!!$event)\"\n                  />\n                </div>\n                <div class=\"space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <label for=\"task-sec-4414\" [class]=\"taskLabelClass(actionItem3())\"> SEC-4414 </label>\n                    <span ui-badge variant=\"warning\" class=\"font-mono text-xs\">P1 High</span>\n                    <span ui-badge variant=\"info\" class=\"font-mono text-xs\">In Progress</span>\n                  </div>\n                  <p [class]=\"taskDescClass(actionItem3())\">\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                  <ui-avatar class=\"size-4\">\n                    <ui-avatar-image src=\"https://i.pravatar.cc/50?img=60\" alt=\"Marcus Vance\" />\n                    <ui-avatar-fallback class=\"text-xs\">MV</ui-avatar-fallback>\n                  </ui-avatar>\n                  <span class=\"text-foreground font-medium\">Marcus Vance</span>\n                </div>\n                <span ui-badge variant=\"outline\" class=\"gap-1 font-mono text-xs\"> Sprint 34 · Aug 28 </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiSecurityIncidentTimelineComponent {\n  protected readonly Check = Check\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Clock = Clock\n  protected readonly Copy = Copy\n  protected readonly FileCheck = FileCheck\n  protected readonly FileDown = FileDown\n  protected readonly GitPullRequest = GitPullRequest\n  protected readonly KeyRound = KeyRound\n  protected readonly Lock = Lock\n  protected readonly Plus = Plus\n  protected readonly Radio = Radio\n  protected readonly Server = Server\n  protected readonly Shield = Shield\n  protected readonly ShieldAlert = ShieldAlert\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly Terminal = Terminal\n  protected readonly Users = Users\n  protected readonly Zap = Zap\n\n  protected readonly logSnippets = logSnippets\n\n  @Input() incidentId = '#SEC-INC-2026-0842'\n  @Input() incidentTitle = 'Unauthorized API Token Elevation Attempt'\n  @Input() severity = 'SEV-1 Critical'\n  @Input() status = 'Mitigated / In Post-Mortem'\n  @Input() commanderName = 'Marcus Vance'\n  @Input() commanderRole = 'Principal SecOps · Incident Commander'\n  @Input('class') className?: string\n\n  readonly isResolved = signal(false)\n  readonly exportNotification = signal(false)\n  readonly copiedSnippetId = signal<string | null>(null)\n  readonly updateAddedNotification = signal(false)\n\n  readonly actionItem1 = signal(true)\n  readonly actionItem2 = signal(true)\n  readonly actionItem3 = signal(false)\n\n  get rootClass(): string {\n    return cn('w-full space-y-6', this.className)\n  }\n\n  taskLabelClass(done: boolean): string {\n    return cn(\n      'cursor-pointer font-mono text-xs font-bold',\n      done ? 'text-muted-foreground line-through' : 'text-foreground',\n    )\n  }\n\n  taskDescClass(done: boolean): string {\n    return cn('text-xs font-medium', done ? 'text-muted-foreground line-through' : 'text-foreground')\n  }\n\n  copySnippet(id: string): void {\n    const text = logSnippets[id]\n    if (!text) return\n    try {\n      void navigator.clipboard.writeText(text)\n    } catch {\n      // Clipboard unavailable: still flip the label.\n    }\n    this.copiedSnippetId.set(id)\n    setTimeout(() => {\n      if (this.copiedSnippetId() === id) this.copiedSnippetId.set(null)\n    }, 2000)\n  }\n\n  handleExportPdf(): void {\n    this.exportNotification.set(true)\n    setTimeout(() => this.exportNotification.set(false), 2500)\n  }\n\n  handleAddUpdate(): void {\n    this.updateAddedNotification.set(true)\n    setTimeout(() => this.updateAddedNotification.set(false), 2500)\n  }\n\n  handleResolve(): void {\n    this.isResolved.update((v) => !v)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/security-incident-timeline/security-incident-timeline.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/security-incident-timeline/index.ts",
      "content": "export { UiSecurityIncidentTimelineComponent } from './security-incident-timeline.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/security-incident-timeline/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/checkbox.json",
    "https://uipkge.dev/r/angular/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"
  ]
}