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

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

@@ -1,10 +1,9 @@
-import { ToolEvent } from "../../../@types/log";
+import { ApprovalEvent, ModelEvent, ToolEvent } from "../../../@types/log";
 import { ApplicationIcons } from "../../appearance/icons";
 import { resolveToolInput } from "../chat/tools/tool";
 import { ToolCallView } from "../chat/tools/ToolCallView";
 import { ApprovalEventView } from "./ApprovalEventView";
 import { EventPanel } from "./event/EventPanel";
-import { TranscriptComponent } from "./TranscriptView";
 
 import clsx from "clsx";
 import { FC, useMemo } from "react";
@@ -12,12 +11,11 @@ import { PulsingDots } from "../../../components/PulsingDots";
 import { ChatView } from "../chat/ChatView";
 import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./ToolEventView.module.css";
-import { EventNode } from "./types";
+import { EventNode, EventType } from "./types";
 
 interface ToolEventViewProps {
-  id: string;
-  event: ToolEvent;
-  children: EventNode[];
+  eventNode: EventNode<ToolEvent>;
+  children: EventNode<EventType>[];
   className?: string | string[];
 }
 
@@ -25,39 +23,47 @@ interface ToolEventViewProps {
  * Renders the ToolEventView component.
  */
 export const ToolEventView: FC<ToolEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   children,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
+
   // Extract tool input
   const { input, functionCall, highlightLanguage } = useMemo(
     () => resolveToolInput(event.function, event.arguments),
     [event.function, event.arguments],
   );
 
-  const { approvalEvent, lastModelEvent } = useMemo(() => {
-    // Find an approval if there is one
-    const approvalEvent = event.events.find((e) => {
-      return e.event === "approval";
+  const { approvalNode, lastModelNode } = useMemo(() => {
+    const approvalNode = children.find((e) => {
+      return e.event.event === "approval";
     });
 
     // Find a model message to render, if there is one
-    const lastModelEvent = [...event.events].reverse().find((e) => {
-      return e.event === "model";
+
+    const lastModelNode = children.findLast((e) => {
+      return e.event.event === "model";
     });
 
-    return { approvalEvent, lastModelEvent };
+    return {
+      approvalNode: approvalNode as EventNode<ApprovalEvent> | undefined,
+      lastModelNode: lastModelNode as EventNode<ModelEvent> | undefined,
+    };
   }, [event.events]);
 
   const title = `Tool: ${event.view?.title || event.function}`;
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       title={formatTitle(title, undefined, event.working_time)}
       className={className}
       subTitle={formatTiming(event.timestamp, event.working_start)}
       icon={ApplicationIcons.solvers.use_tools}
+      childIds={children.map((child) => child.id)}
+      collapseControl="bottom"
     >
       <div data-name="Summary" className={styles.summary}>
         <ToolCallView
@@ -70,18 +76,18 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
           view={event.view ? event.view : undefined}
         />
 
-        {lastModelEvent && lastModelEvent.event === "model" ? (
+        {lastModelNode ? (
           <ChatView
             id={`${id}-toolcall-chatmessage`}
-            messages={lastModelEvent.output.choices.map((m) => m.message)}
+            messages={lastModelNode.event.output.choices.map((m) => m.message)}
             numbered={false}
             toolCallStyle="compact"
           />
         ) : undefined}
 
-        {approvalEvent ? (
+        {approvalNode ? (
           <ApprovalEventView
-            event={approvalEvent}
+            eventNode={approvalNode}
             className={styles.approval}
           />
         ) : (
@@ -93,16 +99,6 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
           </div>
         ) : undefined}
       </div>
-      {children.length > 0 ? (
-        <TranscriptComponent
-          data-name="Transcript"
-          id={`${id}-subtask`}
-          eventNodes={children}
-          data-default={event.failed || event.agent ? true : null}
-        />
-      ) : (
-        ""
-      )}
     </EventPanel>
   );
 };

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

@@ -0,0 +1,297 @@
+import { FC, memo, RefObject, useEffect, useMemo } from "react";
+import {
+  ApprovalEvent,
+  ErrorEvent,
+  Events,
+  InfoEvent,
+  InputEvent,
+  LoggerEvent,
+  ModelEvent,
+  SampleInitEvent,
+  SampleLimitEvent,
+  SandboxEvent,
+  ScoreEvent,
+  SpanBeginEvent,
+  StateEvent,
+  StepEvent,
+  StoreEvent,
+  SubtaskEvent,
+  ToolEvent,
+} from "../../../@types/log";
+import { ApprovalEventView } from "./ApprovalEventView";
+import { ErrorEventView } from "./ErrorEventView";
+import { InfoEventView } from "./InfoEventView";
+import { InputEventView } from "./InputEventView";
+import { LoggerEventView } from "./LoggerEventView";
+import { ModelEventView } from "./ModelEventView";
+import { SampleInitEventView } from "./SampleInitEventView";
+import { SampleLimitEventView } from "./SampleLimitEventView";
+import { SandboxEventView } from "./SandboxEventView";
+import { ScoreEventView } from "./ScoreEventView";
+import { StateEventView } from "./state/StateEventView";
+import { StepEventView } from "./StepEventView";
+import { SubtaskEventView } from "./SubtaskEventView";
+import { ToolEventView } from "./ToolEventView";
+import { EventNode } from "./types";
+
+import { useStore } from "../../../state/store";
+import { SpanEventView } from "./SpanEventView";
+import { TranscriptVirtualListComponent } from "./TranscriptVirtualListComponent";
+import { fixupEventStream, kSandboxSignalName } from "./transform/fixups";
+import { flatTree, treeifyEvents } from "./transform/treeify";
+
+interface TranscriptVirtualListProps {
+  id: string;
+  events: Events;
+  initialEventId: string | null;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  running?: boolean;
+}
+
+/**
+ * Renders the Transcript Virtual List.
+ */
+export const TranscriptVirtualList: FC<TranscriptVirtualListProps> = memo(
+  (props) => {
+    let { id, scrollRef, events, running, initialEventId } = props;
+
+    // The list of events that have been collapsed
+    const collapsedEvents = useStore((state) => state.sample.collapsedEvents);
+    const setCollapsedEvents = useStore(
+      (state) => state.sampleActions.setCollapsedEvents,
+    );
+
+    // Normalize Events in a flattened filtered list
+    const { eventNodes, defaultCollapsedIds } = useMemo(() => {
+      // Apply fixups to the event string
+      const resolvedEvents = fixupEventStream(events, !running);
+
+      // Build the event tree
+      const eventTree = treeifyEvents(resolvedEvents, 0);
+
+      // Apply collapse filters to the event tree
+      const defaultCollapsedIds: Record<string, true> = {};
+      const findCollapsibleEvents = (nodes: EventNode[]) => {
+        for (const node of nodes) {
+          if (
+            (node.event.event === "step" ||
+              node.event.event === "span_begin" ||
+              node.event.event === "tool" ||
+              node.event.event === "subtask") &&
+            collapseFilters.some((filter) =>
+              filter(
+                node.event as
+                  | StepEvent
+                  | SpanBeginEvent
+                  | ToolEvent
+                  | SubtaskEvent,
+              ),
+            )
+          ) {
+            defaultCollapsedIds[node.id] = true;
+          }
+
+          // Recursively check children
+          findCollapsibleEvents(node.children);
+        }
+      };
+      findCollapsibleEvents(eventTree);
+
+      // flattten the event tree
+      const eventNodes = flatTree(
+        eventTree,
+        collapsedEvents || defaultCollapsedIds,
+      );
+
+      return { eventNodes, defaultCollapsedIds };
+    }, [events, running, collapsedEvents]);
+
+    // Update the collapsed events when the default collapsed IDs change
+    // This effect only depends on defaultCollapsedIds, not eventNodes
+    useEffect(() => {
+      // Only initialize collapsedEvents if it's empty
+      if (!collapsedEvents && Object.keys(defaultCollapsedIds).length > 0) {
+        setCollapsedEvents(defaultCollapsedIds);
+      }
+    }, [defaultCollapsedIds, collapsedEvents, setCollapsedEvents]);
+
+    return (
+      <TranscriptVirtualListComponent
+        id={id}
+        eventNodes={eventNodes}
+        initialEventId={initialEventId}
+        scrollRef={scrollRef}
+        running={running}
+      />
+    );
+  },
+);
+
+const collapseFilters: Array<
+  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => boolean
+> = [
+  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
+    event.type === "solver" && event.name === "system_message",
+  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => {
+    if (event.event === "step" || event.event === "span_begin") {
+      return (
+        event.name === kSandboxSignalName ||
+        event.name === "init" ||
+        event.name === "sample_init"
+      );
+    }
+    return false;
+  },
+  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
+    event.event === "tool" && !event.agent && !event.failed,
+  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
+    event.event === "subtask",
+];
+
+interface RenderedEventNodeProps {
+  node: EventNode;
+  className?: string | string[];
+}
+/**
+ * Renders the event based on its type.
+ */
+export const RenderedEventNode: FC<RenderedEventNodeProps> = memo(
+  ({ node, className }) => {
+    switch (node.event.event) {
+      case "sample_init":
+        return (
+          <SampleInitEventView
+            eventNode={node as EventNode<SampleInitEvent>}
+            className={className}
+          />
+        );
+
+      case "sample_limit":
+        return (
+          <SampleLimitEventView
+            eventNode={node as EventNode<SampleLimitEvent>}
+            className={className}
+          />
+        );
+
+      case "info":
+        return (
+          <InfoEventView
+            eventNode={node as EventNode<InfoEvent>}
+            className={className}
+          />
+        );
+
+      case "logger":
+        return (
+          <LoggerEventView
+            eventNode={node as EventNode<LoggerEvent>}
+            className={className}
+          />
+        );
+
+      case "model":
+        return (
+          <ModelEventView
+            eventNode={node as EventNode<ModelEvent>}
+            className={className}
+          />
+        );
+
+      case "score":
+        return (
+          <ScoreEventView
+            eventNode={node as EventNode<ScoreEvent>}
+            className={className}
+          />
+        );
+
+      case "state":
+        return (
+          <StateEventView
+            eventNode={node as EventNode<StateEvent>}
+            className={className}
+          />
+        );
+
+      case "span_begin":
+        return (
+          <SpanEventView
+            eventNode={node as EventNode<SpanBeginEvent>}
+            children={node.children}
+            className={className}
+          />
+        );
+
+      case "step":
+        return (
+          <StepEventView
+            eventNode={node as EventNode<StepEvent>}
+            children={node.children}
+            className={className}
+          />
+        );
+
+      case "store":
+        return (
+          <StateEventView
+            eventNode={node as EventNode<StoreEvent>}
+            className={className}
+          />
+        );
+
+      case "subtask":
+        return (
+          <SubtaskEventView
+            eventNode={node as EventNode<SubtaskEvent>}
+            className={className}
+            children={node.children}
+          />
+        );
+
+      case "tool":
+        return (
+          <ToolEventView
+            eventNode={node as EventNode<ToolEvent>}
+            className={className}
+            children={node.children}
+          />
+        );
+
+      case "input":
+        return (
+          <InputEventView
+            eventNode={node as EventNode<InputEvent>}
+            className={className}
+          />
+        );
+
+      case "error":
+        return (
+          <ErrorEventView
+            eventNode={node as EventNode<ErrorEvent>}
+            className={className}
+          />
+        );
+
+      case "approval":
+        return (
+          <ApprovalEventView
+            eventNode={node as EventNode<ApprovalEvent>}
+            className={className}
+          />
+        );
+
+      case "sandbox":
+        return (
+          <SandboxEventView
+            eventNode={node as EventNode<SandboxEvent>}
+            className={className}
+          />
+        );
+
+      default:
+        return null;
+    }
+  },
+);

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

@@ -1,11 +1,3 @@
-.darkenedBg {
-  background-color: var(--bs-light-bg-subtle);
-}
-
-.normalBg {
-  background-color: var(--bs-body-bg);
-}
-
 .node {
   padding-top: 0.7rem;
   padding-bottom: 1px;

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

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { FC, RefObject, useCallback } from "react";
-import { RenderedEventNode } from "./TranscriptView";
+import { FC, RefObject, useCallback, useMemo } from "react";
+import { RenderedEventNode } from "./TranscriptVirtualList";
 import { EventNode } from "./types";
 
 import { LiveVirtualList } from "../../../components/LiveVirtualList";
@@ -9,6 +9,7 @@ import styles from "./TranscriptVirtualListComponent.module.css";
 interface TranscriptVirtualListComponentProps {
   id: string;
   eventNodes: EventNode[];
+  initialEventId?: string | null;
   scrollRef?: RefObject<HTMLDivElement | null>;
   running?: boolean;
 }
@@ -18,37 +19,54 @@ interface TranscriptVirtualListComponentProps {
  */
 export const TranscriptVirtualListComponent: FC<
   TranscriptVirtualListComponentProps
-> = ({ id, eventNodes, scrollRef, running }) => {
-  const renderRow = useCallback((index: number, item: EventNode) => {
-    const bgClass = item.depth % 2 == 0 ? styles.darkenedBg : styles.normalBg;
-    const paddingClass = index === 0 ? styles.first : undefined;
+> = ({ id, eventNodes, scrollRef, running, initialEventId }) => {
+  const initialEventIndex = useMemo(() => {
+    if (initialEventId === null || initialEventId === undefined) {
+      return undefined;
+    }
+    const result = eventNodes.findIndex((event) => {
+      return event.id === initialEventId;
+    });
+    return result === -1 ? undefined : result;
+  }, [initialEventId, eventNodes]);
 
-    const eventId = `${id}-event-${index}`;
-    const previousIndex = index - 1;
-    const previous =
-      previousIndex > 0 && previousIndex <= eventNodes.length
-        ? eventNodes[previousIndex]
-        : undefined;
-    const attached =
-      item.event.event === "tool" &&
-      (previous?.event.event === "tool" || previous?.event.event === "model");
-    const attachedClass = attached ? styles.attached : undefined;
+  const renderRow = useCallback(
+    (index: number, item: EventNode) => {
+      const paddingClass = index === 0 ? styles.first : undefined;
 
-    return (
-      <div
-        key={eventId}
-        className={clsx(styles.node, paddingClass, attachedClass)}
-      >
-        <RenderedEventNode id={eventId} node={item} className={clsx(bgClass)} />
-      </div>
-    );
-  }, []);
+      const previousIndex = index - 1;
+      const previous =
+        previousIndex > 0 && previousIndex <= eventNodes.length
+          ? eventNodes[previousIndex]
+          : undefined;
+      const attached =
+        item.event.event === "tool" &&
+        (previous?.event.event === "tool" || previous?.event.event === "model");
+      const attachedClass = attached ? styles.attached : undefined;
+
+      return (
+        <div
+          id={item.id}
+          key={item.id}
+          className={clsx(styles.node, paddingClass, attachedClass)}
+          style={{
+            paddingLeft: `${item.depth <= 1 ? item.depth * 0.7 : (0.7 + item.depth - 1) * 1}em`,
+            paddingRight: `${item.depth === 0 ? undefined : ".7em"} `,
+          }}
+        >
+          <RenderedEventNode node={item} />
+        </div>
+      );
+    },
+    [eventNodes],
+  );
 
   return (
     <LiveVirtualList<EventNode>
       id={id}
       scrollRef={scrollRef}
       data={eventNodes}
+      initialTopMostItemIndex={initialEventIndex}
       renderRow={renderRow}
       live={running}
     />

inspect_ai/_view/www/src/app/samples/transcript/event/EventPanel.module.css

@@ -10,6 +10,8 @@
 }
 
 .card {
+  position: relative;
+  background-color: var(--bs-body-bg);
   padding: 0.625rem;
   border: solid 1px var(--bs-light-border-subtle);
   border-radius: var(--bs-border-radius);
@@ -23,3 +25,44 @@
 .cardContent.hidden {
   display: none;
 }
+
+.hidden {
+  display: none;
+}
+
+.copyLink {
+  font-size: 1.2em;
+  opacity: 0;
+  padding-left: 0.2em;
+  padding-right: 2em;
+}
+
+.hover .copyLink {
+  opacity: 1;
+}
+
+.root {
+  background-color: var(--bs-light-bg-subtle);
+  border-radius: unset;
+}
+
+.bottomDongle {
+  display: block;
+  position: absolute;
+  margin: 0 auto;
+  width: fit-content;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--bs-body-bg);
+  border: solid 1px var(--bs-light-border-subtle);
+  color: var(--bs-secondary);
+
+  border-radius: var(--bs-border-radius);
+  padding: 0em 0.4em;
+  cursor: pointer;
+}
+
+.dongleIcon {
+  padding-right: 0.3em;
+}