inspect-ai 0.3.96__py3-none-any.whl → 0.3.97__py3-none-any.whl

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

@@ -13,6 +13,8 @@ interface ChatMessageRowProps {
   toolCallStyle: ChatViewToolCallStyle;
   indented?: boolean;
   padded?: boolean;
+  getMessageUrl?: (id: string) => string | undefined;
+  highlightUserMessage?: boolean;
 }
 
 /**
@@ -24,40 +26,68 @@ export const ChatMessageRow: FC<ChatMessageRowProps> = ({
   resolvedMessage,
   toolCallStyle,
   indented,
-  padded,
+  getMessageUrl,
+  highlightUserMessage,
 }) => {
   if (number) {
     return (
-      <div className={styles.grid}>
+      <>
         <div
           className={clsx(
-            "text-size-smaller",
-            "text-style-secondary",
-            styles.number,
+            styles.grid,
+            styles.container,
+            highlightUserMessage && resolvedMessage.message.role === "user"
+              ? styles.user
+              : undefined,
           )}
         >
-          {number}
+          <div
+            className={clsx(
+              "text-size-smaller",
+              "text-style-secondary",
+              styles.number,
+            )}
+          >
+            {number}
+          </div>
+          <ChatMessage
+            id={`${parentName}-chat-messages`}
+            message={resolvedMessage.message}
+            toolMessages={resolvedMessage.toolMessages}
+            indented={indented}
+            toolCallStyle={toolCallStyle}
+            getMessageUrl={getMessageUrl}
+          />
         </div>
+
+        {resolvedMessage.message.role === "user" ? (
+          <div style={{ height: "10px" }}></div>
+        ) : undefined}
+      </>
+    );
+  } else {
+    return (
+      <div
+        className={clsx(
+          styles.container,
+          styles.simple,
+          highlightUserMessage && resolvedMessage.message.role === "user"
+            ? styles.user
+            : undefined,
+        )}
+      >
         <ChatMessage
           id={`${parentName}-chat-messages`}
           message={resolvedMessage.message}
           toolMessages={resolvedMessage.toolMessages}
           indented={indented}
           toolCallStyle={toolCallStyle}
-          padded={padded}
+          getMessageUrl={getMessageUrl}
         />
+        {resolvedMessage.message.role === "user" ? (
+          <div style={{ height: "10px" }}></div>
+        ) : undefined}
       </div>
     );
-  } else {
-    return (
-      <ChatMessage
-        id={`${parentName}-chat-messages`}
-        message={resolvedMessage.message}
-        toolMessages={resolvedMessage.toolMessages}
-        indented={indented}
-        toolCallStyle={toolCallStyle}
-        padded={padded}
-      />
-    );
   }
 };

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

@@ -40,7 +40,6 @@ export const ChatView: FC<ChatViewProps> = ({
             resolvedMessage={msg}
             indented={indented}
             toolCallStyle={toolCallStyle}
-            padded={index < collapsedMessages.length - 1}
           />
         );
       })}

inspect_ai/_view/www/src/app/samples/chat/ChatViewVirtualList.module.css

@@ -2,3 +2,7 @@
   width: 100%;
   margin-top: 1em;
 }
+
+.item {
+  padding-bottom: 1em;
+}

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

@@ -4,18 +4,24 @@ import { Messages } from "../../../@types/log";
 import { ChatMessageRow } from "./ChatMessageRow";
 import { ResolvedMessage, resolveMessages } from "./messages";
 
+import clsx from "clsx";
 import { LiveVirtualList } from "../../../components/LiveVirtualList";
 import { ChatViewToolCallStyle } from "./types";
 
+import { ContextProp, ItemProps } from "react-virtuoso";
+import styles from "./ChatViewVirtualList.module.css";
+
 interface ChatViewVirtualListProps {
   id: string;
   className?: string | string[];
   messages: Messages;
+  initialMessageId?: string | null;
   toolCallStyle: ChatViewToolCallStyle;
   indented: boolean;
   numbered?: boolean;
   scrollRef?: RefObject<HTMLDivElement | null>;
   running?: boolean;
+  getMessageUrl?: (id: string) => string | undefined;
 }
 
 /**
@@ -25,17 +31,30 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
   ({
     id,
     messages,
+    initialMessageId,
     className,
     toolCallStyle,
     indented,
     numbered = true,
     scrollRef,
     running,
+    getMessageUrl,
   }) => {
     const collapsedMessages = useMemo(() => {
       return resolveMessages(messages);
     }, [messages]);
 
+    const initialMessageIndex = useMemo(() => {
+      if (initialMessageId === null || initialMessageId === undefined) {
+        return undefined;
+      }
+
+      const index = collapsedMessages.findIndex((message) => {
+        return message.message.id === initialMessageId;
+      });
+      return index !== -1 ? index : undefined;
+    }, [initialMessageId, collapsedMessages]);
+
     const renderRow = (index: number, item: ResolvedMessage): ReactNode => {
       const number =
         collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
@@ -47,11 +66,30 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
           resolvedMessage={item}
           indented={indented}
           toolCallStyle={toolCallStyle}
-          padded={index < collapsedMessages.length - 1}
+          getMessageUrl={getMessageUrl}
+          highlightUserMessage={true}
         />
       );
     };
 
+    const Item = ({
+      children,
+      ...props
+    }: ItemProps<any> & ContextProp<any>) => {
+      return (
+        <div
+          className={clsx(styles.item)}
+          data-index={props["data-index"]}
+          data-item-group-index={props["data-item-group-index"]}
+          data-item-index={props["data-item-index"]}
+          data-known-size={props["data-known-size"]}
+          style={props.style}
+        >
+          {children}
+        </div>
+      );
+    };
+
     return (
       <LiveVirtualList<ResolvedMessage>
         id="chat-virtual-list"
@@ -59,8 +97,10 @@ export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = memo(
         scrollRef={scrollRef}
         data={collapsedMessages}
         renderRow={renderRow}
+        initialTopMostItemIndex={initialMessageIndex}
         live={running}
         showProgress={running}
+        components={{ Item }}
       />
     );
   },

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

@@ -23,6 +23,7 @@ export const resolveMessages = (messages: Messages) => {
   // can use to lookup the tool responses
 
   const resolvedMessages: ResolvedMessage[] = [];
+  let index = 0;
   for (const message of messages) {
     if (message.role === "tool") {
       // Add this tool message onto the previous message
@@ -35,6 +36,12 @@ export const resolveMessages = (messages: Messages) => {
     } else {
       resolvedMessages.push({ message, toolMessages: [] });
     }
+
+    // Create a stable id for the item, if it doesn't have one
+    if (message.id === undefined) {
+      message.id = `msg-${index}`;
+    }
+    index++;
   }
 
   // Capture system messages (there could be multiple)

inspect_ai/_view/www/src/app/samples/chat/tools/ToolCallView.module.css

@@ -1,6 +1,3 @@
-.output {
-}
-
 .toolCallView {
   display: grid;
   row-gap: 1em;

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

@@ -125,7 +125,7 @@ export const ToolCallView: FC<ToolCallViewProps> = ({
           collapse={collapse}
           border={true}
           lines={15}
-          className={styles.output}
+          className={clsx("text-size-small")}
         >
           <MessageContent contents={normalizedContent} />
         </ExpandablePanel>

inspect_ai/_view/www/src/app/samples/chat/tools/ToolInput.module.css

@@ -8,7 +8,7 @@
   margin-top: 0.25em;
 }
 
-.toolView pre[class*="language-"] {
+.toolView {
   padding: 0.5em !important;
 }
 

inspect_ai/_view/www/src/app/samples/chat/tools/ToolOutput.module.css

@@ -12,7 +12,7 @@
   padding: 0.5em 0.5em 0.5em 0.5em;
   white-space: pre-wrap;
   margin-bottom: 0;
-  font-size: 1em !important;
+  font-size: 0.8rem !important;
 }
 
 .textCode {

inspect_ai/_view/www/src/app/samples/descriptor/score/NumericScoreDescriptor.tsx

@@ -14,10 +14,14 @@ export const numericScoreDescriptor = (values: Value2[]): ScoreDescriptor => {
     min: Math.min(...onlyNumeric),
     max: Math.max(...onlyNumeric),
     compare: (a, b) => {
+      // Non numerics could happen if some scores are errors
       if (typeof a.value === "number" && typeof b.value === "number") {
         return compareWithNan(a.value, b.value);
+      } else if (typeof a.value === "number" && typeof b.value !== "number") {
+        return -1;
+      } else if (typeof a.value !== "number" && typeof b.value === "number") {
+        return 1;
       } else {
-        console.warn("Comparing non-numerics using a numeric score descriptor");
         return 0;
       }
     },

inspect_ai/_view/www/src/app/samples/descriptor/score/PassFailScoreDescriptor.tsx

@@ -69,13 +69,18 @@ export const passFailScoreDescriptor = (values: Value2[]): ScoreDescriptor => {
       }
     },
     compare: (a: SelectedScore, b: SelectedScore) => {
-      if (typeof a.value !== "string" || typeof b.value !== "string") {
-        throw new Error(
-          "Unexpectedly using the pass fail scorer on non-string values",
-        );
+      if (typeof a.value !== "string" && typeof b.value !== "string") {
+        return 0;
+      } else if (typeof a.value === "string" && typeof b.value !== "string") {
+        return -1;
+      } else if (typeof a.value !== "string" && typeof b.value === "string") {
+        return 1;
+      } else {
+        const sort =
+          order.indexOf(String(a.value || "")) -
+          order.indexOf(String(b.value || ""));
+        return sort;
       }
-      const sort = order.indexOf(a.value || "") - order.indexOf(b.value || "");
-      return sort;
     },
   };
 };

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

@@ -145,6 +145,13 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
             completed={item.completed}
             scoreRendered={item.scoreRendered}
             gridColumnsTemplate={gridColumnsTemplate}
+            sampleUrl={sampleNavigation.getSampleUrl(
+              item.data.id,
+              item.data.epoch,
+            )}
+            showSample={() => {
+              sampleNavigation.showSample(item.index);
+            }}
           />
         );
       } else if (item.type === "separator") {

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

@@ -5,7 +5,6 @@ import { MarkdownDiv } from "../../../components/MarkdownDiv";
 import { PulsingDots } from "../../../components/PulsingDots";
 import { useStore } from "../../../state/store";
 import { arrayToString, inputString } from "../../../utils/format";
-import { useSampleNavigation } from "../../routing/navigationHooks";
 import { SampleErrorView } from "../error/SampleErrorView";
 import styles from "./SampleRow.module.css";
 
@@ -18,6 +17,8 @@ interface SampleRowProps {
   scoreRendered: ReactNode;
   gridColumnsTemplate: string;
   height: number;
+  showSample: () => void;
+  sampleUrl?: string;
 }
 
 export const SampleRow: FC<SampleRowProps> = ({
@@ -29,6 +30,8 @@ export const SampleRow: FC<SampleRowProps> = ({
   scoreRendered,
   gridColumnsTemplate,
   height,
+  showSample,
+  sampleUrl,
 }) => {
   const streamSampleData = useStore(
     (state) => state.capabilities.streamSampleData,
@@ -39,14 +42,6 @@ export const SampleRow: FC<SampleRowProps> = ({
   // Determine if this sample can be viewed (completed or streaming)
   const isViewable = completed || streamSampleData;
 
-  // Get sample navigation utilities
-  const sampleNavigation = useSampleNavigation();
-
-  // Use sample navigation hook to get sample URL
-  const sampleUrl = isViewable
-    ? sampleNavigation.getSampleUrl(sample.id, sample.epoch)
-    : undefined;
-
   const rowContent = (
     <div
       id={`sample-${id}`}
@@ -127,13 +122,5 @@ export const SampleRow: FC<SampleRowProps> = ({
   );
 
   // Render the row content either as a link or directly
-  return (
-    <div
-      onClick={
-        isViewable ? () => sampleNavigation.showSample(index) : undefined
-      }
-    >
-      {rowContent}
-    </div>
-  );
+  return <div onClick={showSample}>{rowContent}</div>;
 };

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

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { ChangeEvent, FC, useCallback } from "react";
+import { ScoreLabel } from "../../../app/types";
 import { SampleSummary } from "../../../client/api/types";
 import {
   kEpochAscVal,
@@ -9,7 +10,6 @@ import {
   kScoreAscVal,
   kScoreDescVal,
 } from "../../../constants";
-import { ScoreLabel } from "../../../app/types";
 import { isNumeric } from "../../../utils/type";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import styles from "./SortFilter.module.css";

inspect_ai/_view/www/src/app/samples/scores/SampleScoresGrid.tsx

@@ -1,22 +1,24 @@
 import clsx from "clsx";
-import { FC, Fragment } from "react";
+import { FC, Fragment, RefObject } from "react";
 import { EvalSample } from "../../../@types/log";
 import { SampleSummary } from "../../../client/api/types";
 import { EmptyPanel } from "../../../components/EmptyPanel";
-import { MarkdownDiv } from "../../../components/MarkdownDiv";
 import { useEvalDescriptor } from "../../../state/hooks";
-import { MetaDataGrid } from "../../content/MetaDataGrid";
+import { RecordTree } from "../../content/RecordTree";
+import { RenderedContent } from "../../content/RenderedContent";
 import { SampleScores } from "./SampleScores";
 import styles from "./SampleScoresGrid.module.css";
 
 interface SampleScoresGridProps {
   evalSample: EvalSample;
   className?: string | string[];
+  scrollRef: RefObject<HTMLDivElement | null>;
 }
 
 export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
   evalSample,
   className,
+  scrollRef,
 }) => {
   const evalDescriptor = useEvalDescriptor();
   if (!evalDescriptor) {
@@ -84,7 +86,13 @@ export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
               />
             </div>
             <div className={clsx("text-size-base", styles.cell)}>
-              <MarkdownDiv markdown={explanation} />
+              <RenderedContent
+                id={`${scorer}-explanation`}
+                entry={{
+                  name: "Explanation",
+                  value: explanation,
+                }}
+              />
             </div>
 
             {Object.keys(metadata).length > 0 ? (
@@ -100,7 +108,12 @@ export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
                   Metadata
                 </div>
                 <div className={clsx(styles.fullWidth)}>
-                  <MetaDataGrid entries={metadata} />
+                  <RecordTree
+                    id={`${scorer}-metadataa`}
+                    scrollRef={scrollRef}
+                    record={metadata}
+                    defaultExpandLevel={0}
+                  />
                 </div>
                 <div
                   className={clsx(

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

@@ -1,9 +1,3 @@
-.container {
-  margin-top: 0.5em;
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .label {
   padding-right: 2em !important;
   padding-left: 0 !important;

inspect_ai/_view/www/src/app/samples/scores/SampleScoresView.tsx

@@ -4,7 +4,7 @@ import { Card, CardBody } from "../../../components/Card";
 import { MarkdownDiv } from "../../../components/MarkdownDiv";
 import { inputString } from "../../../utils/format";
 
-import { FC } from "react";
+import { FC, RefObject } from "react";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { useEvalDescriptor } from "../../../state/hooks";
 import { SampleScoresGrid } from "./SampleScoresGrid";
@@ -13,11 +13,13 @@ import styles from "./SampleScoresView.module.css";
 interface SampleScoresViewProps {
   sample?: EvalSample;
   className?: string | string[];
+  scrollRef: RefObject<HTMLDivElement | null>;
 }
 
 export const SampleScoresView: FC<SampleScoresViewProps> = ({
   sample,
   className,
+  scrollRef,
 }) => {
   const evalDescriptor = useEvalDescriptor();
   if (!evalDescriptor) {
@@ -70,6 +72,7 @@ export const SampleScoresView: FC<SampleScoresViewProps> = ({
           <SampleScoresGrid
             evalSample={sample}
             className={clsx(styles.scores)}
+            scrollRef={scrollRef}
           />
         </CardBody>
       </Card>

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

@@ -2,9 +2,10 @@ import { FC } from "react";
 import { ApprovalEvent } from "../../../@types/log";
 import { ApplicationIcons } from "../../appearance/icons";
 import { EventRow } from "./event/EventRow";
+import { EventNode } from "./types";
 
 interface ApprovalEventViewProps {
-  event: ApprovalEvent;
+  eventNode: EventNode<ApprovalEvent>;
   className?: string | string[];
 }
 
@@ -12,9 +13,10 @@ interface ApprovalEventViewProps {
  * Renders the ApprovalEventView component.
  */
 export const ApprovalEventView: FC<ApprovalEventViewProps> = ({
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   return (
     <EventRow
       title={decisionLabel(event.decision)}

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

@@ -4,10 +4,10 @@ import { ANSIDisplay } from "../../../components/AnsiDisplay";
 import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
 import { EventPanel } from "./event/EventPanel";
+import { EventNode } from "./types";
 
 interface ErrorEventViewProps {
-  id: string;
-  event: ErrorEvent;
+  eventNode: EventNode<ErrorEvent>;
   className?: string | string[];
 }
 
@@ -15,13 +15,15 @@ interface ErrorEventViewProps {
  * Renders the ErrorEventView component.
  */
 export const ErrorEventView: FC<ErrorEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       title="Error"
       className={className}
       subTitle={formatDateTime(new Date(event.timestamp))}

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

@@ -1,3 +1,3 @@
 .panel {
-  margin: 0.5em 0;
+  margin: 0.2em 0;
 }

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

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC } from "react";
 import { InfoEvent } from "../../../@types/log";
 import { JSONPanel } from "../../../components/JsonPanel";
@@ -6,10 +7,10 @@ import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
 import { EventPanel } from "./event/EventPanel";
 import styles from "./InfoEventView.module.css";
+import { EventNode } from "./types";
 
 interface InfoEventViewProps {
-  id: string;
-  event: InfoEvent;
+  eventNode: EventNode<InfoEvent>;
   className?: string | string[];
 }
 
@@ -17,20 +18,26 @@ interface InfoEventViewProps {
  * Renders the InfoEventView component.
  */
 export const InfoEventView: FC<InfoEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   const panels = [];
   if (typeof event.data === "string") {
-    panels.push(<MarkdownDiv markdown={event.data} className={styles.panel} />);
+    panels.push(
+      <MarkdownDiv
+        markdown={event.data}
+        className={clsx(styles.panel, "text-size-base")}
+      />,
+    );
   } else {
     panels.push(<JSONPanel data={event.data} className={styles.panel} />);
   }
 
   return (
     <EventPanel
-      id={id}
+      id={eventNode.id}
+      depth={eventNode.depth}
       title={"Info" + (event.source ? ": " + event.source : "")}
       className={className}
       subTitle={formatDateTime(new Date(event.timestamp))}

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

@@ -4,10 +4,10 @@ import { ANSIDisplay } from "../../../components/AnsiDisplay";
 import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
 import { EventPanel } from "./event/EventPanel";
+import { EventNode } from "./types";
 
 interface InputEventViewProps {
-  id: string;
-  event: InputEvent;
+  eventNode: EventNode<InputEvent>;
   className?: string | string[];
 }
 
@@ -15,13 +15,15 @@ interface InputEventViewProps {
  * Renders the ErrorEventView component.
  */
 export const InputEventView: FC<InputEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       title="Input"
       className={className}
       subTitle={formatDateTime(new Date(event.timestamp))}

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

@@ -7,9 +7,10 @@ import { FC } from "react";
 import { parsedJson as maybeParseJson } from "../../../utils/json";
 import { MetaDataGrid } from "../../content/MetaDataGrid";
 import styles from "./LoggerEventView.module.css";
+import { EventNode } from "./types";
 
 interface LoggerEventViewProps {
-  event: LoggerEvent;
+  eventNode: EventNode<LoggerEvent>;
   className?: string | string[];
 }
 
@@ -17,9 +18,10 @@ interface LoggerEventViewProps {
  * Renders the LoggerEventView component.
  */
 export const LoggerEventView: FC<LoggerEventViewProps> = ({
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   const obj = maybeParseJson(event.message.message);
   return (
     <EventRow