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.)

1. Define the new event type interface:

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

1. Add to EventType union:

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

1. Create a new block component following existing patterns:

``typescript 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> ); } ``

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

1. 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