inspect-ai 0.3.98__py3-none-any.whl → 0.3.100__py3-none-any.whl

inspect_ai/_view/www/src/app/samples/SampleDisplay.tsx

@@ -15,6 +15,7 @@ import {
   RefObject,
   useCallback,
   useMemo,
+  useRef,
 } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { EvalSample, Events } from "../../@types/log";
@@ -37,19 +38,14 @@ import { estimateSize } from "../../utils/json";
 import { printHeadingHtml, printHtml } from "../../utils/print";
 import { RecordTree } from "../content/RecordTree";
 import { useSampleDetailNavigation } from "../routing/navigationHooks";
-import {
-  sampleMessageUrl,
-  sampleUrl,
-  supportsLinking,
-  toFullUrl,
-} from "../routing/url";
+import { sampleUrl } from "../routing/url";
 import { ModelTokenTable } from "../usage/ModelTokenTable";
 import { ChatViewVirtualList } from "./chat/ChatViewVirtualList";
 import { messagesFromEvents } from "./chat/messages";
 import styles from "./SampleDisplay.module.css";
 import { SampleSummaryView } from "./SampleSummaryView";
 import { SampleScoresView } from "./scores/SampleScoresView";
-import { TranscriptVirtualList } from "./transcript/TranscriptVirtualList";
+import { TranscriptPanel } from "./transcript/TranscriptPanel";
 
 interface SampleDisplayProps {
   id: string;
@@ -87,7 +83,19 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
   // Navigation hook for URL updates
   const navigate = useNavigate();
 
-  const sampleSummary = filteredSamples[selectedSampleIndex];
+  // Ref for samples tabs (used to meaure for offset)
+  const tabsRef: RefObject<HTMLUListElement | null> = useRef(null);
+  const tabsHeight = useMemo(() => {
+    if (tabsRef.current) {
+      const height = tabsRef.current.getBoundingClientRect().height;
+      return height;
+    }
+    return -1;
+  }, [tabsRef.current]);
+
+  const sampleSummary = useMemo(() => {
+    return filteredSamples[selectedSampleIndex];
+  }, [filteredSamples, selectedSampleIndex]);
 
   // Consolidate the events and messages into the proper list
   // whether running or not
@@ -115,12 +123,6 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
     epoch?: string;
   }>();
 
-  const getMessageUrl = (id: string) => {
-    return id && urlLogPath && supportsLinking()
-      ? toFullUrl(sampleMessageUrl(id, urlLogPath, urlSampleId, urlEpoch))
-      : undefined;
-  };
-
   // Tab selection
   const onSelectedTab = useCallback(
     (e: MouseEvent<HTMLElement>) => {
@@ -171,7 +173,9 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
   }
 
   // Is the sample running?
-  const running = isRunning(sampleSummary, runningSampleData);
+  const running = useMemo(() => {
+    return isRunning(sampleSummary, runningSampleData);
+  }, [sampleSummary, runningSampleData]);
 
   const sampleDetailNavigation = useSampleDetailNavigation();
 
@@ -182,6 +186,8 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
       ) : undefined}
       <TabSet
         id={tabsetId}
+        tabsRef={tabsRef}
+        className={clsx(styles.tabControls)}
         tabControlsClassName={clsx("text-size-base")}
         tabPanelsClassName={clsx(styles.tabPanel)}
         tools={tools}
@@ -198,11 +204,12 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
           }
           scrollable={false}
         >
-          <TranscriptVirtualList
+          <TranscriptPanel
             key={`${baseId}-transcript-display-${id}`}
             id={`${baseId}-transcript-display-${id}`}
             events={sampleEvents || []}
             initialEventId={sampleDetailNavigation.event}
+            topOffset={tabsHeight}
             running={running}
             scrollRef={scrollRef}
           />
@@ -221,11 +228,11 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
             id={`${baseId}-chat-${id}`}
             messages={sampleMessages}
             initialMessageId={sampleDetailNavigation.message}
+            topOffset={tabsHeight}
             indented={true}
             scrollRef={scrollRef}
             toolCallStyle="complete"
             running={running}
-            getMessageUrl={getMessageUrl}
           />
         </TabPanel>
         <TabPanel
@@ -275,7 +282,7 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
                       output={sample.error.traceback_ansi}
                       className={clsx("text-size-small", styles.ansi)}
                       style={{
-                        fontSize: "clamp(0.4rem, calc(0.15em + 1vw), 0.8rem)",
+                        fontSize: "clamp(0.3rem, 1.1vw, 0.8rem)",
                         margin: "0.5em 0",
                       }}
                     />
@@ -291,7 +298,7 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
                         output={retry.traceback_ansi}
                         className={clsx("text-size-small", styles.ansi)}
                         style={{
-                          fontSize: "clamp(0.4rem, calc(0.15em + 1vw), 0.8rem)",
+                          fontSize: "clamp(0.3rem, 1.1vw, 0.8rem)",
                           margin: "0.5em 0",
                         }}
                       />

inspect_ai/_view/www/src/app/samples/SampleSummaryView.module.css

@@ -10,8 +10,7 @@
   display: grid;
   grid-column-gap: 1em;
   border-bottom: solid var(--bs-border-color) 1px;
-  margin-bottom: 1em;
-  padding: 0em 1em 1em 1em;
+  padding: 1em 1em 1em 1em;
 }
 
 .centerLabel {

inspect_ai/_view/www/src/app/samples/chat/ChatMessage.tsx

@@ -9,6 +9,11 @@ import {
 import { CopyButton } from "../../../components/CopyButton";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { ApplicationIcons } from "../../appearance/icons";
+import {
+  supportsLinking,
+  toFullUrl,
+  useSampleMessageUrl,
+} from "../../routing/url";
 import styles from "./ChatMessage.module.css";
 import { MessageContents } from "./MessageContents";
 import { ChatViewToolCallStyle } from "./types";
@@ -19,7 +24,6 @@ interface ChatMessageProps {
   toolMessages: ChatMessageTool[];
   indented?: boolean;
   toolCallStyle: ChatViewToolCallStyle;
-  getMessageUrl?: (id: string) => string | undefined;
 }
 
 export const ChatMessage: FC<ChatMessageProps> = ({
@@ -28,10 +32,8 @@ export const ChatMessage: FC<ChatMessageProps> = ({
   toolMessages,
   indented,
   toolCallStyle,
-  getMessageUrl,
 }) => {
-  const messageUrl =
-    message.id && getMessageUrl ? getMessageUrl(message.id) : undefined;
+  const messageUrl = useSampleMessageUrl(message.id);
 
   const collapse = message.role === "system" || message.role === "user";
   return (
@@ -46,10 +48,10 @@ export const ChatMessage: FC<ChatMessageProps> = ({
     >
       <div className={clsx(styles.messageGrid, "text-style-label")}>
         {message.role}
-        {messageUrl ? (
+        {supportsLinking() && messageUrl ? (
           <CopyButton
             icon={ApplicationIcons.link}
-            value={messageUrl}
+            value={toFullUrl(messageUrl)}
             className={clsx(styles.copyLink)}
           />
         ) : (

inspect_ai/_view/www/src/app/samples/chat/ChatMessageRow.tsx

@@ -13,7 +13,6 @@ interface ChatMessageRowProps {
   toolCallStyle: ChatViewToolCallStyle;
   indented?: boolean;
   padded?: boolean;
-  getMessageUrl?: (id: string) => string | undefined;
   highlightUserMessage?: boolean;
 }
 
@@ -26,7 +25,6 @@ export const ChatMessageRow: FC<ChatMessageRowProps> = ({
   resolvedMessage,
   toolCallStyle,
   indented,
-  getMessageUrl,
   highlightUserMessage,
 }) => {
   if (number) {
@@ -56,7 +54,6 @@ export const ChatMessageRow: FC<ChatMessageRowProps> = ({
             toolMessages={resolvedMessage.toolMessages}
             indented={indented}
             toolCallStyle={toolCallStyle}
-            getMessageUrl={getMessageUrl}
           />
         </div>
 
@@ -82,7 +79,6 @@ export const ChatMessageRow: FC<ChatMessageRowProps> = ({
           toolMessages={resolvedMessage.toolMessages}
           indented={indented}
           toolCallStyle={toolCallStyle}
-          getMessageUrl={getMessageUrl}
         />
         {resolvedMessage.message.role === "user" ? (
           <div style={{ height: "10px" }}></div>

inspect_ai/_view/www/src/app/samples/chat/ChatViewVirtualList.tsx

@@ -16,6 +16,7 @@ interface ChatViewVirtualListProps {
   className?: string | string[];
   messages: Messages;
   initialMessageId?: string | null;
+  topOffset?: number;
   toolCallStyle: ChatViewToolCallStyle;
   indented: boolean;
   numbered?: boolean;
@@ -32,13 +33,13 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
     id,
     messages,
     initialMessageId,
+    topOffset,
     className,
     toolCallStyle,
     indented,
     numbered = true,
     scrollRef,
     running,
-    getMessageUrl,
   }) => {
     const collapsedMessages = useMemo(() => {
       return resolveMessages(messages);
@@ -66,7 +67,6 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
           resolvedMessage={item}
           indented={indented}
           toolCallStyle={toolCallStyle}
-          getMessageUrl={getMessageUrl}
           highlightUserMessage={true}
         />
       );
@@ -98,6 +98,7 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
         data={collapsedMessages}
         renderRow={renderRow}
         initialTopMostItemIndex={initialMessageIndex}
+        offsetTop={topOffset}
         live={running}
         showProgress={running}
         components={{ Item }}

inspect_ai/_view/www/src/app/samples/chat/MessageContent.tsx

@@ -54,6 +54,7 @@ export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
             type: "text",
             text: content,
             refusal: null,
+            internal: null,
           },
           index === contents.length - 1,
         );
@@ -78,6 +79,7 @@ export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
       type: "text",
       text: contents,
       refusal: null,
+      internal: null,
     };
     return messageRenderers["text"].render(
       "text-message-content",

inspect_ai/_view/www/src/app/samples/chat/MessageContents.tsx

@@ -108,6 +108,7 @@ const resolveToolMessage = (toolMessage?: ChatMessageTool): ContentTool[] => {
             type: "text",
             text: content,
             refusal: null,
+            internal: null,
           },
         ],
       },
@@ -123,6 +124,7 @@ const resolveToolMessage = (toolMessage?: ChatMessageTool): ContentTool[] => {
                 type: "text",
                 text: con,
                 refusal: null,
+                internal: null,
               },
             ],
           } as ContentTool;

inspect_ai/_view/www/src/app/samples/chat/messages.ts

@@ -129,6 +129,7 @@ const normalizeContent = (
       type: "text",
       text: content,
       refusal: null,
+      internal: null,
     };
   } else {
     return content;

inspect_ai/_view/www/src/app/samples/chat/tools/ToolCallView.tsx

@@ -175,6 +175,7 @@ const normalizeContent = (
             type: "text",
             text: String(output),
             refusal: null,
+            internal: null,
           },
         ],
       },

inspect_ai/_view/www/src/app/samples/list/SampleRow.tsx

@@ -115,7 +115,7 @@ export const SampleRow: FC<SampleRowProps> = ({
         ) : completed ? (
           scoreRendered
         ) : (
-          <PulsingDots />
+          <PulsingDots subtle={false} />
         )}
       </div>
     </div>

inspect_ai/_view/www/src/app/samples/scores/SampleScoresGrid.module.css

@@ -1,8 +1,8 @@
 .container {
   display: grid;
   grid-template-columns:
-    minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr)
-    2fr;
+    minmax(0, max-content) minmax(0, max-content) minmax(0, max-content)
+    5fr;
   column-gap: 0.75em;
 }
 

inspect_ai/_view/www/src/app/samples/transcript/ErrorEventView.tsx

@@ -19,10 +19,9 @@ export const ErrorEventView: FC<ErrorEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title="Error"
       className={className}
@@ -32,7 +31,7 @@ export const ErrorEventView: FC<ErrorEventViewProps> = ({
       <ANSIDisplay
         output={event.error.traceback_ansi}
         style={{
-          fontSize: "clamp(0.5rem, calc(0.25em + 1vw), 0.8rem)",
+          fontSize: "clamp(0.3rem, 1.1vw, 0.8rem)",
           margin: "0.5em 0",
         }}
       />

inspect_ai/_view/www/src/app/samples/transcript/InfoEventView.tsx

@@ -36,7 +36,7 @@ export const InfoEventView: FC<InfoEventViewProps> = ({
 
   return (
     <EventPanel
-      id={eventNode.id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title={"Info" + (event.source ? ": " + event.source : "")}
       className={className}

inspect_ai/_view/www/src/app/samples/transcript/InputEventView.tsx

@@ -19,10 +19,9 @@ export const InputEventView: FC<InputEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title="Input"
       className={className}

inspect_ai/_view/www/src/app/samples/transcript/ModelEventView.module.css

@@ -32,7 +32,7 @@
 }
 
 .progress {
-  margin-left: 2em;
+  margin-left: 0.5em;
 }
 
 .toolConfig {

inspect_ai/_view/www/src/app/samples/transcript/ModelEventView.tsx

@@ -69,7 +69,7 @@ export const ModelEventView: FC<ModelEventViewProps> = ({
 
   return (
     <EventPanel
-      id={eventNode.id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       className={className}
       title={formatTitle(panelTitle, totalUsage, callTime)}

inspect_ai/_view/www/src/app/samples/transcript/SampleInitEventView.tsx

@@ -56,7 +56,7 @@ export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
 
   return (
     <EventPanel
-      id={eventNode.id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       className={className}
       title="Sample"

inspect_ai/_view/www/src/app/samples/transcript/SampleLimitEventView.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC } from "react";
 import { SampleLimitEvent, Type10 } from "../../../@types/log";
 import { ApplicationIcons } from "../../appearance/icons";
@@ -55,13 +56,13 @@ export const SampleLimitEventView: FC<SampleLimitEventViewProps> = ({
 
   return (
     <EventPanel
-      id={eventNode.id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title={title}
       icon={icon}
       className={className}
     >
-      {eventNode.event.message}
+      <div className={clsx("text-size-smaller")}>{eventNode.event.message}</div>
     </EventPanel>
   );
 };

inspect_ai/_view/www/src/app/samples/transcript/SandboxEventView.tsx

@@ -25,10 +25,9 @@ export const SandboxEventView: FC<SandboxEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       className={className}
       title={`Sandbox: ${event.action}`}
@@ -36,11 +35,11 @@ export const SandboxEventView: FC<SandboxEventViewProps> = ({
       subTitle={formatTiming(event.timestamp, event.working_start)}
     >
       {event.action === "exec" ? (
-        <ExecView id={`${id}-exec`} event={event} />
+        <ExecView id={`${eventNode.id}-exec`} event={event} />
       ) : event.action === "read_file" ? (
-        <ReadFileView id={`${id}-read-file`} event={event} />
+        <ReadFileView id={`${eventNode.id}-read-file`} event={event} />
       ) : (
-        <WriteFileView id={`${id}-write-file`} event={event} />
+        <WriteFileView id={`${eventNode.id}-write-file`} event={event} />
       )}
     </EventPanel>
   );

inspect_ai/_view/www/src/app/samples/transcript/ScoreEventView.tsx

@@ -31,7 +31,7 @@ export const ScoreEventView: FC<ScoreEventViewProps> = ({
 
   return (
     <EventPanel
-      id={eventNode.id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title={(event.intermediate ? "Intermediate " : "") + "Score"}
       className={clsx(className, "text-size-small")}

inspect_ai/_view/www/src/app/samples/transcript/SpanEventView.tsx

@@ -21,7 +21,6 @@ export const SpanEventView: FC<SpanEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
   const descriptor = spanDescriptor(event);
   const title =
     descriptor.name ||
@@ -30,7 +29,7 @@ export const SpanEventView: FC<SpanEventViewProps> = ({
 
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       childIds={children.map((child) => child.id)}
       className={clsx("transcript-span", className)}

inspect_ai/_view/www/src/app/samples/transcript/StepEventView.tsx

@@ -21,8 +21,6 @@ export const StepEventView: FC<StepEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
-
   const descriptor = stepDescriptor(event);
   const title =
     descriptor.name ||
@@ -31,7 +29,7 @@ export const StepEventView: FC<StepEventViewProps> = ({
 
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       childIds={children.map((child) => child.id)}
       className={clsx("transcript-step", className)}

inspect_ai/_view/www/src/app/samples/transcript/SubtaskEventView.tsx

@@ -23,7 +23,6 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
   const body: ReactNode[] = [];
   if (event.type === "fork") {
     body.push(
@@ -48,7 +47,7 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
   const type = event.type === "fork" ? "Fork" : "Subtask";
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       className={className}
       title={formatTitle(

inspect_ai/_view/www/src/app/samples/transcript/ToolEventView.tsx

@@ -28,7 +28,6 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
 
   // Extract tool input
   const { input, functionCall, highlightLanguage } = useMemo(
@@ -56,7 +55,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
   const title = `Tool: ${event.view?.title || event.function}`;
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title={formatTitle(title, undefined, event.working_time)}
       className={className}
@@ -67,7 +66,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
     >
       <div data-name="Summary" className={styles.summary}>
         <ToolCallView
-          id={`${id}-tool-call`}
+          id={`${eventNode.id}-tool-call`}
           functionCall={functionCall}
           input={input}
           highlightLanguage={highlightLanguage}
@@ -78,7 +77,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
 
         {lastModelNode ? (
           <ChatView
-            id={`${id}-toolcall-chatmessage`}
+            id={`${eventNode.id}-toolcall-chatmessage`}
             messages={lastModelNode.event.output.choices.map((m) => m.message)}
             numbered={false}
             toolCallStyle="compact"

inspect_ai/_view/www/src/app/samples/transcript/TranscriptPanel.module.css

@@ -0,0 +1,42 @@
+.container {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 180px 1fr;
+  min-height: 100vh;
+  transition: grid-template-columns 0.3s ease;
+}
+
+.container.collapsed {
+  grid-template-columns: 1.5em 1fr;
+}
+
+.treeContainer {
+  padding: 0.5em;
+  border-right: solid 1px var(--bs-light-border-subtle);
+  width: 100%;
+  height: 100%;
+}
+
+.collapsed .treeContainer {
+  border-top: solid 1px var(--bs-light-border-subtle);
+}
+
+.listContainer {
+  background-color: var(--bs-body-bg);
+}
+
+.outline {
+  margin-bottom: 1em;
+}
+
+.outlineToggle {
+  cursor: pointer;
+  font-size: 0.8em;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
+.collapsed .outline {
+  display: none;
+}

inspect_ai/_view/www/src/app/samples/transcript/TranscriptPanel.tsx

@@ -0,0 +1,77 @@
+import clsx from "clsx";
+import { FC, memo, RefObject } from "react";
+import { useParams } from "react-router-dom";
+import { Events } from "../../../@types/log";
+import { StickyScroll } from "../../../components/StickyScroll";
+import { useCollapsedState } from "../../../state/hooks";
+import { ApplicationIcons } from "../../appearance/icons";
+import { TranscriptOutline } from "./outline/TranscriptOutline";
+import styles from "./TranscriptPanel.module.css";
+import { TranscriptVirtualList } from "./TranscriptVirtualList";
+import { useEventNodes } from "./transform/hooks";
+
+interface TranscriptPanelProps {
+  id: string;
+  events: Events;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  running?: boolean;
+  initialEventId?: string | null;
+  topOffset?: number;
+}
+
+/**
+ * Renders the Transcript Virtual List.
+ */
+export const TranscriptPanel: FC<TranscriptPanelProps> = memo((props) => {
+  let { id, scrollRef, events, running, initialEventId, topOffset } = props;
+
+  const { eventNodes, defaultCollapsedIds } = useEventNodes(
+    events,
+    running === true,
+  );
+  const { logPath } = useParams<{ logPath: string }>();
+
+  const [collapsed, setCollapsed] = useCollapsedState(
+    `transcript-panel-${logPath || "na"}`,
+    false,
+  );
+
+  return (
+    <div
+      className={clsx(
+        styles.container,
+        collapsed ? styles.collapsed : undefined,
+      )}
+    >
+      <StickyScroll
+        scrollRef={scrollRef}
+        className={styles.treeContainer}
+        offsetTop={topOffset}
+      >
+        <TranscriptOutline
+          className={clsx(styles.outline)}
+          eventNodes={eventNodes}
+          running={running}
+          defaultCollapsedIds={defaultCollapsedIds}
+          scrollRef={scrollRef}
+        />
+        <div
+          className={styles.outlineToggle}
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <i className={ApplicationIcons.sidebar} />
+        </div>
+      </StickyScroll>
+      <TranscriptVirtualList
+        id={id}
+        eventNodes={eventNodes}
+        defaultCollapsedIds={defaultCollapsedIds}
+        scrollRef={scrollRef}
+        running={running}
+        initialEventId={initialEventId === undefined ? null : initialEventId}
+        offsetTop={topOffset}
+        className={styles.listContainer}
+      />
+    </div>
+  );
+});