inspect-ai 0.3.70__py3-none-any.whl → 0.3.72__py3-none-any.whl

inspect_ai/_view/www/src/samples/transcript/TranscriptView.tsx

@@ -1,5 +1,4 @@
 import React, { RefObject, useCallback, useState } from "react";
-import { VirtualList } from "../../components/VirtualList";
 import { Events } from "../../types/log";
 import { ApprovalEventView } from "./ApprovalEventView";
 import { ErrorEventView } from "./ErrorEventView";
@@ -17,6 +16,7 @@ import { ToolEventView } from "./ToolEventView";
 import { EventNode, EventType, TranscriptEventState } from "./types";
 
 import clsx from "clsx";
+import { Virtuoso } from "react-virtuoso";
 import { SandboxEventView } from "./SandboxEventView";
 import styles from "./TranscriptView.module.css";
 
@@ -84,7 +84,7 @@ export const TranscriptVirtualList: React.FC<TranscriptVirtualListProps> = (
     (state: TranscriptEventState) => {
       setTranscriptState(state);
     },
-    [transcriptState, setTranscriptState],
+    [setTranscriptState],
   );
 
   return (
@@ -116,9 +116,11 @@ export const TranscriptVirtualListComponent: React.FC<
     (eventId: string, state: TranscriptEventState) => {
       setTranscriptState({ ...transcriptState, [eventId]: state });
     },
-    [setTranscriptState],
+    [transcriptState, setTranscriptState],
   );
 
+  const [followOutput, setFollowOutput] = useState(false);
+
   const renderRow = (item: EventNode, index: number) => {
     const bgClass = item.depth % 2 == 0 ? styles.darkenedBg : styles.normalBg;
     const paddingClass = index === 0 ? styles.first : undefined;
@@ -140,12 +142,24 @@ export const TranscriptVirtualListComponent: React.FC<
   };
 
   return (
-    <VirtualList
+    <Virtuoso
+      customScrollParent={scrollRef?.current ? scrollRef.current : undefined}
+      style={{ height: "100%", width: "100%" }}
       data={eventNodes}
-      tabIndex={0}
-      renderRow={renderRow}
-      scrollRef={scrollRef}
-      className={styles.nodes}
+      itemContent={(index: number, data: EventNode) => {
+        return renderRow(data, index);
+      }}
+      increaseViewportBy={{ top: 1000, bottom: 1000 }}
+      overscan={{
+        main: 10,
+        reverse: 10,
+      }}
+      followOutput={followOutput}
+      atBottomStateChange={(atBottom: boolean) => {
+        setFollowOutput(atBottom);
+      }}
+      skipAnimationFrameInResizeObserver={true}
+      className={clsx("transcript")}
     />
   );
 };
@@ -165,6 +179,13 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
   setTranscriptState,
   eventNodes,
 }) => {
+  const setEventState = useCallback(
+    (state: TranscriptEventState, eventId: string) => {
+      setTranscriptState({ ...transcriptState, [eventId]: state });
+    },
+    [setTranscriptState, transcriptState],
+  );
+
   const rows = eventNodes.map((eventNode, index) => {
     const clz = [styles.eventNode];
     if (eventNode.depth % 2 == 0) {
@@ -175,12 +196,6 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
     }
 
     const eventId = `${id}-event${index}`;
-    const setEventState = useCallback(
-      (state: TranscriptEventState) => {
-        setTranscriptState({ ...transcriptState, [eventId]: state });
-      },
-      [setTranscriptState, transcriptState],
-    );
 
     const row = (
       <div
@@ -195,7 +210,9 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
           node={eventNode}
           className={clsx(clz)}
           eventState={transcriptState[eventId] || {}}
-          setEventState={setEventState}
+          setEventState={(state: TranscriptEventState) => {
+            setEventState(state, eventId);
+          }}
         />
       </div>
     );
@@ -417,6 +434,7 @@ const fixupEventStream = (events: Events) => {
       type: null,
       name: "sample_init",
       pending: false,
+      working_start: 0,
     });
 
     fixedUp.splice(initEventIndex + 2, 0, {
@@ -426,6 +444,7 @@ const fixupEventStream = (events: Events) => {
       type: null,
       name: "sample_init",
       pending: false,
+      working_start: 0,
     });
   }
 

inspect_ai/_view/www/src/samples/transcript/event/EventNav.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 
+import { FC } from "react";
 import styles from "./EventNav.module.css";
 
 interface EventNavProps {
@@ -11,7 +12,7 @@ interface EventNavProps {
 /**
  * Component to render a single navigation item.
  */
-export const EventNav: React.FC<EventNavProps> = ({
+export const EventNav: FC<EventNavProps> = ({
   target,
   title,
   selectedNav,

inspect_ai/_view/www/src/samples/transcript/event/EventNavs.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { EventNav } from "./EventNav";
 
+import { FC } from "react";
 import styles from "./EventNavs.module.css";
 
 interface EventNavsProps {
@@ -12,7 +13,7 @@ interface EventNavsProps {
 /**
  * Component to render navigation items.
  */
-export const EventNavs: React.FC<EventNavsProps> = ({
+export const EventNavs: FC<EventNavsProps> = ({
   navs,
   selectedNav,
   setSelectedNav,

inspect_ai/_view/www/src/samples/transcript/event/EventRow.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC, ReactNode } from "react";
 import { ApplicationIcons } from "../../../appearance/icons";
 import styles from "./EventRow.module.css";
 
@@ -6,12 +7,12 @@ interface EventRowProps {
   title: string;
   icon: string;
   className?: string | string[];
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
 }
 /**
  * Renders the EventRow component.
  */
-export const EventRow: React.FC<EventRowProps> = ({
+export const EventRow: FC<EventRowProps> = ({
   title,
   icon,
   className,

inspect_ai/_view/www/src/samples/transcript/event/EventSection.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import styles from "./EventSection.module.css";
 
 interface EventSectionProps {
@@ -11,7 +11,7 @@ interface EventSectionProps {
 /**
  * Renders the Event Section component.
  */
-export const EventSection: React.FC<EventSectionProps> = ({
+export const EventSection: FC<EventSectionProps> = ({
   title,
   children,
   className,

inspect_ai/_view/www/src/samples/transcript/event/EventTimingPanel.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: 0 auto auto;
+  column-gap: 1.5em;
+  row-gap: 0.2em;
+}
+
+.col2 {
+  grid-column: 2;
+}
+
+.col1_3 {
+  grid-column: 1/3;
+}
+
+.col3 {
+  grid-column: 3;
+}
+
+.separator {
+  grid-column: -1/1;
+  height: 1px;
+  background-color: var(--bs-light-border-subtle);
+}
+
+.topMargin {
+  margin-top: 1em;
+}

inspect_ai/_view/www/src/samples/transcript/event/EventTimingPanel.tsx

@@ -0,0 +1,115 @@
+import clsx from "clsx";
+import { FC, Fragment } from "react";
+import { formatDateTime, formatTime } from "../../../utils/format";
+import styles from "./EventTimingPanel.module.css";
+
+interface EventTimingPanelProps {
+  timestamp: string;
+  completed?: string | null;
+  working_start?: number | null;
+  working_time?: number | null;
+}
+
+interface EventTimingPanelRow {
+  label: string | "---";
+  value?: string;
+  secondary?: boolean;
+  bordered?: boolean;
+  topMargin?: boolean;
+}
+
+/**
+ * Renders the ModelUsagePanel component.
+ */
+export const EventTimingPanel: FC<EventTimingPanelProps> = ({
+  timestamp,
+  completed,
+  working_start,
+  working_time,
+}) => {
+  const rows: EventTimingPanelRow[] = [
+    {
+      label: "Clock Time",
+      value: undefined,
+      secondary: false,
+    },
+    {
+      label: "---",
+      value: undefined,
+      secondary: false,
+    },
+  ];
+
+  if (!completed) {
+    rows.push({
+      label: "Timestamp",
+      value: formatDateTime(new Date(timestamp)),
+    });
+  } else {
+    rows.push({ label: "Start", value: formatDateTime(new Date(timestamp)) });
+    rows.push({ label: "End", value: formatDateTime(new Date(completed)) });
+  }
+
+  if (working_start || working_time) {
+    rows.push({
+      label: "Working Time",
+      value: undefined,
+      secondary: false,
+      topMargin: true,
+    });
+    rows.push({
+      label: "---",
+      value: undefined,
+      secondary: false,
+    });
+    if (working_start) {
+      rows.push({
+        label: "Start",
+        value: formatTime(working_start),
+      });
+    }
+    if (working_time) {
+      rows.push({
+        label: "Duration",
+        value: formatTime(working_time),
+      });
+    }
+    if (working_start && working_time) {
+      rows.push({
+        label: "End",
+        value: formatTime(
+          Math.round(working_start * 10) / 10 +
+            Math.round(working_time * 10) / 10,
+        ),
+      });
+    }
+  }
+
+  return (
+    <div className={clsx("text-size-small", styles.wrapper)}>
+      {rows.map((row, idx) => {
+        if (row.label === "---") {
+          return (
+            <div key={`$usage-sep-${idx}`} className={styles.separator}></div>
+          );
+        } else {
+          return (
+            <Fragment key={`$usage-row-${idx}`}>
+              <div
+                className={clsx(
+                  "text-style-label",
+                  "text-style-secondary",
+                  row.secondary ? styles.col2 : styles.col1_3,
+                  row.topMargin ? styles.topMargin : undefined,
+                )}
+              >
+                {row.label}
+              </div>
+              <div className={styles.col3}>{row.value ? row.value : ""}</div>
+            </Fragment>
+          );
+        }
+      })}
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/event/utils.ts

@@ -0,0 +1,29 @@
+import {
+  formatDateTime,
+  formatNumber,
+  formatTime,
+} from "../../../utils/format";
+
+export const formatTiming = (timestamp: string, working_start?: number) => {
+  if (working_start) {
+    return `${formatDateTime(new Date(timestamp))}\n@ working time: ${formatTime(working_start)}`;
+  } else {
+    return formatDateTime(new Date(timestamp));
+  }
+};
+
+export const formatTitle = (
+  title: string,
+  total_tokens?: number,
+  working_start?: number | null,
+) => {
+  const subItems = [];
+  if (total_tokens) {
+    subItems.push(`${formatNumber(total_tokens)} tokens`);
+  }
+  if (working_start) {
+    subItems.push(`${formatTime(working_start)}`);
+  }
+  const subtitle = subItems.length > 0 ? ` (${subItems.join(", ")})` : "";
+  return `${title}${subtitle}`;
+};

inspect_ai/_view/www/src/samples/transcript/state/StateDiffView.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { diff } from "jsondiffpatch";
 import { format } from "jsondiffpatch/formatters/html";
+import { FC } from "react";
 
 interface StateDiffViewProps {
   before: Object;
@@ -11,7 +12,7 @@ interface StateDiffViewProps {
 /**
  * Renders a view displaying a list of state changes.
  */
-export const StateDiffView: React.FC<StateDiffViewProps> = ({
+export const StateDiffView: FC<StateDiffViewProps> = ({
   before,
   after,
   className,

inspect_ai/_view/www/src/samples/transcript/state/StateEventRenderers.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Fragment, JSX, ReactNode } from "react";
+import { FC, Fragment, JSX, ReactNode } from "react";
 import {
   HumanBaselineView,
   SessionLog,
@@ -246,7 +246,7 @@ interface ToolsProps {
 /**
  * Renders a list of tool components based on the provided tool definitions.
  */
-export const Tools: React.FC<ToolsProps> = ({ toolDefinitions }) => {
+export const Tools: FC<ToolsProps> = ({ toolDefinitions }) => {
   return toolDefinitions.map((toolDefinition, idx) => {
     const toolName = toolDefinition.name;
     const toolArgs = toolDefinition.parameters?.properties
@@ -270,7 +270,7 @@ interface ToolProps {
 /**
  * Renders a single tool component.
  */
-export const Tool: React.FC<ToolProps> = ({ toolName, toolArgs }) => {
+export const Tool: FC<ToolProps> = ({ toolName, toolArgs }) => {
   const functionCall =
     toolArgs && toolArgs.length > 0
       ? `${toolName}(${toolArgs.join(", ")})`

inspect_ai/_view/www/src/samples/transcript/state/StateEventView.tsx

@@ -17,6 +17,7 @@ import {
   StoreSpecificRenderableTypes,
 } from "./StateEventRenderers";
 
+import { useMemo, FC } from "react";
 import styles from "./StateEventView.module.css";
 
 interface StateEventViewProps {
@@ -31,7 +32,7 @@ interface StateEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const StateEventView: React.FC<StateEventViewProps> = ({
+export const StateEventView: FC<StateEventViewProps> = ({
   id,
   event,
   eventState,
@@ -39,19 +40,21 @@ export const StateEventView: React.FC<StateEventViewProps> = ({
   isStore = false,
   className,
 }) => {
-  const summary = summarizeChanges(event.changes);
+  const summary = useMemo(() => {
+    return summarizeChanges(event.changes);
+  }, [event.changes]);
 
   // Synthesize objects for comparison
-  const [before, after] = synthesizeComparable(event.changes);
+  const [before, after] = useMemo(() => {
+    return synthesizeComparable(event.changes);
+  }, [event.changes]);
 
   // This clone is important since the state is used by react as potential values that are rendered
   // and as a result may be decorated with additional properties, etc..., resulting in DOM elements
   // appearing attached to state.
-  const changePreview = generatePreview(
-    event.changes,
-    structuredClone(after),
-    isStore,
-  );
+  const changePreview = useMemo(() => {
+    return generatePreview(event.changes, structuredClone(after), isStore);
+  }, [event.changes, after, isStore]);
   // Compute the title
   const title = event.event === "state" ? "State Updated" : "Store Updated";