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

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

@@ -0,0 +1,32 @@
+.contents {
+  margin-top: 0.5em;
+}
+
+.contents > :last-child {
+  margin-bottom: 0;
+}
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 1.5em;
+}
+
+.exec {
+  margin-top: 0.5em;
+}
+
+.result {
+  margin-top: 0.5em;
+}
+
+.fileLabel {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.wrapPre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,153 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import ExpandablePanel from "../../components/ExpandablePanel";
+import { MarkdownDiv } from "../../components/MarkdownDiv";
+import { MetaDataGrid } from "../../metadata/MetaDataGrid";
+import { SandboxEvent } from "../../types/log";
+import { EventPanel } from "./event/EventPanel";
+import { EventSection } from "./event/EventSection";
+import { TranscriptEventState } from "./types";
+
+import clsx from "clsx";
+import { FC } from "react";
+import styles from "./SandboxEventView.module.css";
+import { formatTiming } from "./event/utils";
+
+interface SandboxEventViewProps {
+  id: string;
+  event: SandboxEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+
+/**
+ * Renders the SandboxEventView component.
+ */
+export const SandboxEventView: FC<SandboxEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  return (
+    <EventPanel
+      id={id}
+      className={className}
+      title={`Sandbox: ${event.action}`}
+      icon={ApplicationIcons.sandbox}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      {event.action === "exec" ? (
+        <ExecView event={event} />
+      ) : event.action === "read_file" ? (
+        <ReadFileView event={event} />
+      ) : (
+        <WriteFileView event={event} />
+      )}
+    </EventPanel>
+  );
+};
+
+interface ExecViewProps {
+  event: SandboxEvent;
+}
+
+const ExecView: FC<ExecViewProps> = ({ event }) => {
+  if (event.cmd === null) {
+    return undefined;
+  }
+  const cmd = event.cmd;
+  const options = event.options;
+  const input = event.input;
+  const result = event.result;
+  const output = event.output;
+
+  return (
+    <div className={clsx(styles.exec)}>
+      <EventSection title={`Command`}>
+        <div className={clsx(styles.twoColumn)}>
+          <pre className={clsx(styles.wrapPre)}>{cmd}</pre>
+          <pre className={clsx(styles.wrapPre)}>
+            {input !== null ? input?.trim() : undefined}
+          </pre>
+
+          {options !== null ? (
+            <EventSection title={`Options`}>
+              <MetaDataGrid
+                entries={options as Record<string, unknown>}
+                plain={true}
+              />
+            </EventSection>
+          ) : undefined}
+        </div>
+      </EventSection>
+      <EventSection title={`Result`}>
+        {output ? (
+          <ExpandablePanel collapse={false}>
+            <MarkdownDiv markdown={output} />
+          </ExpandablePanel>
+        ) : undefined}
+        <div className={clsx(styles.result)}>Exited with code {result}</div>
+      </EventSection>
+    </div>
+  );
+};
+
+interface ReadFileViewProps {
+  event: SandboxEvent;
+}
+
+const ReadFileView: FC<ReadFileViewProps> = ({ event }) => {
+  if (event.file === null) {
+    return undefined;
+  }
+  const file = event.file;
+  const output = event.output;
+  return <FileView file={file} contents={output?.trim()} />;
+};
+
+interface WriteFileViewProps {
+  event: SandboxEvent;
+}
+
+const WriteFileView: FC<WriteFileViewProps> = ({ event }) => {
+  if (event.file === null) {
+    return undefined;
+  }
+  const file = event.file;
+  const input = event.input;
+
+  return <FileView file={file} contents={input?.trim()} />;
+};
+
+interface FileViewProps {
+  file: string;
+  contents?: string;
+}
+
+const FileView: FC<FileViewProps> = ({ file, contents }) => {
+  return (
+    <div>
+      <EventSection title="File">
+        <pre className={clsx(styles.fileLabel)}>{file}</pre>
+      </EventSection>
+
+      {contents ? (
+        <EventSection title="Contents">
+          <ExpandablePanel collapse={false}>
+            <pre>{contents}</pre>
+          </ExpandablePanel>
+        </EventSection>
+      ) : undefined}
+    </div>
+  );
+};

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

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { MetaDataGrid } from "../../metadata/MetaDataGrid";
@@ -21,7 +21,7 @@ interface ScoreEventViewProps {
 /**
  * Renders the ScoreEventView component.
  */
-export const ScoreEventView: React.FC<ScoreEventViewProps> = ({
+export const ScoreEventView: FC<ScoreEventViewProps> = ({
   id,
   event,
   eventState,

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

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { RefObject, useCallback, useState } from "react";
+import { FC, RefObject, useCallback, useState } from "react";
 import { StepEvent } from "../../types/log";
 import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
@@ -18,7 +18,7 @@ interface StepEventViewProps {
 /**
  * Renders the StepEventView component.
  */
-export const StepEventView: React.FC<StepEventViewProps> = ({
+export const StepEventView: FC<StepEventViewProps> = ({
   event,
   eventState,
   setEventState,
@@ -37,7 +37,7 @@ export const StepEventView: React.FC<StepEventViewProps> = ({
     (state: TranscriptEventState) => {
       setTranscriptState({ ...state });
     },
-    [transcriptState, setTranscriptState],
+    [setTranscriptState],
   );
 
   return (
@@ -47,7 +47,7 @@ export const StepEventView: React.FC<StepEventViewProps> = ({
       title={title}
       subTitle={formatDateTime(new Date(event.timestamp))}
       icon={descriptor.icon}
-      collapse={false}
+      collapse={descriptor.collapse}
       text={text}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
@@ -115,7 +115,7 @@ const summarize = (children: EventNode[]) => {
  */
 const stepDescriptor = (
   event: StepEvent,
-): { icon?: string; name?: string; endSpace?: boolean } => {
+): { icon?: string; name?: string; endSpace?: boolean; collapse?: boolean } => {
   const rootStepDescriptor = {
     endSpace: true,
   };
@@ -161,6 +161,13 @@ const stepDescriptor = (
         return {
           ...rootStepDescriptor,
           name: "Sample Init",
+          collapse: true,
+        };
+      case "init":
+        return {
+          ...rootStepDescriptor,
+          name: "Init",
+          collapse: true,
         };
       default:
         return {

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

@@ -1,10 +1,10 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MetaDataView } from "../../metadata/MetaDataView";
-import { Input2, Input4, Result1, SubtaskEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
+import { Input2, Input5, Result2, SubtaskEvent } from "../../types/log";
 import { EventPanel } from "./event/EventPanel";
+import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./SubtaskEventView.module.css";
 import { TranscriptView } from "./TranscriptView";
 import { TranscriptEventState } from "./types";
@@ -21,7 +21,7 @@ interface SubtaskEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
+export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
   id,
   event,
   eventState,
@@ -73,8 +73,12 @@ export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
     <EventPanel
       id={id}
       className={className}
-      title={`${type}: ${event.name}`}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      title={formatTitle(
+        `${type}: ${event.name}`,
+        undefined,
+        event.working_time,
+      )}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       collapse={false}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
@@ -91,25 +95,25 @@ export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
 };
 
 interface SubtaskSummaryProps {
-  input: Input2 | Input4;
-  result: Result1;
+  input: Input2 | Input5;
+  result: Result2;
 }
 /**
  * Renders the StateEventView component.
  */
-const SubtaskSummary: React.FC<SubtaskSummaryProps> = ({ input, result }) => {
-  result = typeof result === "object" ? result : { result };
+const SubtaskSummary: FC<SubtaskSummaryProps> = ({ input, result }) => {
+  const output = typeof result === "object" ? result : { result };
   return (
     <div className={clsx(styles.subtaskSummary)}>
       <div className={clsx("text-style-label")}>Input</div>
       <div className={clsx("text-size-large", styles.subtaskLabel)}></div>
       <div className={clsx("text-style-label")}>Output</div>
-      <Rendered values={input} />
+      {input ? <Rendered values={input} /> : undefined}
       <div className={clsx("text-size-title-secondary", styles.subtaskLabel)}>
         <i className={ApplicationIcons.arrows.right} />
       </div>
       <div>
-        <Rendered values={result} />
+        <Rendered values={output} />
       </div>
     </div>
   );
@@ -123,7 +127,7 @@ interface RenderedProps {
  * Recursively renders content based on the type of `values`.
 value.
  */
-const Rendered: React.FC<RenderedProps> = ({ values }) => {
+const Rendered: FC<RenderedProps> = ({ values }) => {
   if (Array.isArray(values)) {
     return values.map((val) => {
       return <Rendered values={val} />;
@@ -139,7 +143,7 @@ const Rendered: React.FC<RenderedProps> = ({ values }) => {
   }
 };
 
-const None: React.FC = () => {
+const None: FC = () => {
   return (
     <span className={clsx("text-size-small", "text-style-secondary")}>
       [None]

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

@@ -1,6 +1,5 @@
 import { ApplicationIcons } from "../../appearance/icons";
 import { ToolEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { resolveToolInput } from "../chat/tools/tool";
 import { ToolCallView } from "../chat/tools/ToolCallView";
 import { ApprovalEventView } from "./ApprovalEventView";
@@ -8,7 +7,8 @@ import { EventPanel } from "./event/EventPanel";
 import { TranscriptView } from "./TranscriptView";
 import { TranscriptEventState } from "./types";
 
-import { useMemo } from "react";
+import { FC, useMemo } from "react";
+import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./ToolEventView.module.css";
 
 interface ToolEventViewProps {
@@ -23,7 +23,7 @@ interface ToolEventViewProps {
 /**
  * Renders the ToolEventView component.
  */
-export const ToolEventView: React.FC<ToolEventViewProps> = ({
+export const ToolEventView: FC<ToolEventViewProps> = ({
   id,
   event,
   eventState,
@@ -46,9 +46,9 @@ export const ToolEventView: React.FC<ToolEventViewProps> = ({
   return (
     <EventPanel
       id={id}
-      title={title}
+      title={formatTitle(title, undefined, event.working_time)}
       className={className}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       icon={ApplicationIcons.solvers.use_tools}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {

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,8 @@ 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";
 
 interface TranscriptViewProps {
@@ -83,7 +84,7 @@ export const TranscriptVirtualList: React.FC<TranscriptVirtualListProps> = (
     (state: TranscriptEventState) => {
       setTranscriptState(state);
     },
-    [transcriptState, setTranscriptState],
+    [setTranscriptState],
   );
 
   return (
@@ -115,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;
@@ -139,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")}
     />
   );
 };
@@ -164,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) {
@@ -174,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
@@ -194,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>
     );
@@ -373,6 +391,17 @@ export const RenderedEventNode: React.FC<RenderedEventNodeProps> = ({
     case "approval":
       return <ApprovalEventView event={node.event} className={className} />;
 
+    case "sandbox":
+      return (
+        <SandboxEventView
+          id={id}
+          event={node.event}
+          className={className}
+          eventState={eventState}
+          setEventState={setEventState}
+        />
+      );
+
     default:
       return null;
   }
@@ -390,8 +419,14 @@ const fixupEventStream = (events: Events) => {
   // Filter pending events
   const finalEvents = events.filter((e) => !e.pending);
 
+  // See if the find an init step
+  const hasInitStep =
+    events.findIndex((e) => {
+      return e.event === "step" && e.name === "init";
+    }) !== -1;
+
   const fixedUp = [...finalEvents];
-  if (initEvent) {
+  if (!hasInitStep && initEvent) {
     fixedUp.splice(initEventIndex, 0, {
       timestamp: initEvent.timestamp,
       event: "step",
@@ -399,6 +434,7 @@ const fixupEventStream = (events: Events) => {
       type: null,
       name: "sample_init",
       pending: false,
+      working_start: 0,
     });
 
     fixedUp.splice(initEventIndex + 2, 0, {
@@ -408,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/EventPanel.tsx

@@ -55,16 +55,19 @@ export const EventPanel: React.FC<EventPanelProps> = ({
   const defaultPillId = pillId(0);
 
   const gridColumns = [];
+
+  // chevron
   if (hasCollapse) {
     gridColumns.push("minmax(0, max-content)");
   }
+
+  // icon
   if (icon) {
     gridColumns.push("max-content");
   }
+
+  // title
   gridColumns.push("minmax(0, max-content)");
-  if (subTitle) {
-    gridColumns.push("minmax(0, max-content)");
-  }
   gridColumns.push("auto");
   gridColumns.push("minmax(0, max-content)");
   gridColumns.push("minmax(0, max-content)");

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;
+}