Improve EventViewer UX

- Separate selected item from panel open state (closing panel keeps selection)
- Scroll selected item into view when detail panel opens
- Enter/Space opens detail panel, Escape closes it
- Remove browser focus outline on scroll container
- Add prefix prop to EventDetailHeader for labels
- Make timestamp optional in EventViewerRow
- Add close button to EventDetailHeader
- Fix title truncation with min-w-0
- Consolidate HttpResponseTimeline title generation
- Add ID/event labels to SSE detail header
- Remove fake timestamp from SSE events

Closes https://feedback.yaak.app/p/feedback-on-sse-viewer-ux-in-yaak

src-web/components/responseViewers/EventStreamViewer.tsx

@@ -51,12 +51,13 @@ function ActualEventStreamViewer({ response }: Props) {
               <span className="truncate text-xs">{event.data.slice(0, 1000)}</span>
             </HStack>
           }
-          timestamp={new Date().toISOString().slice(0, -1)} // SSE events don't have timestamps
+
         />
       )}
-      renderDetail={({ event }) => (
+      renderDetail={({ event, index }) => (
         <EventDetail
           event={event}
+          index={index}
           showLarge={showLarge}
           showingLarge={showingLarge}
           setShowLarge={setShowLarge}
@@ -69,12 +70,14 @@ function ActualEventStreamViewer({ response }: Props) {
 
 function EventDetail({
   event,
+  index,
   showLarge,
   showingLarge,
   setShowLarge,
   setShowingLarge,
 }: {
   event: ServerSentEvent;
+  index: number;
   showLarge: boolean;
   showingLarge: boolean;
   setShowLarge: (v: boolean) => void;
@@ -87,7 +90,7 @@ function EventDetail({
 
   return (
     <div className="flex flex-col h-full">
-      <EventDetailHeader title="Message Received" />
+      <EventDetailHeader title="Message Received" prefix={<EventLabels event={event} index={index} />} />
       {!showLarge && event.data.length > 1000 * 1000 ? (
         <VStack space={2} className="italic text-text-subtlest">
           Message previews larger than 1MB are hidden