Scaffold a New Event Display Component

Create a display component for a new agent event type. The event name should be provided via $ARGUMENTS.

Before You Start

Read the frontend scope guide: packages/web/CLAUDE.md

Study existing event display components:

• Simple: packages/web/components/Event/Display/ThoughtEvent.vue
• With data fields: packages/web/components/Event/Display/ToolEvent.vue
• Complex: packages/web/components/Event/Display/LLMEvent.vue
• Base wrapper: packages/web/components/Event/Display/Base.vue

Check the event component resolver: packages/web/composables/event/useEventComponent.ts

Step 1: Identify the Event Type

Check the backend event definition in packages/core/swiss_ai_hub/core/events/agent/ to understand:

• Event class name (e.g., MyNewEvent)
• Fields available on the event
• Parent event class (for inheritance-based resolution)

Also check the SDK types in packages/web/sdk/client/ for the TypeScript type.

Protocol events are control and display. Every event of the capability calls (Conversation, Memory, AttachedFiles, Knowledge request and result events) and of the tool loop (ToolLoop*, ToolCall*, ToolResult) is a ControlAndDisplayEvent, appears in the event history, and gets its own component here. The exceptions are ToolLoopStatusEvent and ToolLoopCondensedEvent, which are plain DisplayEvents. An event that renders as "Unknown" (UnknownEvent.vue) is missing its component and mapping. The event's _display_description also doubles as the chat's progress status, so write it as a short status sentence.

Step 2: Create the Component

Create packages/web/components/Event/Display/{EventName}Event.vue:

<template>
  <EventDisplayBase
    :event="event"
    :thread="thread"
    icon="<iconify-icon-name>"
  >
    <!-- Event-specific content rendered inside the collapsible panel -->
    <p class="text-2xl font-bold">
      {{ event.event.field_name }}
    </p>
  </EventDisplayBase>
</template>

<script setup lang="ts">
import type { ThreadDto, <EventName>Event, ContextualizedAgentEvent } from '@core/sdk/client'

defineProps<{
  event: ContextualizedAgentEvent & { event: <EventName>Event }
  thread: ThreadDto
}>()
</script>

EventDisplayBase Props

The Base.vue wrapper provides the card layout, raw data toggle, and agent badge. Your component fills the <slot>:

Step 3: Register in Event Resolver

Edit packages/web/composables/event/useEventComponent.ts:

1. Add the import to the #components import block:

import {
  // ... existing imports
  EventDisplay<EventName>Event,
} from '#components'

2. Add the mapping entry inside resolveComponentForEvent:

const mapping = {
  // ... existing mappings
  <EventName>Event: EventDisplay<EventName>Event,
}

Step 4: Choose an Icon

Browse icons at https://icon-sets.iconify.design/. The project uses these icon sets:

• mynaui:* (clean line icons)
• hugeicons:* (detailed icons)
• prime:* (PrimeVue icons)

Match the icon to the event's semantic meaning (e.g., mynaui:tool for tools, hugeicons:brain for LLM).

Step 5: Verify

1. Confirm the component file exists at packages/web/components/Event/Display/{EventName}Event.vue
2. Confirm useEventComponent.ts has both the #components import and the mapping entry for the new event
3. Verify the component wraps content in EventDisplayBase with event, thread, and icon props
4. Verify props use the intersection type pattern: ContextualizedAgentEvent & { event: {EventType} }
5. Verify SDK types exist for the event — if not, warn user to run /generate-sdk

Examples

Typical invocation: /scaffold-event-display ToolCall

Result: Creates:

• components/Event/Display/ToolCallEvent.vue — display component with EventDisplayBase wrapper
• Updated useEventComponent.ts — import and mapping entry added

Troubleshooting

Key Conventions

• Props typing: Always use ContextualizedAgentEvent & { event: {SpecificType} } for type narrowing (see ThoughtEvent.vue for example)
• Tailwind only: No custom CSS (exception: Base.vue has scoped styles for PrimeVue overrides)
• PrimeVue components: Use InputText, Button, DataTable, Tag etc. for data display
• No i18n needed: Event display names come from the backend event_display_name field
• Inheritance resolution: The resolver tries exact match first, then checks _parent_event_names