Agent Skills: Add Event Type

Add Event Type

Instructions

1. Read current event types in frontend/src/App.tsx:

   • Find the EventType union type definition
   • Review existing block components (UserMessageBlock, PlanBlock, TodoBlock, etc.)

2. Define the new event type interface:

   type NewEventType = {
     type: 'new_type';
     // Add required fields
   };
   

3. Add to EventType union:

   type EventType = UserMessage | Plan | Todo | ... | NewEventType;
   

4. Create a new block component following existing patterns:

   function NewTypeBlock({ event }: { event: NewEventType }) {
     return (
       <div className="p-3 bg-zinc-800/50 rounded-lg border border-zinc-700/50">
         {/* Render event data */}
       </div>
     );
   }
   

5. Add case to the feed rendering switch/conditional in the main component

6. Update WebSocket message handler if backend sends this event type

Examples

• "Add a new 'search_result' event type"
• "Create a block for displaying errors"
• "Add event type for progress updates"

Guardrails

• Follow existing naming conventions (PascalCase components, snake_case event types)
• Use existing Tailwind classes for consistent styling
• Ensure TypeScript types are complete (no any)
• Test by sending mock event through WebSocket