{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "audit-event-stream", "title": "Audit Event Stream", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/audit-event-stream/AuditEventStream.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertCircle,\n AlertTriangle,\n Check,\n ChevronDown,\n ChevronRight,\n Download,\n Filter,\n Info,\n Layers,\n Pause,\n Play,\n RotateCcw,\n Search,\n Shield,\n ShieldAlert,\n Trash2,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { EventDetailDrawer } from './EventDetailDrawer'\n\nexport type EventSeverity = 'info' | 'warning' | 'critical'\n\nexport interface AuditStreamEvent {\n id: string\n timestamp: string\n severity: EventSeverity\n action: string\n actor: {\n name: string\n type: 'user' | 'service' | 'system'\n }\n sourceIp: string\n geo: string\n target: string\n summary: string\n metadata: Record\n}\n\nexport interface AuditEventStreamProps {\n initialEvents?: AuditStreamEvent[]\n initialPaused?: boolean\n initialSeverity?: 'all' | EventSeverity\n initialSearch?: string\n className?: string\n}\n\nconst defaultEvents: AuditStreamEvent[] = [\n {\n id: 'evt-1094',\n timestamp: '2026-08-21T14:32:05.812Z',\n severity: 'critical',\n action: 'policy.access.denied',\n actor: {\n name: 'd.vader@contractor.io',\n type: 'user',\n },\n sourceIp: '45.33.32.156',\n geo: 'AP-East (HK)',\n target: 'arn:aws:s3:::prod-customer-pii-cold-storage/*',\n summary: 'Cross-boundary access violation to restricted cold storage bucket',\n metadata: {\n request_id: 'req_88f912c9a01',\n resource_arn: 'arn:aws:s3:::prod-customer-pii-cold-storage/*',\n requested_action: 's3:GetObject',\n violation_code: 'UNAUTHORIZED_GEOLOCATION_ACCESS',\n risk_score: 94,\n enforcement: 'blocked_by_guardduty',\n user_agent: 'aws-cli/2.15.30 Python/3.11.8 Darwin/24.1.0',\n },\n },\n {\n id: 'evt-1093',\n timestamp: '2026-08-21T14:31:58.240Z',\n severity: 'critical',\n action: 'vpc.security_group.ingress_created',\n actor: {\n name: 'devops-ci-orchestrator',\n type: 'service',\n },\n sourceIp: '172.31.0.4',\n geo: 'EU-West (IE)',\n target: 'sg-08f912c9aa30 (prod-bastion-sg)',\n summary: 'Security group rule added opening SSH (0.0.0.0/0:22) to public internet',\n metadata: {\n request_id: 'req_39b201a44e',\n security_group_id: 'sg-08f912c9aa30',\n rule: {\n protocol: 'tcp',\n from_port: 22,\n to_port: 22,\n cidr: '0.0.0.0/0',\n },\n compliance_impact: 'NON_COMPLIANT_SOC2_CC6',\n alert: 'AUTOMATIC_SECURITY_REMEDIATION_TRIGGERED',\n quarantine_status: 'isolated_pending_approval',\n },\n },\n {\n id: 'evt-1092',\n timestamp: '2026-08-21T14:31:44.102Z',\n severity: 'warning',\n action: 'api.rate_limit.exceeded',\n actor: {\n name: 'api-gateway-edge',\n type: 'service',\n },\n sourceIp: '203.0.113.195',\n geo: 'EU-Central (FRA)',\n target: 'api.acme.com/v2/organizations/billing/sync',\n summary: 'Customer exceeded tier rate limit of 10,000 req/min (current: 14,820 req/min)',\n metadata: {\n request_id: 'req_a44019bf08',\n client_id: 'app_pub_8829104',\n tier: 'pro_tier',\n limit: '10,000 req/min',\n current_rate: '14,820 req/min',\n burst_allowance: 'exhausted',\n enforced_action: 'http_429_throttled',\n retry_after_seconds: 45,\n },\n },\n {\n id: 'evt-1091',\n timestamp: '2026-08-21T14:31:22.955Z',\n severity: 'warning',\n action: 'auth.mfa.challenge_failed',\n actor: {\n name: 'marcus.lee@acme.corp',\n type: 'user',\n },\n sourceIp: '192.0.2.142',\n geo: 'US-West (SFO)',\n target: 'identity.acme.corp/mfa/challenge',\n summary: 'Multiple consecutive invalid TOTP code attempts detected',\n metadata: {\n request_id: 'req_77d812ef90',\n user_id: 'usr_8830192a',\n attempt_count: 3,\n max_allowed: 5,\n failure_reason: 'totp_token_mismatch',\n client_fingerprint: 'fp_993b2a0018f',\n risk_flag: 'SUSPICIOUS_DEVICE_FINGERPRINT',\n },\n },\n {\n id: 'evt-1090',\n timestamp: '2026-08-21T14:31:05.419Z',\n severity: 'warning',\n action: 'storage.bucket.policy_updated',\n actor: {\n name: 'elena.rostova@acme.corp',\n type: 'user',\n },\n sourceIp: '84.190.201.3',\n geo: 'EU-Central (BER)',\n target: 'prod-exports-transfers-bucket',\n summary: 'CORS origins and bucket policy permissions updated',\n metadata: {\n request_id: 'req_1204891ff3',\n bucket: 'prod-exports-transfers-bucket',\n changes: {\n public_read: false,\n cors_origins: ['https://app.acme.com', 'https://staging.acme.com'],\n ssl_enforced: true,\n },\n review_status: 'PENDING_AUDIT_SIGNOFF',\n },\n },\n {\n id: 'evt-1089',\n timestamp: '2026-08-21T14:30:48.331Z',\n severity: 'info',\n action: 'iam.user.login_success',\n actor: {\n name: 'sarah.connor@acme.corp',\n type: 'user',\n },\n sourceIp: '198.51.100.24',\n geo: 'US-East (NYC)',\n target: 'auth.acme.corp/oauth/callback',\n summary: 'Successful SAML SSO login with WebAuthn hardware token verification',\n metadata: {\n request_id: 'req_66c29188e1',\n auth_provider: 'okta_saml_enterprise',\n mfa_type: 'fido2_yubikey',\n session_id: 'sess_9f82c1a003',\n user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_4) AppleWebKit/537.36',\n },\n },\n {\n id: 'evt-1088',\n timestamp: '2026-08-21T14:30:19.780Z',\n severity: 'info',\n action: 'db.secret.rotated',\n actor: {\n name: 'vault-agent-worker',\n type: 'service',\n },\n sourceIp: '10.240.12.88',\n geo: 'US-West (OR)',\n target: 'kv/prod/aurora-primary/credentials',\n summary: 'Automated 30-day credential rotation for primary PostgreSQL cluster',\n metadata: {\n request_id: 'req_55104882c9',\n vault_cluster: 'prod-vault-cluster-01',\n path: 'kv/prod/aurora-primary/credentials',\n ttl_seconds: 2592000,\n databases_updated: ['aurora-writer-01', 'aurora-reader-01', 'aurora-reader-02'],\n status: 'ROTATION_SUCCESS',\n },\n },\n {\n id: 'evt-1087',\n timestamp: '2026-08-21T14:29:55.104Z',\n severity: 'info',\n action: 'repo.deployment.started',\n actor: {\n name: 'github-actions[bot]',\n type: 'service',\n },\n sourceIp: '140.82.112.22',\n geo: 'US-East (IAD)',\n target: 'uipkge/core-registry:main (a3f89b1)',\n summary: 'Production deployment triggered via merge pull request #412',\n metadata: {\n request_id: 'req_44910283aa',\n repository: 'uipkge/core-registry',\n commit_hash: 'a3f89b14e9f',\n environment: 'production',\n pipeline_id: 'pipe_883019',\n runner: 'runner-edge-iad-4',\n },\n },\n {\n id: 'evt-1086',\n timestamp: '2026-08-21T14:29:12.650Z',\n severity: 'info',\n action: 'kms.key.decrypted',\n actor: {\n name: 'payment-service-daemon',\n type: 'service',\n },\n sourceIp: '10.128.4.19',\n geo: 'US-East (VA)',\n target: 'arn:aws:kms:us-east-1:992019482:key/cmk-cardholder-01',\n summary: 'Authorized envelope decryption operation for card tokenization',\n metadata: {\n request_id: 'req_338192001e',\n key_arn: 'arn:aws:kms:us-east-1:992019482:key/cmk-cardholder-01',\n algorithm: 'AES_GCM_256',\n caller_service: 'checkout-v2-pod-88x',\n auth_context: { transaction_id: 'tx_9981203', environment: 'production' },\n },\n },\n {\n id: 'evt-1085',\n timestamp: '2026-08-21T14:28:40.091Z',\n severity: 'info',\n action: 'service.token.revoked',\n actor: {\n name: 'security-automations',\n type: 'system',\n },\n sourceIp: '127.0.0.1',\n geo: 'Internal',\n target: 'tok_expired_929104882',\n summary: 'Routine cleanup revoked expired machine-to-machine JWT token',\n metadata: {\n request_id: 'req_227198300a',\n token_id: 'tok_expired_929104882',\n reason: 'ttl_expiration',\n issued_at: '2026-08-14T00:00:00Z',\n revoked_by: 'system_cron_daemon',\n },\n },\n]\n\nfunction initials(name: string): string {\n if (name.includes('@')) {\n return name.slice(0, 2).toUpperCase()\n }\n return (\n name\n .replace(/[^a-zA-Z0-9\\s]/g, '')\n .split(' ')\n .filter(Boolean)\n .map((part) => part[0])\n .slice(0, 2)\n .join('')\n .toUpperCase() || 'SA'\n )\n}\n\nfunction matchesSearch(event: AuditStreamEvent, query: string): boolean {\n if (!query.trim()) return true\n const q = query.trim()\n\n if (q.startsWith('/') && q.length > 1) {\n const lastSlash = q.lastIndexOf('/')\n if (lastSlash > 0) {\n const pattern = q.slice(1, lastSlash)\n const flags = q.slice(lastSlash + 1)\n try {\n const re = new RegExp(pattern, flags)\n return (\n re.test(event.action) ||\n re.test(event.actor.name) ||\n re.test(event.sourceIp) ||\n re.test(event.geo) ||\n re.test(event.target) ||\n re.test(event.summary) ||\n re.test(JSON.stringify(event.metadata))\n )\n } catch {\n // Fall back to plain search on invalid regex syntax\n }\n }\n }\n\n const lower = q.toLowerCase()\n return (\n event.action.toLowerCase().includes(lower) ||\n event.actor.name.toLowerCase().includes(lower) ||\n event.sourceIp.toLowerCase().includes(lower) ||\n event.geo.toLowerCase().includes(lower) ||\n event.target.toLowerCase().includes(lower) ||\n event.summary.toLowerCase().includes(lower) ||\n JSON.stringify(event.metadata).toLowerCase().includes(lower)\n )\n}\n\nfunction formatTimestamp(iso: string): string {\n try {\n const d = new Date(iso)\n return d.toISOString().replace('T', ' ').replace('Z', ' UTC')\n } catch {\n return iso\n }\n}\n\nexport function AuditEventStream({\n initialEvents,\n initialPaused = false,\n initialSeverity = 'all',\n initialSearch = '',\n className,\n}: AuditEventStreamProps) {\n const [events, setEvents] = React.useState(\n initialEvents ? [...initialEvents] : [...defaultEvents],\n )\n const [isPaused, setIsPaused] = React.useState(initialPaused)\n const [selectedSeverity, setSelectedSeverity] = React.useState<'all' | EventSeverity>(initialSeverity)\n const [searchQuery, setSearchQuery] = React.useState(initialSearch)\n const [expandedIds, setExpandedIds] = React.useState>({\n 'evt-1094': true,\n })\n const [copiedId, setCopiedId] = React.useState(null)\n const [exportedNotice, setExportedNotice] = React.useState(false)\n\n const filteredEvents = React.useMemo(() => {\n return events.filter((event) => {\n const matchesSeverity = selectedSeverity === 'all' || event.severity === selectedSeverity\n const matchesText = matchesSearch(event, searchQuery)\n return matchesSeverity && matchesText\n })\n }, [events, selectedSeverity, searchQuery])\n\n const severityCounts = React.useMemo(() => {\n return {\n all: events.length,\n critical: events.filter((e) => e.severity === 'critical').length,\n warning: events.filter((e) => e.severity === 'warning').length,\n info: events.filter((e) => e.severity === 'info').length,\n }\n }, [events])\n\n const allExpanded = filteredEvents.length > 0 && filteredEvents.every((e) => expandedIds[e.id])\n\n function togglePause() {\n setIsPaused((prev) => !prev)\n }\n\n function toggleExpand(id: string) {\n setExpandedIds((prev) => ({\n ...prev,\n [id]: !prev[id],\n }))\n }\n\n function toggleAllExpand() {\n if (allExpanded) {\n setExpandedIds({})\n } else {\n const next: Record = {}\n filteredEvents.forEach((e) => {\n next[e.id] = true\n })\n setExpandedIds(next)\n }\n }\n\n function clearStream() {\n setEvents([])\n setExpandedIds({})\n }\n\n function resetStream() {\n setEvents(initialEvents ? [...initialEvents] : [...defaultEvents])\n setSearchQuery('')\n setSelectedSeverity('all')\n setExpandedIds({ 'evt-1094': true })\n }\n\n function copyPayload(id: string, metadata: Record) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(JSON.stringify(metadata, null, 2))\n setCopiedId(id)\n setTimeout(() => {\n setCopiedId((current) => (current === id ? null : current))\n }, 2000)\n }\n }\n\n function exportJson() {\n const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(filteredEvents, null, 2))\n if (typeof document !== 'undefined') {\n const downloadAnchor = document.createElement('a')\n downloadAnchor.setAttribute('href', dataStr)\n downloadAnchor.setAttribute(\n 'download',\n `audit-event-stream-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`,\n )\n document.body.appendChild(downloadAnchor)\n downloadAnchor.click()\n downloadAnchor.remove()\n setExportedNotice(true)\n setTimeout(() => {\n setExportedNotice(false)\n }, 2000)\n }\n }\n\n return (\n
\n {/* Top Header & Live Telemetry Status */}\n
\n
\n
\n \n
\n
\n
\n

Audit Event Stream

\n {!isPaused ? (\n
\n \n \n \n \n Live Stream · Connected\n
\n ) : (\n
\n \n Stream Paused\n
\n )}\n
\n

\n Real-time security telemetry feed and structured audit trail inspector\n

\n
\n
\n\n
\n \n {isPaused ? (\n \n ) : (\n \n )}\n {isPaused ? 'Resume Stream' : 'Pause Stream'}\n \n\n \n\n \n {exportedNotice ? (\n \n ) : (\n \n )}\n {exportedNotice ? 'Exported JSON' : 'Export JSON'}\n \n
\n
\n\n {/* Filter & Search Toolbar */}\n \n \n
\n {/* Search Input with Regex Support */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search event action, actor, IP, target, or /regex/...\"\n className=\"pl-9 text-xs\"\n />\n
\n\n {/* Severity Filter Pills */}\n
\n \n \n Severity:\n \n\n setSelectedSeverity('all')}\n >\n All\n \n {severityCounts.all}\n \n \n\n setSelectedSeverity('critical')}\n >\n \n Critical\n \n {severityCounts.critical}\n \n \n\n setSelectedSeverity('warning')}\n >\n \n Warning\n \n {severityCounts.warning}\n \n \n\n setSelectedSeverity('info')}\n >\n \n Info\n \n {severityCounts.info}\n \n \n
\n
\n \n \n\n {/* Main Log Stream Feed Terminal Card */}\n \n {/* Terminal Header Bar */}\n
\n
\n
\n \n \n \n
\n \n telemetry-stream-us-east-1 · ingester-v2 · tcp+tls\n \n
\n\n
\n \n \n {allExpanded ? (\n \n ) : (\n \n )}\n {allExpanded ? 'Collapse All' : 'Expand All'}\n \n
\n
\n\n {/* Feed Rows Container */}\n \n {/* Empty State when 0 matching events */}\n {filteredEvents.length === 0 ? (\n
\n
\n \n
\n
\n

No audit events match your criteria

\n

\n {events.length === 0\n ? 'The event buffer was cleared. Restore default stream data to resume inspection.'\n : 'Try loosening your severity filter or search query.'}\n

\n
\n \n
\n ) : (\n
    \n {filteredEvents.map((event) => {\n const isExpanded = !!expandedIds[event.id]\n return (\n \n {/* Primary Row Trigger */}\n toggleExpand(event.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n toggleExpand(event.id)\n }\n }}\n >\n {/* Left Rail: Expand Indicator + Timestamp + Severity + Action */}\n
    \n \n \n \n\n
    \n
    \n \n {formatTimestamp(event.timestamp)}\n \n\n {event.severity === 'critical' ? (\n \n \n CRIT\n \n ) : event.severity === 'warning' ? (\n \n \n WARN\n \n ) : (\n \n \n INFO\n \n )}\n\n {event.action}\n
    \n\n

    {event.summary}

    \n
    \n
    \n\n {/* Right Rail: Actor Avatar & Tag + IP & Geo Flag */}\n
    \n
    \n \n \n {initials(event.actor.name)}\n \n \n \n {event.actor.name}\n \n
    \n\n
    \n {event.sourceIp}\n ·\n {event.geo}\n
    \n
    \n
\n\n {/* Expanded Payload Accordion Detail View */}\n {isExpanded && (\n copyPayload(event.id, event.metadata)}\n />\n )}\n \n )\n })}\n \n )}\n \n\n {/* Bottom Telemetry Stats Bar */}\n
\n
\n
\n \n Ingestion Rate:\n {isPaused ? '0 evt/s (Paused)' : '42 events/sec'}\n
\n\n \n\n
\n \n Buffer Size:\n 1.2 MB / 10 MB (12%)\n
\n\n \n\n
\n \n Latency:\n ~18ms p99\n
\n
\n\n
\n \n TLS v1.3 · TCP Keep-Alive · us-east-1a\n
\n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/AuditEventStream.tsx" }, { "path": "packages/registry-react/blocks/audit-event-stream/EventDetailDrawer.tsx", "content": "'use client'\n\nimport { Bot, Check, Copy, Server, Terminal, User } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport type { AuditStreamEvent } from './AuditEventStream'\n\nexport interface EventDetailDrawerProps {\n event: AuditStreamEvent\n copied: boolean\n onCopy: () => void\n}\n\nexport function EventDetailDrawer({ event, copied, onCopy }: EventDetailDrawerProps) {\n return (\n
\n
\n {/* Target Resource Banner */}\n
\n
\n Target:\n {event.target}\n
\n
\n Actor Type:\n \n {event.actor.type === 'user' ? (\n \n ) : event.actor.type === 'service' ? (\n \n ) : (\n \n )}\n {event.actor.type}\n \n
\n
\n\n {/* Syntax Styled JSON Metadata Box */}\n
\n
\n
\n \n payload_metadata.json\n
\n \n {copied ? (\n \n ) : (\n \n )}\n {copied ? 'Copied' : 'Copy JSON'}\n \n
\n\n 
\n            {JSON.stringify(event.metadata, null, 2)}\n
\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/EventDetailDrawer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Real-time live streaming audit log viewer and security telemetry feed with status indicators, stream pause/resume controls, regex and keyword log filtering, severity badges, expandable JSON payload inspectors, and ingestion telemetry stats.", "categories": [ "devops", "app" ] }