Detent web components
By Shane Logsdon

AI & chat

AI Agent Activity

Implemented

Real-time AI agent tool call execution trace and reasoning timeline

detent-ai-agent-activity

Port status
Catalog status
implemented
Origin
upstream
Phase
3
Wave
phase-3-data
Group
AI & chat

6.4 KB gzip for the class module

Variants

A running trace (header announces Running through a live region) and the same component after the run finished (3 of 4 completed). Every step carries a visible status word next to its coloured mark; steps with details render a real disclosure button with aria-expanded, and Expand all / Collapse all drive the whole trace. Data below is a local simulation — no model or tool is called.

Recorded states

  • loading recorded state; no setter
  • error recorded state; no setter
  • expanded recorded state; no setter
  • collapsed recorded state; no setter
  • active recorded state; no setter
  • completed recorded state; no setter
  • pending recorded state; no setter

Usage

Import

import '/components/ai-agent-activity/define.js';

// or register it yourself
import { DetentAIAgentActivity } from '/components/ai-agent-activity/ai-agent-activity.js';

Attributes

  • accent-color
  • agent-name
  • is-last
  • is-running
  • show-controls
  • title

Properties

  • activities
  • activity
  • defaultExpandedIds

Slots

  • default

Events

No events are recorded for this component.

Example

Runnable example: site/examples/ai-agent-activity.ts. The snippet below is generated from the catalogued attributes.

<detent-ai-agent-activity
  accent-color
  agent-name
  is-last
  is-running
  show-controls
  title="Activity"
></detent-ai-agent-activity>

Property-only values

const element = document.querySelector('detent-ai-agent-activity');
if (element !== null) {
  // activities: AgentActivityItemData[]
  element.activities = [];
  // defaultExpandedIds: string[]
  element.defaultExpandedIds = [];
}

Source

The pinned upstream source for this row:

  • src/components/ui/AIAgentActivity.tsx sha256 183530d4e2aa…

Native files

The native module and its artifacts:

  • src/components/ai-agent-activity/ai-agent-activity.ts
  • src/components/ai-agent-activity/styles.css
  • src/components/ai-agent-activity/define.ts
  • docs/components/ai-agent-activity.md
  • site/examples/ai-agent-activity.ts
  • tests/browser/ai-agent-activity.spec.ts
  • evidence/components/ai-agent-activity.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Attributes
AttributePropertyTypeDefaultNotes
accent-color———Recorded in the catalog as an attribute.
agent-nameagentNamestringundefinedKebab-case attribute; camelCase property.
is-last———Recorded in the catalog as an attribute.
is-runningisRunningbooleanfalsePresence semantics: present means true, absent means false.
show-controls———Recorded in the catalog as an attribute.
titletitlestring'Activity'Kebab-case attribute; camelCase property.

Properties

Properties
PropertyTypeDefaultNotes
activitiesAgentActivityItemData[][]Property-only: assign from script; not accepted as an attribute.
activity——Recorded in the catalog without a top-level type; pinned from source when the row is ported.
defaultExpandedIdsstring[][]Property-only: assign from script; not accepted as an attribute.

Events

No custom events are recorded for this component.

Slots

Slots
SlotNotes
defaultConsumer content; rendered through a slot, never re-created.

CSS customisation

  • `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
  • Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
  • React state/hooks replaced by element-owned state with pre-upgrade property preservation.
  • AgentActivityHeader, AgentActivityItem and AgentActivityTimeline ship as documented parts of the one tag instead of additional tags (PC-2.1 keeps one tag per catalog row). useAgentActivity() becomes useAgentActivity(element) — a live reader for slotted content, because there is no React context; getActivityIcon(status) ships as a module function returning a static SVG template.
  • activity (one AgentActivityItemData) plus is-last are the native projection of the AgentActivityItem subcomponent. In list mode the list end decides where the connector stops; the activity projection honours is-last (upstream default false, therefore a connector).
  • Framer Motion's AnimatePresence height spring (300/32/0.6) becomes a CSS grid-template-rows transition on the same duration token; the chevron rotation uses the shared fast duration. No spring helper is used because the animated property is a layout track, not a value the helper can drive.
  • The running spinner is a CSS rotation with a text status badge; upstream's animate-spin icon plus colour-only indicator is replaced by text + mark so status is never colour-only (PC-12.6 records the correction).
  • className is replaced by the documented parts and custom properties; there is no Tailwind in consumers.

What it does

A live agent trace: a header with the run status and global Expand all / Collapse all controls, a timeline of steps, and an inspector drawer per step with the call parameters, executed code, output and telemetry badges.

Upstream behaviour
  • Real-time execution timeline supporting thinking, searching, reading, tool execution, API calls, and code running
  • Interactive status indicators for pending, running (with active spinner), completed, error, and cancelled states
  • Expandable inspector drawer displaying structured inputs, outputs, JSON payloads, and executed code snippets
  • Step duration tracking and metadata telemetry badges for deep performance inspection
  • One-click global Expand All and Collapse All control buttons in the header
  • Smooth Framer Motion layout transitions tuned to physical spring tokens
Differences from upstream
  • `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
  • Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
  • React state/hooks replaced by element-owned state with pre-upgrade property preservation.
  • AgentActivityHeader, AgentActivityItem and AgentActivityTimeline ship as documented parts of the one tag instead of additional tags (PC-2.1 keeps one tag per catalog row). useAgentActivity() becomes useAgentActivity(element) — a live reader for slotted content, because there is no React context; getActivityIcon(status) ships as a module function returning a static SVG template.
  • activity (one AgentActivityItemData) plus is-last are the native projection of the AgentActivityItem subcomponent. In list mode the list end decides where the connector stops; the activity projection honours is-last (upstream default false, therefore a connector).
  • Framer Motion's AnimatePresence height spring (300/32/0.6) becomes a CSS grid-template-rows transition on the same duration token; the chevron rotation uses the shared fast duration. No spring helper is used because the animated property is a layout track, not a value the helper can drive.
  • The running spinner is a CSS rotation with a text status badge; upstream's animate-spin icon plus colour-only indicator is replaced by text + mark so status is never colour-only (PC-12.6 records the correction).
  • className is replaced by the documented parts and custom properties; there is no Tailwind in consumers.
Previous: Data Table Next: AI Response
Detent web components

Detent is a native rewrite of the MIT-licensed EasyUI catalog by Suraj Maurya; built from catalog/components.json and catalog/routes.json with no React-family runtime.

Docs

Components

Project

© 2026 Detent contributors. Upstream MIT license preserved. Human accessibility verification is still open; implementation status is shown per component.