inspect-ai 0.3.69__py3-none-any.whl → 0.3.71__py3-none-any.whl

inspect_ai/_view/www/src/samples/list/SampleList.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import {
+  FC,
   KeyboardEvent,
   RefObject,
   useCallback,
@@ -8,15 +8,16 @@ import {
   useRef,
   useState,
 } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 import { EmptyPanel } from "../../components/EmptyPanel";
 import { MessageBand } from "../../components/MessageBand";
-import { VirtualList, VirtualListRef } from "../../components/VirtualList";
 import { formatNoDecimal } from "../../utils/format";
 import { ListItem } from "../../workspace/tabs/types";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import { SampleRow } from "./SampleRow";
 import { SampleSeparator } from "./SampleSeparator";
 
+import clsx from "clsx";
 import { SampleFooter } from "./SampleFooter";
 import { SampleHeader } from "./SampleHeader";
 import styles from "./SampleList.module.css";
@@ -25,7 +26,6 @@ const kSampleHeight = 88;
 const kSeparatorHeight = 24;
 
 interface SampleListProps {
-  listRef: RefObject<VirtualListRef | null>;
   items: ListItem[];
   sampleDescriptor: SamplesDescriptor;
   selectedIndex: number;
@@ -33,11 +33,11 @@ interface SampleListProps {
   prevSample: () => void;
   showSample: (index: number) => void;
   className?: string | string[];
+  listHandle: RefObject<VirtuosoHandle | null>;
 }
 
-export const SampleList: React.FC<SampleListProps> = (props) => {
+export const SampleList: FC<SampleListProps> = (props) => {
   const {
-    listRef,
     items,
     sampleDescriptor,
     selectedIndex,
@@ -45,12 +45,10 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
     prevSample,
     showSample,
     className,
+    listHandle,
   } = props;
 
-  // If there are no samples, just display an empty state
-  if (items.length === 0) {
-    return <EmptyPanel>No Samples</EmptyPanel>;
-  }
+  const [followOutput, setFollowOutput] = useState(false);
 
   const [hidden, setHidden] = useState(false);
   useEffect(() => {
@@ -70,16 +68,45 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
 
   const prevSelectedIndexRef = useRef<number>(null);
   useEffect(() => {
-    const listEl = listRef.current;
+    const listEl = listHandle.current;
     if (listEl) {
-      const actualRowIndex = itemRowMapping[selectedIndex];
-
-      const direction =
-        actualRowIndex > (prevSelectedIndexRef.current || 0) ? "down" : "up";
-      listRef.current?.scrollToIndex(actualRowIndex, direction);
-      prevSelectedIndexRef.current = actualRowIndex;
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          const actualRowIndex = itemRowMapping[selectedIndex];
+          listEl.scrollToIndex(actualRowIndex);
+          prevSelectedIndexRef.current = actualRowIndex;
+        }, 10);
+      });
     }
-  }, [selectedIndex, listRef, itemRowMapping]);
+  }, [selectedIndex, listHandle, itemRowMapping]);
+
+  const onkeydown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      switch (e.key) {
+        case "ArrowUp":
+          prevSample();
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        case "ArrowDown":
+          nextSample();
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        case "Enter":
+          showSample(selectedIndex);
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+      }
+    },
+    [selectedIndex, nextSample, prevSample, showSample],
+  );
+
+  // If there are no samples, just display an empty state
+  if (items.length === 0) {
+    return <EmptyPanel>No Samples</EmptyPanel>;
+  }
 
   const renderRow = (item: ListItem) => {
     if (item.type === "sample") {
@@ -108,29 +135,6 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
     }
   };
 
-  const onkeydown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      switch (e.key) {
-        case "ArrowUp":
-          prevSample();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        case "ArrowDown":
-          nextSample();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        case "Enter":
-          showSample(selectedIndex);
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-      }
-    },
-    [selectedIndex],
-  );
-
   const { input, limit, answer, target } = gridColumns(sampleDescriptor);
 
   const sampleCount = items?.reduce((prev, current) => {
@@ -186,13 +190,21 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
         limit={limit !== "0"}
         gridColumnsTemplate={gridColumnsValue(sampleDescriptor)}
       />
-      <VirtualList
-        ref={listRef}
+      <Virtuoso
+        ref={listHandle}
+        style={{ height: "100%" }}
         data={items}
-        tabIndex={0}
-        renderRow={renderRow}
+        defaultItemHeight={50}
+        itemContent={(_index: number, data: ListItem) => {
+          return renderRow(data);
+        }}
+        followOutput={followOutput}
+        atBottomStateChange={(atBottom: boolean) => {
+          setFollowOutput(atBottom);
+        }}
+        className={clsx(className)}
         onKeyDown={onkeydown}
-        className={clsx(styles.list, className)}
+        skipAnimationFrameInResizeObserver={true}
       />
       <SampleFooter sampleCount={sampleCount} />
     </div>

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

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { arrayToString, inputString } from "../../utils/format";
@@ -17,7 +18,7 @@ interface SampleRowProps {
   showSample: (index: number) => void;
 }
 
-export const SampleRow: React.FC<SampleRowProps> = ({
+export const SampleRow: FC<SampleRowProps> = ({
   id,
   index,
   sample,

inspect_ai/_view/www/src/samples/list/SampleSeparator.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./SampleSeparator.module.css";
 
 interface SampleSeparatorProps {
@@ -7,7 +8,7 @@ interface SampleSeparatorProps {
   height: number;
 }
 
-export const SampleSeparator: React.FC<SampleSeparatorProps> = ({
+export const SampleSeparator: FC<SampleSeparatorProps> = ({
   id,
   title,
   height,

inspect_ai/_view/www/src/samples/sample-tools/EpochFilter.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ChangeEvent } from "react";
+import { ChangeEvent, FC } from "react";
 import styles from "./EpochFilter.module.css";
 
 interface EpochFilterProps {
@@ -8,7 +8,7 @@ interface EpochFilterProps {
   setEpoch: (n: string) => void;
 }
 
-export const EpochFilter: React.FC<EpochFilterProps> = ({
+export const EpochFilter: FC<EpochFilterProps> = ({
   epochs,
   epoch,
   setEpoch,

inspect_ai/_view/www/src/samples/sample-tools/SelectScorer.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ScoreLabel } from "../../types";
 
+import { FC } from "react";
 import styles from "./SelectScorer.module.css";
 
 interface SelectScorerProps {
@@ -9,7 +10,7 @@ interface SelectScorerProps {
   setScore: (score: ScoreLabel) => void;
 }
 
-export const SelectScorer: React.FC<SelectScorerProps> = ({
+export const SelectScorer: FC<SelectScorerProps> = ({
   scores,
   score,
   setScore,
@@ -100,7 +101,7 @@ interface ScoreSelectorProps {
   className?: string | string[];
 }
 
-const ScoreSelector: React.FC<ScoreSelectorProps> = ({
+const ScoreSelector: FC<ScoreSelectorProps> = ({
   scores,
   selectedIndex,
   setSelectedIndex,
@@ -138,7 +139,7 @@ interface ScorerSelectorProps {
   setSelectedIndex: (index: number) => void;
 }
 
-const ScorerSelector: React.FC<ScorerSelectorProps> = ({
+const ScorerSelector: FC<ScorerSelectorProps> = ({
   scorers,
   selectedIndex,
   setSelectedIndex,

inspect_ai/_view/www/src/samples/sample-tools/SortFilter.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import {
   kEpochAscVal,
@@ -18,11 +19,7 @@ interface SortFilterProps {
   epochs: number;
 }
 
-export const SortFilter: React.FC<SortFilterProps> = ({
-  sort,
-  setSort,
-  epochs,
-}) => {
+export const SortFilter: FC<SortFilterProps> = ({ sort, setSort, epochs }) => {
   const options = [
     { label: "sample asc", val: kSampleAscVal },
     { label: "sample desc", val: kSampleDescVal },

inspect_ai/_view/www/src/samples/sample-tools/sample-filter/SampleFilter.tsx

@@ -14,7 +14,7 @@ import {
 import { tags } from "@lezer/highlight";
 import clsx from "clsx";
 import { EditorView, minimalSetup } from "codemirror";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 
 import { ScoreFilter } from "../../../types";
 import { EvalDescriptor } from "../../descriptor/types";
@@ -147,7 +147,7 @@ const getLints = (
 };
 
 // Main component
-export const SampleFilter: React.FC<SampleFilterProps> = ({
+export const SampleFilter: FC<SampleFilterProps> = ({
   evalDescriptor,
   scoreFilter,
   setScoreFilter,

inspect_ai/_view/www/src/samples/scores/SampleScoreView.tsx

@@ -7,6 +7,7 @@ import { arrayToString, inputString } from "../../utils/format";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import { SampleScores } from "./SampleScores";
 
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import styles from "./SampleScoreView.module.css";
 
@@ -17,7 +18,7 @@ interface SampleScoreViewProps {
   className?: string | string[];
 }
 
-export const SampleScoreView: React.FC<SampleScoreViewProps> = ({
+export const SampleScoreView: FC<SampleScoreViewProps> = ({
   sample,
   sampleDescriptor,
   className,

inspect_ai/_view/www/src/samples/scores/SampleScores.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { SampleSummary } from "../../api/types";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 
@@ -10,7 +10,7 @@ interface SampleScoresProps {
   scorer: string;
 }
 
-export const SampleScores: React.FC<SampleScoresProps> = ({
+export const SampleScores: FC<SampleScoresProps> = ({
   sample,
   sampleDescriptor,
   scorer,

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ApprovalEvent } from "../../types/log";
 import { EventRow } from "./event/EventRow";
@@ -10,7 +11,7 @@ interface ApprovalEventViewProps {
 /**
  * Renders the ApprovalEventView component.
  */
-export const ApprovalEventView: React.FC<ApprovalEventViewProps> = ({
+export const ApprovalEventView: FC<ApprovalEventViewProps> = ({
   event,
   className,
 }) => {

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ANSIDisplay } from "../../components/AnsiDisplay";
 import { ErrorEvent } from "../../types/log";
@@ -16,7 +17,7 @@ interface ErrorEventViewProps {
 /**
  * Renders the ErrorEventView component.
  */
-export const ErrorEventView: React.FC<ErrorEventViewProps> = ({
+export const ErrorEventView: FC<ErrorEventViewProps> = ({
   id,
   event,
   eventState,

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { JSONPanel } from "../../components/JsonPanel";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
@@ -18,7 +19,7 @@ interface InfoEventViewProps {
 /**
  * Renders the InfoEventView component.
  */
-export const InfoEventView: React.FC<InfoEventViewProps> = ({
+export const InfoEventView: FC<InfoEventViewProps> = ({
   id,
   event,
   eventState,

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ANSIDisplay } from "../../components/AnsiDisplay";
 import { InputEvent } from "../../types/log";
@@ -16,7 +17,7 @@ interface InputEventViewProps {
 /**
  * Renders the ErrorEventView component.
  */
-export const InputEventView: React.FC<InputEventViewProps> = ({
+export const InputEventView: FC<InputEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/LoggerEventView.module.css

@@ -4,3 +4,7 @@
   grid-template-columns: 1fr max-content;
   column-gap: 1em;
 }
+
+.jsonPanel {
+  padding: 0 !important;
+}

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

@@ -3,6 +3,9 @@ import { ApplicationIcons } from "../../appearance/icons";
 import { LoggerEvent } from "../../types/log";
 import { EventRow } from "./event/EventRow";
 
+import { FC } from "react";
+import { MetaDataGrid } from "../../metadata/MetaDataGrid";
+import { parsedJson as maybeParseJson } from "../../utils/json";
 import styles from "./LoggerEventView.module.css";
 
 interface LoggerEventViewProps {
@@ -13,10 +16,11 @@ interface LoggerEventViewProps {
 /**
  * Renders the LoggerEventView component.
  */
-export const LoggerEventView: React.FC<LoggerEventViewProps> = ({
+export const LoggerEventView: FC<LoggerEventViewProps> = ({
   event,
   className,
 }) => {
+  const obj = maybeParseJson(event.message.message);
   return (
     <EventRow
       className={className}
@@ -24,7 +28,13 @@ export const LoggerEventView: React.FC<LoggerEventViewProps> = ({
       icon={ApplicationIcons.logging[event.message.level.toLowerCase()]}
     >
       <div className={clsx("text-size-base", styles.grid)}>
-        <div className={clsx("text-size-smaller")}>{event.message.message}</div>
+        <div className={clsx("text-size-smaller")}>
+          {obj !== undefined && obj !== null ? (
+            <MetaDataGrid entries={obj as Record<string, unknown>} />
+          ) : (
+            event.message.message
+          )}
+        </div>
         <div className={clsx("text-size-smaller", "text-style-secondary")}>
           {event.message.filename}:{event.message.lineno}
         </div>

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

@@ -9,7 +9,7 @@
 
 .all {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   column-gap: 1em;
 }
 

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

@@ -3,7 +3,7 @@ import "prismjs/components/prism-json";
 import "prismjs/components/prism-python";
 
 import clsx from "clsx";
-import { Fragment, useEffect, useMemo, useRef } from "react";
+import { FC, Fragment, useEffect, useMemo, useRef } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MetaDataGrid } from "../../metadata/MetaDataGrid";
 import {
@@ -14,11 +14,6 @@ import {
   Tools1,
 } from "../../types/log";
 import { ModelUsagePanel } from "../../usage/ModelUsagePanel";
-import {
-  formatDateTime,
-  formatNumber,
-  formatPrettyDecimal,
-} from "../../utils/format";
 import { ChatView } from "../chat/ChatView";
 import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
@@ -26,6 +21,8 @@ import { TranscriptEventState } from "./types";
 
 import { highlightElement } from "prismjs";
 import styles from "./ModelEventView.module.css";
+import { EventTimingPanel } from "./event/EventTimingPanel";
+import { formatTiming, formatTitle } from "./event/utils";
 
 interface ModelEventViewProps {
   id: string;
@@ -38,7 +35,7 @@ interface ModelEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const ModelEventView: React.FC<ModelEventViewProps> = ({
+export const ModelEventView: FC<ModelEventViewProps> = ({
   id,
   event,
   eventState,
@@ -48,15 +45,6 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
   const totalUsage = event.output.usage?.total_tokens;
   const callTime = event.output.time;
 
-  const subItems = [];
-  if (totalUsage) {
-    subItems.push(`${formatNumber(totalUsage)} tokens`);
-  }
-  if (callTime) {
-    subItems.push(`${formatPrettyDecimal(callTime)} sec`);
-  }
-  const subtitle = subItems.length > 0 ? `(${subItems.join(", ")})` : "";
-
   // Note: despite the type system saying otherwise, this has appeared empircally
   // to sometimes be undefined
   const outputMessages = event.output.choices?.map((choice) => {
@@ -83,8 +71,8 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
     <EventPanel
       id={id}
       className={className}
-      title={`Model Call: ${event.model} ${subtitle}`}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      title={formatTitle(`Model Call: ${event.model}`, totalUsage, callTime)}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       icon={ApplicationIcons.model}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
@@ -116,6 +104,15 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
             ) : undefined}
           </EventSection>
 
+          <EventSection title="Timing" className={styles.tableSelection}>
+            <EventTimingPanel
+              timestamp={event.timestamp}
+              completed={event.completed}
+              working_start={event.working_start}
+              working_time={event.working_time}
+            />
+          </EventSection>
+
           <EventSection
             title="Tools"
             className={clsx(styles.tableSelection, styles.tools)}
@@ -150,7 +147,7 @@ interface APIViewProps {
   className?: string | string[];
 }
 
-export const APIView: React.FC<APIViewProps> = ({ call, className }) => {
+export const APIView: FC<APIViewProps> = ({ call, className }) => {
   if (!call) {
     return null;
   }
@@ -172,11 +169,7 @@ interface APICodeCellProps {
   contents: Request | Response;
 }
 
-export const APICodeCell: React.FC<APICodeCellProps> = ({ id, contents }) => {
-  if (!contents) {
-    return null;
-  }
-
+export const APICodeCell: FC<APICodeCellProps> = ({ id, contents }) => {
   const codeRef = useRef<HTMLElement>(null);
   const sourceCode = useMemo(() => {
     return JSON.stringify(contents, undefined, 2);
@@ -186,11 +179,15 @@ export const APICodeCell: React.FC<APICodeCellProps> = ({ id, contents }) => {
     if (codeRef.current) {
       highlightElement(codeRef.current);
     }
-  }, [codeRef.current, contents]);
+  }, [contents]);
+
+  if (!contents) {
+    return null;
+  }
 
   return (
-    <div>
-      <pre className={styles.codePre}>
+    <div className={clsx("model-call")}>
+      <pre className={clsx(styles.codePre)}>
         <code
           id={id}
           ref={codeRef}
@@ -207,7 +204,7 @@ interface ToolConfigProps {
   tools: Tools1;
 }
 
-const ToolsConfig: React.FC<ToolConfigProps> = ({ tools }) => {
+const ToolsConfig: FC<ToolConfigProps> = ({ tools }) => {
   const toolEls = tools.map((tool, idx) => {
     return (
       <Fragment key={`${tool.name}-${idx}`}>

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

@@ -9,6 +9,7 @@ import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
 import { TranscriptEventState } from "./types";
 
+import { FC } from "react";
 import styles from "./SampleInitEventView.module.css";
 
 interface SampleInitEventViewProps {
@@ -22,7 +23,7 @@ interface SampleInitEventViewProps {
 /**
  * Renders the SampleInitEventView component.
  */
-export const SampleInitEventView: React.FC<SampleInitEventViewProps> = ({
+export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
   id,
   event,
   eventState,

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

@@ -1,5 +1,6 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
-import { SampleLimitEvent, Type7 } from "../../types/log";
+import { SampleLimitEvent, Type8 } from "../../types/log";
 import { EventPanel } from "./event/EventPanel";
 import { TranscriptEventState } from "./types";
 
@@ -14,14 +15,14 @@ interface SampleLimitEventViewProps {
 /**
  * Renders the InfoEventView component.
  */
-export const SampleLimitEventView: React.FC<SampleLimitEventViewProps> = ({
+export const SampleLimitEventView: FC<SampleLimitEventViewProps> = ({
   id,
   event,
   eventState,
   setEventState,
   className,
 }) => {
-  const resolve_title = (type: Type7) => {
+  const resolve_title = (type: Type8) => {
     switch (type) {
       case "custom":
         return "Custom Limit Exceeded";
@@ -33,10 +34,12 @@ export const SampleLimitEventView: React.FC<SampleLimitEventViewProps> = ({
         return "Token Limit Exceeded";
       case "operator":
         return "Operator Canceled";
+      case "working":
+        return "Execution Time Limit Exceeded";
     }
   };
 
-  const resolve_icon = (type: Type7) => {
+  const resolve_icon = (type: Type8) => {
     switch (type) {
       case "custom":
         return ApplicationIcons.limits.custom;
@@ -48,6 +51,8 @@ export const SampleLimitEventView: React.FC<SampleLimitEventViewProps> = ({
         return ApplicationIcons.limits.tokens;
       case "operator":
         return ApplicationIcons.limits.operator;
+      case "working":
+        return ApplicationIcons.limits.execution;
     }
   };
 

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

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { FC, RefObject } from "react";
 import { Events } from "../../types/log";
 import { TranscriptVirtualList } from "./TranscriptView";
 
@@ -11,7 +11,7 @@ interface SampleTranscriptProps {
 /**
  * Renders the SampleTranscript component.=
  */
-export const SampleTranscript: React.FC<SampleTranscriptProps> = ({
+export const SampleTranscript: FC<SampleTranscriptProps> = ({
   id,
   evalEvents,
   scrollRef,