> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Activity Log

> Customize Velt Activity Log components with props, classes, wireframes, hooks, and known limitations.

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`](/ui-customization/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`](/ui-customization/template-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.