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/hooks/useEventViewerKeyboard.ts

@@ -9,6 +9,8 @@ interface UseEventViewerKeyboardProps {
   virtualizer?: Virtualizer<HTMLDivElement, Element> | null;
   isContainerFocused: () => boolean;
   enabled?: boolean;
+  closePanel?: () => void;
+  openPanel?: () => void;
 }
 
 export function useEventViewerKeyboard({
@@ -18,6 +20,8 @@ export function useEventViewerKeyboard({
   virtualizer,
   isContainerFocused,
   enabled = true,
+  closePanel,
+  openPanel,
 }: UseEventViewerKeyboardProps) {
   const selectPrev = useCallback(() => {
     if (totalCount === 0) return;
@@ -62,9 +66,20 @@ export function useEventViewerKeyboard({
     (e) => {
       if (!enabled || !isContainerFocused()) return;
       e.preventDefault();
-      setActiveIndex(null);
+      closePanel?.();
     },
     undefined,
-    [enabled, isContainerFocused, setActiveIndex],
+    [enabled, isContainerFocused, closePanel],
+  );
+
+  useKey(
+    (e) => e.key === 'Enter' || e.key === ' ',
+    (e) => {
+      if (!enabled || !isContainerFocused() || activeIndex == null) return;
+      e.preventDefault();
+      openPanel?.();
+    },
+    undefined,
+    [enabled, isContainerFocused, activeIndex, openPanel],
   );
 }