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
2026-03-11 17:46:41 -05:00 · 2026-01-13 09:04:54 -08:00
parent 306e6f358a
commit ae2f2459e9
6 changed files with 136 additions and 116 deletions
--- a/src-web/components/HttpResponseTimeline.tsx
+++ b/src-web/components/HttpResponseTimeline.tsx
@@ -47,8 +47,8 @@ function Inner({ response }: Props) {
          />
        );
      }}
-      renderDetail={({ event }) => (
-        <EventDetails event={event} showRaw={showRaw} setShowRaw={setShowRaw} />
+      renderDetail={({ event, onClose }) => (
+        <EventDetails event={event} showRaw={showRaw} setShowRaw={setShowRaw} onClose={onClose} />
      )}
    />
  );
@@ -64,10 +64,12 @@ function EventDetails({
  event,
  showRaw,
  setShowRaw,
+  onClose,
 }: {
  event: HttpResponseEvent;
  showRaw: boolean;
  setShowRaw: (v: boolean) => void;
+  onClose: () => void;
 }) {
  const { label } = getEventDisplay(event.event);
  const e = event.event;
@@ -81,72 +83,76 @@ function EventDetails({
  ];

  // Determine the title based on event type
-  const title =
-    e.type === 'header_up'
-      ? 'Header Sent'
-      : e.type === 'header_down'
-        ? 'Header Received'
-        : label;
+  const title = (() => {
+    switch (e.type) {
+      case 'header_up':
+        return 'Header Sent';
+      case 'header_down':
+        return 'Header Received';
+      case 'send_url':
+        return 'Request';
+      case 'receive_url':
+        return 'Response';
+      case 'redirect':
+        return 'Redirect';
+      case 'setting':
+        return 'Apply Setting';
+      case 'chunk_sent':
+        return 'Data Sent';
+      case 'chunk_received':
+        return 'Data Received';
+      case 'dns_resolved':
+        return e.overridden ? 'DNS Override' : 'DNS Resolution';
+      default:
+        return label;
+    }
+  })();

-  // Raw view - show plaintext representation
-  if (showRaw) {
-    const rawText = formatEventRaw(event.event);
-    return (
-      <div className="flex flex-col gap-2 h-full">
-        <EventDetailHeader title={title} timestamp={event.createdAt} actions={actions} />
-        <Editor language="text" defaultValue={rawText} readOnly stateKey={null} />
-      </div>
-    );
-  }
+  // Render content based on view mode and event type
+  const renderContent = () => {
+    // Raw view - show plaintext representation
+    if (showRaw) {
+      const rawText = formatEventRaw(event.event);
+      return <Editor language="text" defaultValue={rawText} readOnly stateKey={null} />;
+    }

-  // Headers - show name and value with Editor for JSON
-  if (e.type === 'header_up' || e.type === 'header_down') {
-    return (
-      <div className="flex flex-col gap-2 h-full">
-        <EventDetailHeader title={title} timestamp={event.createdAt} actions={actions} />
+    // Headers - show name and value
+    if (e.type === 'header_up' || e.type === 'header_down') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="Header">{e.name}</KeyValueRow>
          <KeyValueRow label="Value">{e.value}</KeyValueRow>
        </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }

-  // Request URL - show method and path separately
-  if (e.type === 'send_url') {
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader title="Request" timestamp={event.createdAt} actions={actions} />
+    // Request URL - show method and path separately
+    if (e.type === 'send_url') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="Method">
            <HttpMethodTagRaw forceColor method={e.method} />
          </KeyValueRow>
          <KeyValueRow label="Path">{e.path}</KeyValueRow>
        </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }

-  // Response status - show version and status separately
-  if (e.type === 'receive_url') {
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader title="Response" timestamp={event.createdAt} actions={actions} />
+    // Response status - show version and status separately
+    if (e.type === 'receive_url') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="HTTP Version">{e.version}</KeyValueRow>
          <KeyValueRow label="Status">
            <HttpStatusTagRaw status={e.status} />
          </KeyValueRow>
        </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }

-  // Redirect - show status, URL, and behavior
-  if (e.type === 'redirect') {
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader title="Redirect" timestamp={event.createdAt} actions={actions} />
+    // Redirect - show status, URL, and behavior
+    if (e.type === 'redirect') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="Status">
            <HttpStatusTagRaw status={e.status} />
@@ -156,47 +162,27 @@ function EventDetails({
            {e.behavior === 'drop_body' ? 'Drop body, change to GET' : 'Preserve method and body'}
          </KeyValueRow>
        </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }

-  // Settings - show as key/value
-  if (e.type === 'setting') {
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader title="Apply Setting" timestamp={event.createdAt} actions={actions} />
+    // Settings - show as key/value
+    if (e.type === 'setting') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="Setting">{e.name}</KeyValueRow>
          <KeyValueRow label="Value">{e.value}</KeyValueRow>
        </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }

-  // Chunks - show formatted bytes
-  if (e.type === 'chunk_sent' || e.type === 'chunk_received') {
-    const direction = e.type === 'chunk_sent' ? 'Sent' : 'Received';
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader
-          title={`Data ${direction}`}
-          timestamp={event.createdAt}
-          actions={actions}
-        />
-        <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>
-      </div>
-    );
-  }
+    // Chunks - show formatted bytes
+    if (e.type === 'chunk_sent' || e.type === 'chunk_received') {
+      return <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>;
+    }

-  // DNS Resolution - show hostname, addresses, and timing
-  if (e.type === 'dns_resolved') {
-    return (
-      <div className="flex flex-col gap-2">
-        <EventDetailHeader
-          title={e.overridden ? 'DNS Override' : 'DNS Resolution'}
-          timestamp={event.createdAt}
-          actions={actions}
-        />
+    // DNS Resolution - show hostname, addresses, and timing
+    if (e.type === 'dns_resolved') {
+      return (
        <KeyValueRows>
          <KeyValueRow label="Hostname">{e.hostname}</KeyValueRow>
          <KeyValueRow label="Addresses">{e.addresses.join(', ')}</KeyValueRow>
@@ -207,22 +193,19 @@ function EventDetails({
              `${String(e.duration)}ms`
            )}
          </KeyValueRow>
+          {e.overridden && <KeyValueRow label="Source">Workspace Override</KeyValueRow>}
        </KeyValueRows>
-        {e.overridden && (
-          <KeyValueRows>
-            <KeyValueRow label="Source">Workspace Override</KeyValueRow>
-          </KeyValueRows>
-        )}
-      </div>
-    );
-  }
+      );
+    }

-  // Default - use summary
-  const { summary } = getEventDisplay(event.event);
+    // Default - use summary
+    const { summary } = getEventDisplay(event.event);
+    return <div className="font-mono text-editor">{summary}</div>;
+  };
  return (
-    <div className="flex flex-col gap-1">
-      <EventDetailHeader title={label} timestamp={event.createdAt} actions={actions} />
-      <div className="font-mono text-editor">{summary}</div>
+    <div className="flex flex-col gap-2 h-full">
+      <EventDetailHeader title={title} timestamp={event.createdAt} actions={actions} onClose={onClose} />
+      {renderContent()}
    </div>
  );
 }
@@ -284,7 +267,7 @@ function getEventDisplay(event: HttpResponseEventData): EventDisplay {
    case 'redirect':
      return {
        icon: 'arrow_big_right_dash',
-        color: 'warning',
+        color: 'success',
        label: 'Redirect',
        summary: `Redirecting ${event.status} ${event.url}${event.behavior === 'drop_body' ? ' (drop body)' : ''}`,
      };
--- a/src-web/components/core/AutoScroller.tsx
+++ b/src-web/components/core/AutoScroller.tsx
@@ -80,7 +80,7 @@ export function AutoScroller<T>({
      {header ?? <span aria-hidden />}
      <div
        ref={containerRef}
-        className="h-full w-full overflow-y-auto"
+        className="h-full w-full overflow-y-auto focus:outline-none"
        onScroll={handleScroll}
        tabIndex={focusable ? 0 : undefined}
      >
--- a/src-web/components/core/EventViewer.tsx
+++ b/src-web/components/core/EventViewer.tsx
@@ -10,6 +10,8 @@ import { Button } from './Button';
 import { Separator } from './Separator';
 import { SplitLayout } from './SplitLayout';
 import { HStack } from './Stacks';
+import { IconButton } from './IconButton';
+import classNames from 'classnames';

 interface EventViewerProps<T> {
  /** Array of events to display */
@@ -27,7 +29,7 @@ interface EventViewerProps<T> {
  }) => ReactNode;

  /** Render the detail pane for the selected event */
-  renderDetail?: (props: { event: T; index: number }) => ReactNode;
+  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;

  /** Optional header above the event list (e.g., connection status) */
  header?: ReactNode;
@@ -73,6 +75,7 @@ export function EventViewer<T>({
  onActiveIndexChange,
 }: EventViewerProps<T>) {
  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);

  // Wrap setActiveIndex to notify parent
  const setActiveIndex = useCallback(
@@ -107,6 +110,8 @@ export function EventViewer<T>({
    virtualizer: virtualizerRef.current,
    isContainerFocused,
    enabled: enableKeyboardNav,
+    closePanel: () => setIsPanelOpen(false),
+    openPanel: () => setIsPanelOpen(true),
  });

  // Handle virtualizer ready callback
@@ -117,14 +122,23 @@ export function EventViewer<T>({
    [],
  );

-  // Toggle selection on click
+  // Handle row click - select and open panel, scroll into view
  const handleRowClick = useCallback(
    (index: number) => {
-      setActiveIndex((prev) => (prev === index ? null : index));
+      setActiveIndex(index);
+      setIsPanelOpen(true);
+      // Scroll to ensure selected item is visible after panel opens
+      requestAnimationFrame(() => {
+        virtualizerRef.current?.scrollToIndex(index, { align: 'auto' });
+      });
    },
    [setActiveIndex],
  );

+  const handleClose = useCallback(() => {
+    setIsPanelOpen(false);
+  }, []);
+
  if (isLoading) {
    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
  }
@@ -168,14 +182,14 @@ export function EventViewer<T>({
          </div>
        )}
        secondSlot={
-          activeEvent != null && renderDetail
+          activeEvent != null && renderDetail && isPanelOpen
            ? ({ style }) => (
                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
                  <div className="pb-3 px-2">
                    <Separator />
                  </div>
                  <div className="mx-2 overflow-y-auto">
-                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0 })}
+                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0, onClose: handleClose })}
                  </div>
                </div>
              )
@@ -198,28 +212,30 @@ export interface EventDetailAction {
 }

 interface EventDetailHeaderProps {
-  /** Title/label for the event */
  title: string;
-  /** Timestamp string (ISO format) - will be formatted as HH:mm:ss.SSS */
+  prefix?: ReactNode;
  timestamp?: string;
-  /** Optional action buttons to show before timestamp */
  actions?: EventDetailAction[];
-  /** Text to copy when copy button is clicked - renders a copy icon button after actions */
  copyText?: string;
+  onClose?: () => void;
 }

-/** Standardized header for event detail panes */
 export function EventDetailHeader({
  title,
+  prefix,
  timestamp,
  actions,
  copyText,
+  onClose,
 }: EventDetailHeaderProps) {
  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), 'HH:mm:ss.SSS') : null;

  return (
    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
-      <h3 className="font-semibold select-auto cursor-auto">{title}</h3>
+      <HStack space={2} className="items-center min-w-0">
+        {prefix}
+        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
+      </HStack>
      <HStack space={2} className="items-center">
        {actions?.map((action) => (
          <Button key={action.key} variant="border" size="xs" onClick={action.onClick}>
@@ -231,8 +247,11 @@ export function EventDetailHeader({
          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
        )}
        {formattedTime && (
-          <span className="text-text-subtlest font-mono text-editor">{formattedTime}</span>
+          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
        )}
+        <div className={classNames(copyText != null || formattedTime || (actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3")}>
+        <IconButton color="custom" className="text-text-subtle -mr-3" size="xs" icon="x" title="Close event panel" onClick={onClose} />
+        </div>
      </HStack>
    </div>
  );
--- a/src-web/components/core/EventViewerRow.tsx
+++ b/src-web/components/core/EventViewerRow.tsx
@@ -7,7 +7,7 @@ interface EventViewerRowProps {
  onClick: () => void;
  icon: ReactNode;
  content: ReactNode;
-  timestamp: string;
+  timestamp?: string;
 }

 export function EventViewerRow({
@@ -25,13 +25,13 @@ export function EventViewerRow({
        className={classNames(
          'w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left',
          'px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded',
-          isActive && '!bg-surface-active !text-text',
+          isActive && 'bg-surface-active !text-text',
          'text-text-subtle hover:text',
        )}
      >
        {icon}
        <div className="w-full truncate">{content}</div>
-        <div className="opacity-50">{format(`${timestamp}Z`, 'HH:mm:ss.SSS')}</div>
+        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, 'HH:mm:ss.SSS')}</div>}
      </button>
    </div>
  );
--- a/src-web/components/responseViewers/EventStreamViewer.tsx
+++ b/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
--- a/src-web/hooks/useEventViewerKeyboard.ts
+++ b/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],
  );
 }