Activity Log

A chronological timeline of activity (comments, resolves, reactions, …), grouped by date with a filter dropdown. Fully wireframed: the richest non-comment customization surface. All four layers apply; the same model as comments (Decision tree).

Components

	Primitive	Wireframe
Activity log	`VeltActivityLog`	`VeltActivityLogWireframe`

Config props

None feature-specific: Activity Log has no dedicated config props. Primitive props on VeltActivityLog:

Prop	Type	What it does
`darkMode`	`boolean`	Dark theme
`shadowDom`	`boolean`	Toggle shadow-DOM isolation
`variant`	`string`	Wireframe variant to render
`useDummyData`	`boolean`	Render sample data while styling

CSS: stateful classes

(Override with !important, R9b.) Theme with --velt-* as usual; state-dependent styling is done with velt-class toggles in the wireframe (there’s no large built-in stateful-class set for this feature).

Class	Applies to
`velt-activity-log--container`	Root container
`velt-activity-log-loading--container`	Loading state container
`velt-activity-log-empty--container`	Empty state container

Wireframes: slot trees + tokens

VeltActivityLogWireframe
├── .Loading                      (shows while allActivities === null)
├── .Empty                        (filteredActivities.length === 0)
├── .Header
│   ├── .Title   .CloseButton
│   └── .Filter
│       ├── .Trigger → .Icon / .Label
│       └── .Content → .Item → .Icon / .Label
└── .List
    ├── .DateGroup → .Label
    ├── .ShowMore                 (dateGroup.totalCount > defaultVisibleCount)
    └── .Item
        ├── .Icon  .Avatar  .Time
        └── .Content → .User / .Action / .Target / .Detail

Key tokens (read with velt-if/velt-class/velt-data): {isEnabled}, {isOpen}, {darkMode}, {allActivities} (null = loading), {filteredActivities}, {groupedActivities}, {activeFilter} ('all' | a feature type), {availableFilters}, {expandedGroups}, {defaultVisibleCount} (default 5), {filterDropdownOpen}. Inside iteration: {dateGroup} (.dateKey/.displayLabel/.totalCount), {activity} (alias {activityRecord}: .user/.timestamp/.featureType/.action/.target/.detail), {filter} (alias {filterOption}), {isActive}, {isExpanded}, {remainingCount}. (See Wireframe variables.)

Headless hooks

Hook	Returns
`useAllActivities(config?)`	`ActivityRecord[] \| null` (reactive; `null` = still loading)
`useActivityUtils()`	The activity element for imperative control

Build a fully custom timeline by mapping useAllActivities() and rendering your own rows.

Limitations

None notable: full slot coverage + data hooks. The interactivity rule (R4) still applies inside slots.

Concepts

AI Agent Workflow

Approaches

Feature Guides

Components: Async Collaboration

Components: Realtime Collaboration

Guidance

Reference

Activity Log

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations

​Components

​Config props

​CSS: stateful classes

​Wireframes: slot trees + tokens

​Headless hooks

​Limitations

Components

Config props

CSS: stateful classes

Wireframes: slot trees + tokens

Headless hooks

Limitations