@xeonr/trail-ui

Drop-in activity screens for trail, built on @xeonr/platform-ui. A product adds an Activity tab in one import.

pnpm add @xeonr/trail-ui @xeonr/trail @xeonr/platform-ui

Peers: react, react-dom, styled-components, @xeonr/platform-ui, @xeonr/trail, @bufbuild/protobuf, @connectrpc/connect. Render inside the kit's AppThemeProvider and a react-router context (links use the router).

<ActivityFeed>

A project's event log over EventsService.SearchEvents: facet rail, time range, free text, outcome chips, cursor-paged list.

<ActivityFeed
  client={trail}                         // Pick<TrailClient, "events">
  project="dbaas"
  filters={filters().eq("properties.namespace", ns).build()}  // fixed, ANDed, not removable
  facets={["sub_type_key", "outcome", "actor.urn", "properties.namespace"]}
  initialRange={{ kind: "relative", preset: "24h" }}
  onSelect={(ev) => setOpen(ev)}
  selectedId={open?.id}
  pageSize={50}
  initialQuery=""                        // a saved view
  initialSelections={{ outcome: ["failure"] }}
  onFiltersChange={(state) => save(state)}
/>

A browser reaching trail directly uses a client built with minted(...); the token's grant enforces server-side what filters shows on screen.

<EventDetail>

<EventDetail event={ev} lanternOrigin="https://lantern.xeonr.io" />

Verdict, actor, target and subjects, scope, request (trace id links to lantern's /trace/<id>), declared properties, raw metadata.

<PersonalFeed>

<PersonalFeed client={trail} onSelect={…} selectedId={…} pageSize={50} />

MeService.ListMyEvents with project chips from ListMyProjects; needs only an authenticated user.

Helpers

eventTime, relativeTime, severityTone / severityColour (tokens, never literals) / severityLabel, outcomeTone / outcomeLabel, actorLabel (label → credential → URN tail → kind), targetLabel, subTypeLabel, typeKeyOf, propertyText, eventSummary, urnTail, urnKind. EventRow and EventList are exported for a product that wants the rows in its own frame; across projects, pass showProject with projectNames (project id → name) and each row is labelled with its project's name, falling back to the id.