---
url: "https://vueda.dev/v3/reference/theming/keys/ViewHistoryList.md"
title: "ViewHistoryList"
---
# ViewHistoryList
Source: `client/lib/theme/vueda-tailwind/views/index.js`
> Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor.
Vue component: [ViewHistoryList](/v3/reference/api/vue/ViewHistoryList.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-root) | | Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor. |
| [row](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-row) | 4 classes | Row passthrough forwarded to the embedded [ObjectsGrid.bodyRow](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-bodyRow). Paints a 2 px primary left-stripe on the first cell of every row that belongs to a revision (both `data-rev-start` and `data-rev-child`), so a multi-row revision reads as a single grouped band. The card surrounding the grid carries the outer border, so this binding does not redeclare the row's own border. |
| [diff](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-diff) | 13 classes | Diff chip rendered in each old / new field-value cell. `data-side` selects the tonal recipe (`old` = destructive 7 %-mix with a leading minus glyph; `new` = success 8 %-mix with a leading plus glyph), and `data-empty` overrides both into a transparent italic muted-foreground row with a middle-dot glyph for "nothing on this side". Mono keeps whitespace and unicode artifacts in the diffed value readable. |
| [diffField](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-diffField) | `font-sans font-medium text-muted-foreground after:content-[':']` | Field name shown inside a diff chip in the card layout, where the chips of one event stack in a single cell and the table's Field column is absent. Muted and non-mono so the value beside it stays the primary token. |
| [empty](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-empty) | 3 classes | Empty-state card shown when the model has no recorded history. Card-toned with a soft border and 48 px vertical padding so the panel reads as a deliberate state, not an error; the icon / title / description trio inside provides the recovery messaging. |
| [emptyIcon](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-emptyIcon) | 3 classes | 40 px circular icon tile leading the empty state (typically a clock or history glyph). Muted-50 fill on muted-foreground keeps the tile from competing with the title beneath it. |
| [emptyTitle](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-emptyTitle) | `text-[14px] font-semibold leading-[1.3] text-foreground` | Empty-state title ("No history yet" or similar). 14 px / 600 / foreground; same recipe as banner titles on [ModelActionForm.bannerTitle](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerTitle) so empty states read consistently across surfaces. |
| [emptyDesc](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-emptyDesc) | `text-[12px] font-normal leading-[1.5] text-muted-foreground max-w-[44ch]` | Empty-state description beneath the title. 12 px / muted-foreground capped at 44ch so the explanation reads as a paragraph, not a heading. |
| [cellDate](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellDate) | `text-[12px] leading-[1.3] text-foreground` | Absolute timestamp on the upper line of the two-line history-date cell. 12 px / foreground so the absolute value reads as the primary token; the relative phrase on [ViewHistoryList.cellDateRel](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellDateRel) sits beneath it. |
| [cellDateRel](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellDateRel) | `text-[11px] leading-[1.3] text-muted-foreground` | Relative phrase ("3 days ago") beneath the absolute timestamp. 11 px / muted-foreground per the headline / supporting-copy hierarchy. |
| [cellUser](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellUser) | `inline-flex items-center gap-2` | Inline wrapper around the 22 px [UserAvatar](/v3/reference/theming/keys/UserAvatar.md) chip and the actor name beside it. `inline-flex` keeps the chip / name pair on a single baseline so the row aligns vertically with the other history columns. |
| [cellUserName](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellUserName) | 2 classes | Actor-name fragment next to the avatar chip. Uses the supporting type token at 500 / foreground so the name reads as the primary value in the cell. |
| [kindPill](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-kindPill) | 10 classes | Action-kind pill ("request", "task", "command", "system") in the Kind column. The vocabulary is open, so the base recipe is a neutral muted tag and `data-kind` adds a tone only for the values VUEDA defines; an unrecognized kind still renders as itself in the neutral recipe. |
| [cellModel](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellModel) | 2 classes | Model cell naming the row an event wrote. `data-relation="self"` is the requested object and renders as plain foreground text. `data-relation="state"` is the requested object's workflow state, reads "Workflow state", and renders as plain foreground text. `data-relation="related"` is another row that references it and renders muted, with the object id beside it on [ViewHistoryList.cellModelObject](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellModelObject). |
| [cellModelObject](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellModelObject) | `font-mono text-[11px] text-muted-foreground` | Object id fragment after a related row's model name. Mono at 11 px so `#1204` reads as an identifier rather than prose. |
| [typePill](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-typePill) | 12 classes | History-type pill ("Created", "Updated", "Deleted") rendered in the history-type column. `data-kind` selects the tonal recipe (created = success, updated = info, deleted = destructive); unknown values fall back to the raw display value via the slot fallback in the consumer, not this recipe. Small uppercase label with a 12 px leading icon so the pill reads as a category tag, not a button. |
| [meta](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-meta) | 3 classes | Meta strip above the grid: filter slot on the left, layout toggle on the right. Muted-10 wash and a bottom hairline so the strip reads as supporting chrome rather than its own band; kept light because the history view surfaces only a filter slot and a layout toggle, not a full control strip. |
| [metaItem](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-metaItem) | `inline-flex items-center gap-1 text-muted-foreground` | Inline item inside the meta strip (e.g. an active filter chip). Muted-foreground colour and a 4 px gap between icon and label so the item reads as supporting metadata. |
| [metaDivider](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-metaDivider) | `mx-2 h-3 w-hairline bg-border` | Vertical hairline separator between meta items. 12 px tall, `var(--border)` fill; sized to match the meta-row x-height so the divider aligns with the text baseline. |
| [metaSpacer](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-metaSpacer) | `ml-auto` | Flexible filler that pushes the layout toggle to the right end of the meta strip. |
| [layoutToggle](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-layoutToggle) | `flex overflow-clip rounded-vueda-control hairline hairline-border` | Outer chassis of the segmented Table / Cards button pair. `overflow-clip` lets the inner buttons render their own internal hairline (`first:border-r`) without poking past the chassis radius. |
| [layoutButton](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-layoutButton) | 8 classes | One button inside the layout toggle. Transparent / muted-foreground in the default state and tinted accent at `data-active="true"`; the leading icon is sized at 12 px so it sits with the label baseline. Focus uses the canon `focus-ring` utility so it follows the DPR-keyed system focus recipe alongside the rest of the kit. |
| [layoutButtonActive](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-layoutButtonActive) | | Optional extra class applied to the active layout button. Empty by default because [ViewHistoryList.layoutButton](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-layoutButton) already routes its active state via `data-[active=true]`; consumers can opt into an additional emphasis here without duplicating the base recipe. |
## root
> Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor.
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:17`
## row
> Row passthrough forwarded to the embedded [ObjectsGrid.bodyRow](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-bodyRow). Paints a 2 px primary left-stripe on the first cell of every row that belongs to a revision (both `data-rev-start` and `data-rev-child`), so a multi-row revision reads as a single grouped band. The card surrounding the grid carries the outer border, so this binding does not redeclare the row's own border.
Default classes:
```text
data-[rev-start=true]:[&>*:first-child]:border-l-2
data-[rev-start=true]:[&>*:first-child]:border-primary
data-[rev-child=true]:[&>*:first-child]:border-l-2
data-[rev-child=true]:[&>*:first-child]:border-primary
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:21`
## diff
> Diff chip rendered in each old / new field-value cell. `data-side` selects the tonal recipe (`old` = destructive 7 %-mix with a leading minus glyph; `new` = success 8 %-mix with a leading plus glyph), and `data-empty` overrides both into a transparent italic muted-foreground row with a middle-dot glyph for "nothing on this side". Mono keeps whitespace and unicode artifacts in the diffed value readable.
Default classes:
```text
inline-flex items-center gap-1 px-1.5 py-0.5 rounded-vueda-control
font-mono text-[12px] leading-[1.4]
before:font-semibold before:text-[11px]
data-[side=old]:bg-[color-mix(in_oklab,var(--destructive)_7%,transparent)]
data-[side=old]:text-foreground
data-[side=old]:before:content-['−'] data-[side=old]:before:text-destructive
data-[side=new]:bg-[color-mix(in_oklab,var(--success)_8%,transparent)]
data-[side=new]:text-foreground
data-[side=new]:before:content-['+'] data-[side=new]:before:text-success
data-[empty=true]:italic data-[empty=true]:text-muted-foreground
data-[empty=true]:bg-transparent
data-[empty=true]:before:content-['·'] data-[empty=true]:before:text-muted-foreground
data-[missing=true]:italic data-[missing=true]:text-muted-foreground
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:30`
## diffField
> Field name shown inside a diff chip in the card layout, where the chips of one event stack in a single cell and the table's Field column is absent. Muted and non-mono so the value beside it stays the primary token.
Default classes:
`font-sans font-medium text-muted-foreground after:content-[':']`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:48`
## empty
> Empty-state card shown when the model has no recorded history. Card-toned with a soft border and 48 px vertical padding so the panel reads as a deliberate state, not an error; the icon / title / description trio inside provides the recovery messaging.
Default classes:
```text
flex flex-col items-center justify-center gap-2
py-12 px-6 text-center
rounded-vueda-card hairline hairline-border bg-card
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:52`
## emptyIcon
> 40 px circular icon tile leading the empty state (typically a clock or history glyph). Muted-50 fill on muted-foreground keeps the tile from competing with the title beneath it.
Default classes:
```text
flex items-center justify-center
w-10 h-10 rounded-full bg-muted/50 text-muted-foreground
text-[16px] leading-none
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:60`
## emptyTitle
> Empty-state title ("No history yet" or similar). 14 px / 600 / foreground; same recipe as banner titles on [ModelActionForm.bannerTitle](/v3/reference/theming/keys/ModelActionForm.md#theme-key-ModelActionForm-bannerTitle) so empty states read consistently across surfaces.
Default classes:
`text-[14px] font-semibold leading-[1.3] text-foreground`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:68`
## emptyDesc
> Empty-state description beneath the title. 12 px / muted-foreground capped at 44ch so the explanation reads as a paragraph, not a heading.
Default classes:
`text-[12px] font-normal leading-[1.5] text-muted-foreground max-w-[44ch]`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:72`
## cellDate
> Absolute timestamp on the upper line of the two-line history-date cell. 12 px / foreground so the absolute value reads as the primary token; the relative phrase on [ViewHistoryList.cellDateRel](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellDateRel) sits beneath it.
Default classes:
`text-[12px] leading-[1.3] text-foreground`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:76`
## cellDateRel
> Relative phrase ("3 days ago") beneath the absolute timestamp. 11 px / muted-foreground per the headline / supporting-copy hierarchy.
Default classes:
`text-[11px] leading-[1.3] text-muted-foreground`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:80`
## cellUser
> Inline wrapper around the 22 px [UserAvatar](/v3/reference/theming/keys/UserAvatar.md) chip and the actor name beside it. `inline-flex` keeps the chip / name pair on a single baseline so the row aligns vertically with the other history columns.
Default classes:
`inline-flex items-center gap-2`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:84`
## cellUserName
> Actor-name fragment next to the avatar chip. Uses the supporting type token at 500 / foreground so the name reads as the primary value in the cell.
Default classes:
```text
text-[length:var(--vueda-text-supporting)] font-medium leading-tight text-foreground
data-[missing=true]:italic data-[missing=true]:font-normal data-[missing=true]:text-muted-foreground
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:88`
## kindPill
> Action-kind pill ("request", "task", "command", "system") in the Kind column. The vocabulary is open, so the base recipe is a neutral muted tag and `data-kind` adds a tone only for the values VUEDA defines; an unrecognized kind still renders as itself in the neutral recipe.
Default classes:
```text
inline-flex items-center rounded-full hairline px-2 py-0.5
text-[10.5px] font-semibold uppercase tracking-wide leading-none
bg-muted/40 text-muted-foreground
data-[kind=request]:text-foreground
data-[kind=task]:[--vueda-hairline-color:color-mix(in_oklab,var(--info)_25%,transparent)]
data-[kind=task]:bg-[color-mix(in_oklab,var(--info)_8%,transparent)]
data-[kind=task]:text-info
data-[kind=command]:[--vueda-hairline-color:color-mix(in_oklab,var(--warning)_30%,transparent)]
data-[kind=command]:bg-[color-mix(in_oklab,var(--warning)_10%,transparent)]
data-[kind=command]:text-warning
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:95`
## cellModel
> Model cell naming the row an event wrote. `data-relation="self"` is the requested object and renders as plain foreground text. `data-relation="state"` is the requested object's workflow state, reads "Workflow state", and renders as plain foreground text. `data-relation="related"` is another row that references it and renders muted, with the object id beside it on [ViewHistoryList.cellModelObject](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-cellModelObject).
Default classes:
```text
inline-flex items-baseline gap-1 text-[12px] leading-[1.3] text-foreground
data-[relation=related]:text-muted-foreground
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:112`
## cellModelObject
> Object id fragment after a related row's model name. Mono at 11 px so `#1204` reads as an identifier rather than prose.
Default classes:
`font-mono text-[11px] text-muted-foreground`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:119`
## typePill
> History-type pill ("Created", "Updated", "Deleted") rendered in the history-type column. `data-kind` selects the tonal recipe (created = success, updated = info, deleted = destructive); unknown values fall back to the raw display value via the slot fallback in the consumer, not this recipe. Small uppercase label with a 12 px leading icon so the pill reads as a category tag, not a button.
Default classes:
```text
inline-flex items-center gap-1 rounded-full hairline px-2 py-0.5
text-[10.5px] font-semibold uppercase tracking-wide leading-none
[&>svg]:size-3
data-[kind=created]:[--vueda-hairline-color:color-mix(in_oklab,var(--success)_30%,transparent)]
data-[kind=created]:bg-[color-mix(in_oklab,var(--success)_10%,transparent)]
data-[kind=created]:text-success
data-[kind=updated]:[--vueda-hairline-color:color-mix(in_oklab,var(--info)_25%,transparent)]
data-[kind=updated]:bg-[color-mix(in_oklab,var(--info)_8%,transparent)]
data-[kind=updated]:text-info
data-[kind=deleted]:[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_25%,transparent)]
data-[kind=deleted]:bg-[color-mix(in_oklab,var(--destructive)_8%,transparent)]
data-[kind=deleted]:text-destructive
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:123`
## meta
> Meta strip above the grid: filter slot on the left, layout toggle on the right. Muted-10 wash and a bottom hairline so the strip reads as supporting chrome rather than its own band; kept light because the history view surfaces only a filter slot and a layout toggle, not a full control strip.
Default classes:
```text
flex items-center gap-3 flex-wrap
border-b-hairline bg-muted/10
px-4 py-2 text-sm
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:142`
## metaItem
> Inline item inside the meta strip (e.g. an active filter chip). Muted-foreground colour and a 4 px gap between icon and label so the item reads as supporting metadata.
Default classes:
`inline-flex items-center gap-1 text-muted-foreground`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:146`
## metaDivider
> Vertical hairline separator between meta items. 12 px tall, `var(--border)` fill; sized to match the meta-row x-height so the divider aligns with the text baseline.
Default classes:
`mx-2 h-3 w-hairline bg-border`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:150`
## metaSpacer
> Flexible filler that pushes the layout toggle to the right end of the meta strip.
Default classes:
`ml-auto`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:154`
## layoutToggle
> Outer chassis of the segmented Table / Cards button pair. `overflow-clip` lets the inner buttons render their own internal hairline (`first:border-r`) without poking past the chassis radius.
Default classes:
`flex overflow-clip rounded-vueda-control hairline hairline-border`
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:158`
## layoutButton
> One button inside the layout toggle. Transparent / muted-foreground in the default state and tinted accent at `data-active="true"`; the leading icon is sized at 12 px so it sits with the label baseline. Focus uses the canon `focus-ring` utility so it follows the DPR-keyed system focus recipe alongside the rest of the kit.
Default classes:
```text
inline-flex items-center gap-1.5 px-2 py-1 text-xs
text-muted-foreground bg-transparent
first:border-r-hairline
hover:bg-accent hover:text-accent-foreground
active:bg-accent-active active:text-accent-foreground
data-[active=true]:bg-accent data-[active=true]:text-foreground
[&>svg]:size-3
focus-visible:focus-ring
```
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:162`
## layoutButtonActive
> Optional extra class applied to the active layout button. Empty by default because [ViewHistoryList.layoutButton](/v3/reference/theming/keys/ViewHistoryList.md#theme-key-ViewHistoryList-layoutButton) already routes its active state via `data-[active=true]`; consumers can opt into an additional emphasis here without duplicating the base recipe.
Source: `client/lib/theme/vueda-tailwind/views/ViewHistoryList.theme.js:175`