Activity item

One row of an activity feed: what ran, how it went, who started it, where and when.

Refined portWildActivityItem.vueData Display/Activity ItemWActivityItem

Try it

Hover the row and its time, or tab to it and press Enter.

Alarm SMS, failed:Low tank level alarm
North Pump, 3.0s, +64 21 555 0142
Carrier rejected the message: the number is not reachable
14 minutes ago, Mon 28 Sep 2026, 9:27 am

Click the row, or tab to it and press Enter.

Status

Process

Density

Clickable

Who

Site

Target

Actions

<WActivityItem
  item={run}
  now={now}
  onClick={openRun}
  actions={
    <>
      <WActivityAction label="Retry" icon={<ArrowPathIcon />} onClick={retry} />
      <WActivityAction label="View log" icon={<DocumentTextIcon />} onClick={openLog} />
      <WActivityAction label="More" icon={<EllipsisHorizontalIcon />} onClick={openMenu} />
    </>
  }
/>

When to use

Use one row per process run: an alarm sent, a report built.
Make it clickable when it opens the run’s log.

Don’t use it

For a whole feed. Use Activity feed.
For a device’s condition. Use Status indicator.

Anatomy

Tile, words, actions and time. In a narrow row, the actions drop below the words.

Webhook, failed:Alarm webhook
Sam Okonkwo, North Pump, 5.0s, hooks.farmops.nz/wildeye
The endpoint returned 503 after 3 attempts
6 minutes ago, Mon 28 Sep 2026, 9:35 am

Tile: What ran. The glyph is the process; the colour is the family.
Status mark: How it went, with a different shape for each status.
Description and meta: The run’s name, then who, where, how long and to what.
Message: Failures and warnings only, in the status ink.
Actions: Appear over the row’s end on hover and focus. Pinned open here.
Time: Relative, with the exact time on hover and focus.

The target goes last, so it takes the space that’s left and truncates first.

Process types

Eight processes in four families, one colour each.

Alarms

Alarm email

Alarm SMS

Reports and exports

Report

CSV export

Integrations

API call

Webhook

Data import

Calculations

Calculation

No family is red, green or amber, because those colours mean status.

Statuses

Five, each with its own mark shape.

success

failure

warning

pending

info

Alarm email, succeeded:High soil moisture alarm
Emu Park, 1.2s, sam.okonkwo@emupark.co.nz
3 minutes ago, Mon 28 Sep 2026, 9:38 am
Alarm SMS, failed:Low tank level alarm
North Pump, 3.0s, +64 21 555 0142
Carrier rejected the message: the number is not reachable
14 minutes ago, Mon 28 Sep 2026, 9:27 am
API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am
Report, pending:Monthly rainfall report
Emu Park, rainfall-september.pdf
in 20 minutes, Mon 28 Sep 2026, 10:01 am
Data import, info:Logger firmware notes imported
Priya Raman, release-4.2.txt
1 hour ago, Mon 28 Sep 2026, 8:06 am

Failures and warnings add an edge and a message, so they stand out down a feed.

States

A clickable row is a button with a hover ground and a tab stop.

API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am

rest

API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am

hover

API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am

focus-visible

API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am

pressed

API call, warning:Reseller readings sync
Bore 12, 8.5s, api.agrilink.co.nz/v2/readings
Synced 118 of 120 readings; 2 rejected as duplicates
41 minutes ago, Mon 28 Sep 2026, 9:00 am

plain row, hover

Actions sit beside the row’s button, never inside it.

Metadata

Everything after the description is optional.

Report, warning:Weekly irrigation report
Priya Raman, Emu Park, 18.4s, Attachment, irrigation-weekly.pdf
Sent without rainfall; Weather station 4 has no readings since Friday
2 hours ago, Mon 28 Sep 2026, 7:09 am

everything

Report, warning:Weekly irrigation report
Priya Raman, 18.4s, Attachment
Sent without rainfall; Weather station 4 has no readings since Friday
2 hours ago, Mon 28 Sep 2026, 7:09 am

no site or target

Calculation, succeeded:Soil water deficit recalculated for 14 sites
9 minutes ago, Mon 28 Sep 2026, 9:32 am

description only

API call, succeeded:Reseller readings sync, 4 times
Bore 12, 640ms, api.agrilink.co.nz/v2/readings
38 minutes ago, Mon 28 Sep 2026, 9:03 am

count

Density

Comfortable for a full feed, compact for a narrow card.

Alarm SMS, failed:Low tank level alarm
North Pump, 3.0s, +64 21 555 0142
Carrier rejected the message: the number is not reachable
14 minutes ago, Mon 28 Sep 2026, 9:27 am
Alarm email, succeeded:Low tank level alarm
Sam Okonkwo, North Pump, 1.2s, ops@northpump.co.nz
14 minutes ago, Mon 28 Sep 2026, 9:27 am
API call, succeeded:Reseller readings sync, 4 times
Bore 12, 640ms, api.agrilink.co.nz/v2/readings
38 minutes ago, Mon 28 Sep 2026, 9:03 am

comfortable

Alarm SMS, failed:Low tank level alarm
North Pump, 3.0s, +64 21 555 0142
Carrier rejected the message: the number is not reachable
14 minutes ago, Mon 28 Sep 2026, 9:27 am
Alarm email, succeeded:Low tank level alarm
Sam Okonkwo, North Pump, 1.2s, ops@northpump.co.nz
14 minutes ago, Mon 28 Sep 2026, 9:27 am
API call, succeeded:Reseller readings sync, 4 times
Bore 12, 640ms, api.agrilink.co.nz/v2/readings
38 minutes ago, Mon 28 Sep 2026, 9:03 am

compact

Compact keeps each part to one line, and the target truncates first.

Timestamps

Alarm email, succeeded:Frost alarm
Emu Park
just now, Mon 28 Sep 2026, 9:40 am
Webhook, succeeded:Alarm webhook
North Pump
4 minutes ago, Mon 28 Sep 2026, 9:37 am
API call, succeeded:Reseller readings sync
Bore 12
38 minutes ago, Mon 28 Sep 2026, 9:03 am
Calculation, succeeded:Soil water deficit
Emu Park
5 hours ago, Mon 28 Sep 2026, 4:31 am
Report, succeeded:Weekly irrigation report
Emu Park
yesterday, Sun 27 Sep 2026, 1:41 pm
CSV export, succeeded:Season export
Emu Park
3 days ago, Fri 25 Sep 2026, 8:11 am
Data import, succeeded:Rain gauge history import
Emu Park
12 Sep, Sat 12 Sep 2026, 8:41 am

Just now, minutes, then hours through today, then Yesterday, days, and the date after a week.

In context

A feed card built from rows, grouped by day.

Recent activity

Emu Park and North Pump · last 24 hours

1 failed1 warning

Today

CSV export, pending:Soil moisture readings export
Sam Okonkwo, Emu Park, emu-park-soil-sep.csv
just now, Mon 28 Sep 2026, 9:40 am
Alarm SMS, failed:Low tank level alarm
North Pump, 3.0s, +64 21 555 0142
Carrier rejected the message: the number is not reachable
14 minutes ago, Mon 28 Sep 2026, 9:27 am
Alarm email, succeeded:Low tank level alarm
North Pump, 1.2s, ops@northpump.co.nz
14 minutes ago, Mon 28 Sep 2026, 9:27 am
API call, succeeded:Reseller readings sync, 4 times
Bore 12, 640ms, api.agrilink.co.nz/v2/readings
38 minutes ago, Mon 28 Sep 2026, 9:03 am
Report, warning:Weekly irrigation report
Emu Park, 18.4s, Attachment, irrigation-weekly.pdf
Sent without rainfall; Weather station 4 has no readings since Friday
2 hours ago, Mon 28 Sep 2026, 7:09 am

Yesterday

Calculation, succeeded:Soil water deficit
Emu Park, 220ms, Deficit (mm)
Sun 27 Sep 2026, 4:41 pm
Data import, info:Rain gauge history import
Priya Raman, Emu Park, 9.8s, rainfall-2025.xml
Sun 27 Sep 2026, 1:29 pm

Click a row, or tab to one and press Enter.

Under an earlier day’s heading, show clock times so the day isn’t repeated.

Content

Name the run: Low tank level alarm.
Say in the message what happened and what fixes it.

Accessibility

Screen readers hear the process, status and description, then meta, message and time.

Key	What it does
Tab	Moves to a clickable row, then into its actions.
Shift + Tab	Moves back.
Enter / Space	Opens the row, or runs the focused action.
Escape	Hides the time or action tooltip.

Props

Prop	Type	Default	Description
item	{ id, type, status, description, timestamp, … }	—	The run. Also: target, siteName, duration, errorMessage, actor, count.
item.type	string	—	One of the eight process types.
item.status	string	—	One of the five statuses.
showSite	boolean	true	Shows the site.
showTarget	boolean	true	Shows the recipient, file or URL.
density	'comfortable' \| 'compact'	'comfortable'	Compact: 24px tile, one line each.
now	Date \| number	mount time	Clock relative times count from. Share one.
timeZone	string	browser	For calendar days and exact times.
timeFormat	'relative' \| 'clock'	'relative'	Clock time, under a day heading.
onClick	(item) => void	—	Makes the whole row a button.
actions	ReactNode	—	WActivityAction buttons.
revealActions	'hover' \| 'always'	'hover'	Always keeps them showing. Touch screens always show them.
as	'div' \| 'li'	'div'	li inside a list.
WActivityAction label	string	—	Required. Accessible name and tooltip.
WActivityAction icon	ReactNode	—	16px Heroicons glyph.
WActivityAction disabled	boolean	false	Greys out; stops the click.

Tokens

Token	Value	Where it lands
--global-neutral-grey-200	#F5F5F5	Hover ground.
--global-neutral-grey-300	#F1F1F1	Pressed ground.
--global-neutral-grey-400	#ECECED	Initials disc.
--global-neutral-grey-500	#E6E6E6	Tile outline, row rules.
--global-neutral-grey-800	#ADACB0	Meta dots.
--global-neutral-grey-900	#7F7D83	Info mark, paperclip.
--global-neutral-grey-1000	#4F4D55	Meta, time, initials.
--global-neutral-grey-1300	#0A090B	Description.
--global-blue-1000	#1877F2	Focus, pending mark, output glyphs.
--global-green-800	#019939	Success mark.
--global-red-800	#E12121	Failure mark, edge.
--global-red-1000	#961616	Failure message.
--global-squash-800	#EC980C	Warning edge.
--global-squash-900	#C47E0A	Warning mark.
--global-squash-1100	#764C06	Warning message.
--global-violet-800	#6E23C9	Alarm glyphs.
--global-teal-700	#0692BC	Integration glyphs.
--global-purple-900	#7B238D	Calculation glyphs.