SenseAuditTimelineComponent

Overview

Category: Compound / data display. Selector: sense-audit-timeline. The component is a pure renderer — no HTTP, no router, no global state. Every capability arrives as a typed input; every interaction leaves as a typed output. New behaviour is default-off, so adopting it never changes existing behaviour. The filtering, sorting, grouping, clustering, histogram, anomaly, and serialization logic are exported as independently-usable pure functions.

Feature catalogue

Installation

npm install @artificialsenselabs/enterprise

Peer dependency: @angular/core ^21.2.0. Standalone — import the component directly.

Quick start

import { Component, signal } from '@angular/core';
import { SenseAuditTimelineComponent } from '@artificialsenselabs/enterprise';
import type {
  SenseAuditEvent,
  SenseAuditEventSelectEvent,
  SenseAuditTimelineFilter,
} from '@artificialsenselabs/enterprise';

@Component({
  standalone: true,
  imports: [SenseAuditTimelineComponent],
  template: `
    <sense-audit-timeline
      [events]="events()"
      [loading]="loading()"
      colorScheme="auto"
      (eventSelect)="onSelect($event)"
      (filterChange)="onFilter($event)"
    />
  `,
})
export class AuditPanel {
  events = signal<readonly SenseAuditEvent[]>([]);
  loading = signal(false);

  onSelect(e: SenseAuditEventSelectEvent) { /* open detail drawer */ }
  onFilter(f: SenseAuditTimelineFilter)  { /* persist / server-fetch */ }
}

Architecture & principles

• Purity is the product. No HTTP, router, or global singletons. Capabilities in as inputs; interactions out as typed outputs.
• Default-off. Streaming, clustering, histogram, anomalies, export, summarize — all gated behind inputs that default to the original behaviour.
• Pure logic layer. Filtering, clustering, histogram, anomaly, and serialization are exhaustively unit-tested pure functions.
• A11y is not a phase. Roving tabindex, aria-live announcements, focus management, and axe-clean states ship with every feature.

Inputs 23

Outputs 6

Content-projection slots

Pass a TemplateRef to override the built-in rendering. With no slot supplied, output is identical to the default.

Types

All exported from @artificialsenselabs/enterprise.

DI tokens & constants

Pure utilities

Importable independently of the component — useful for server-side export, tests, or custom UIs.

Filtering & search 0.4

The toolbar exposes severity chips, category chips, an actor dropdown (derived live from the data), a from/to date range, and a debounced free-text search across action, description, and actor name. All dimensions are ANDed.

An active-filter count badge and a "Clear all" button reset every dimension in one action. Every change emits the full filter snapshot via filterChange.

<sense-audit-timeline
  [events]="events()"
  [filter]="{ severity: ['error'], from: '2026-06-01' }"
  (filterChange)="lastFilter.set($event)"
/>

Virtualization 0.1

Above VIRTUALIZE_THRESHOLD (100) rows the list is windowed: only the visible slice plus a small overscan is in the DOM, keeping node count bounded for 50k+ events at 60fps. Variable row heights (expanded metadata) are measured after render and fed back so scroll offsets stay accurate.

Set virtualScroll="false" to always render every row — useful for print or full-page export views where an outer container scrolls.

Live streaming 1.1

Update the liveEvents signal with each delta batch. New ids prepend to the top; existing ids update in place (no duplicates); ids already present in the base events() snapshot are ignored. A "N new events ↑" pill appears when the user has scrolled away from the top, and arrivals are announced via the aria-live region.

Set paused="true" to buffer incoming events while an investigator reads; unpausing flushes the buffer in one batch. For RxJS sources, map your stream to a signal with toSignal.

<sense-audit-timeline [events]="snapshot()" [liveEvents]="delta()" [paused]="paused()" />

Burst clustering 1.2

When a batch emits hundreds of near-identical events, clustering collapses consecutive events sharing the same key(s) within windowMs into a single row with a count badge ("500× Imported record · 2:01–2:03"). Expanding reveals the members. Off by default; total count and ordering are preserved when expanded.

<sense-audit-timeline
  [events]="events()"
  [clustering]="{ enabled: true, windowMs: 60000, by: ['action', 'category'] }"
/>

Remediation actions 1.3

Declare contextual actions ("Revoke session", "Roll back") scoped by severity, category, or a predicate. Matching events render small action buttons; invoking emits actionInvoke with the typed payload and stops propagation so eventSelect does not also fire. The component never performs the action itself.

actions: SenseAuditEventAction[] = [
  { id: 'revoke', label: 'Revoke session',
    severityScope: ['error'], categoryScope: ['auth'] },
];

Export (CSV / JSON) 1.4

Set enableExport to show CSV/JSON buttons. Clicking emits eventExport with the currently-filtered set and triggers a client-side Blob download. The pure toCsv / toJson utilities are injection-safe (escaping , " newlines and leading = + - @) and flatten actor + metadata; JSON round-trips to equivalent events.

<sense-audit-timeline [events]="events()" [enableExport]="true"
  (eventExport)="audit.log($event.format, $event.events)" />

Resource deep-links 1.5

Events carrying both resourceId and resourceType render a subtle "View resource" affordance. Activating it emits resourceSelect with the typed payload — the component never injects the Router (ADR-004); the host routes. It does not also emit eventSelect.

<sense-audit-timeline [events]="events()"
  (resourceSelect)="router.navigate(['/', $event.resourceType, $event.resourceId])" />

Selected-state reflection 1.6

Reflect the id you received from eventSelect back into selectedId to highlight the matching row with the --selected modifier and aria-current="true". Works with virtualization — the highlight reapplies as the row re-enters the rendered viewport.

<sense-audit-timeline [events]="events()" [selectedId]="selected()?.id ?? null"
  (eventSelect)="selected.set($event.event)" />

Density histogram 4.1

Set showHistogram to render a compact density strip over the full unfiltered set, coloured by dominant severity per bucket — a navigation map for long histories. Click or drag across bars to apply a matching from/to filter; two range inputs provide a keyboard-accessible equivalent. histogramBuckets tunes granularity. Renders performantly for 100k events.

<sense-audit-timeline [events]="events()" [showHistogram]="true" [histogramBuckets]="40" />

Anomaly detection 4.2

Pass deterministic, ML-free heuristic rules to flag noteworthy events with a ⚠ badge and an explanatory tooltip. Built-in rules: repeated-failures (same actor), error-spike, off-hours, and same-category-burst — each with threshold/window options. The pure detectAnomalies util is unit-tested per rule. Default-off: passing [] is zero-cost.

rules: AnomalyRule[] = [
  { kind: 'error-spike', threshold: 3, windowMs: 120000 },
  { kind: 'off-hours', businessStart: 8, businessEnd: 18, timeZone: 'UTC' },
];

Saved views & shareable URLs 4.3

serializeFilter / deserializeFilter encode a filter to a compact, URL-safe string and back — serialize(deserialize(x)) === x for every shape, including dates and arrays. Wire filterChange to the Router query params for a refresh-surviving deep link. Pass savedViews to render named preset chips; the chip matching current state is highlighted with aria-pressed.

presets: SavedView[] = [
  { id: 'errors', label: 'Errors',      filter: { severity: ['error'] } },
  { id: 'auth',   label: 'Auth events', filter: { category: ['auth'] } },
];
// share: router.navigate([], { queryParams: { view: serializeFilter(f) || null } })

AI summarize 4.4

Set enableSummarize to show a "Summarize" button. Clicking emits summarizeRequest with the currently-visible events and active filter — the component NEVER makes a network call. The host calls its model, then writes the result back via summaryText / summaryLoading, which the summaryTemplate slot renders. Raw audit data may contain PII: the host decides what to send.

async onSummarize(req: SenseAuditSummarizeRequest) {
  this.loading.set(true);
  const text = await myAiService.summarize(req.events, req.filter);
  this.text.set(text);
  this.loading.set(false);
}

Content-projection slots 2.1

Override any part of the rendering with a TemplateRef. eventRowTemplate replaces the entire row (receiving a rich context); actorTemplate and metadataTemplate target sub-regions; emptyTemplate and loadingTemplate replace the placeholder states; summaryTemplate hosts the AI summary. With no slot supplied, the default output is byte-for-byte unchanged.

<ng-template #row let-event let-time="formattedTime" let-sel="isSelected">
  <div [class.is-selected]="sel">{{ event.action }} · {{ time }}</div>
</ng-template>
<sense-audit-timeline [events]="events()" [eventRowTemplate]="row" />

Theming & tokens

Every colour, radius, and spacing value is a CSS custom property on :host. Override any token from host CSS — no ::ng-deep. A prefers-color-scheme: dark block remaps the defaults; force a scheme with the colorScheme input.

/* Host CSS — override any token, no ::ng-deep needed */
sense-audit-timeline.brand {
  --sat-color-surface: #ffffff;
  --sat-color-border: #e2e8f0;
  --sat-text-primary: #0f172a;
  --sat-severity-error: #dc2626;
  --sat-radius: 10px;
}

Token reference

i18n, locale & timezone

Override any of the 18 user-visible strings via i18nOverrides. Dates and relative times use Intl driven by the locale input (falling back to LOCALE_ID). Set timeZone="UTC" for compliance dashboards — it shifts both displayed times and day-grouping boundaries deterministically. Layout uses CSS logical properties, so dir="rtl" mirrors correctly.

<sense-audit-timeline
  [events]="events()"
  locale="de"
  timeZone="UTC"
  [i18nOverrides]="{ noEventsMessage: 'Keine Ereignisse gefunden.' }"
/>

Extensible taxonomy

Provide SENSE_AUDIT_TIMELINE_CONFIG to relabel, recolour, reorder, or add extended severity/category values without forking. Keys matching built-in unions override; new keys append as extra chips.

providers: [
  {
    provide: SENSE_AUDIT_TIMELINE_CONFIG,
    useValue: {
      categories: {
        auth:    { label: 'Authentication', order: 0 },
        billing: { label: 'Billing', order: 6 },          // extended value
      },
      severities: {
        error:    { label: 'Error', color: '#dc2626', order: 0 },
        critical: { label: 'Critical', color: '#7f1d1d', order: 1 }, // extended
      },
    } satisfies SenseAuditTimelineConfig,
  },
],

Rich metadata

The metadata panel detects each value's kind — string, number, boolean, null, ISO timestamp, URL, or object/array — and renders it appropriately. Objects pretty-print as collapsible JSON; URLs render as safe rel="noopener noreferrer" links (never raw HTML). Each value and the whole block have a keyboard-accessible copy button.

Accessibility

• Roving tabindex across event rows — a single Tab enters the list.
• aria-live="polite" region announces result counts after filtering and new live arrivals.
• Selected rows expose aria-current="true"; filter chips expose aria-pressed.
• Visible focus rings from theme tokens; default tokens meet AA contrast.
• Verified with axe-core across default, loading, empty, dark, and filtered states.

Keyboard model